A tower defense Game with they theme marvel's game

Click here for free DL of the app version that can save data.

No:15968

←

Prev Next

→

A tower defense Game with they theme marvel
Developer User7025｜Date and time 23/9/14 9:27:41
Build time 65.413 sec｜Game capacity 6.14KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Tower Defense - Marvel Edition</title>
  <style>
    #game-container {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

// Game configuration
    const gameWidth = 10; // Number of cells horizontally
    const gameHeight = 10; // Number of cells vertically
    const enemySpawnRate = 2000; // Spawn a new enemy every 2 seconds

let gameContainer;
    let gameGrid;
    let gameInterval;
    let gameRunning;
    let baseHealth;
    let enemies;

/**
     * Initialize the game
     */
    function initGame() {
      gameContainer = document.getElementById('game-container');
      gameGrid = createGameGrid();
      baseHealth = 10;
      enemies = [];

drawGameGrid();
      createBase();
      startEnemySpawning();
    }

/**
     * Create the initial game grid
     * @returns {Array} The game grid
     */
    function createGameGrid() {
      const grid = [];

for (let y = 0; y < gameHeight; y++) {
        const row = [];

for (let x = 0; x < gameWidth; x++) {
          row.push(pictograms.empty);
        }

grid.push(row);
      }

return grid;
    }

/**
     * Draw the game grid on the screen
     */
    function drawGameGrid() {
      gameContainer.innerHTML = '';

for (let y = 0; y < gameHeight; y++) {
        const rowElem = document.createElement('div');
        rowElem.classList.add('row');

for (let x = 0; x < gameWidth; x++) {
          const cellElem = document.createElement('span');
          cellElem.classList.add('cell');

cellElem.innerText = gameGrid[y][x];
          rowElem.appendChild(cellElem);
        }

gameContainer.appendChild(rowElem);
      }
    }

/**
     * Create the base for the player
     */
    function createBase() {
      const baseX = Math.floor(gameWidth / 2);
      const baseY = gameHeight - 1;

gameGrid[baseY][baseX] = pictograms.base;
    }

/**
     * Start spawning enemies
     */
    function startEnemySpawning() {
      gameInterval = setInterval(spawnEnemy, enemySpawnRate);
    }

/**
     * Spawn a new enemy at a random grid position
     */
    function spawnEnemy() {
      const enemyX = Math.floor(Math.random() * gameWidth);
      const enemyY = 0;

gameGrid[enemyY][enemyX] = pictograms.enemy;
      enemies.push({ x: enemyX, y: enemyY });
    }

/**
     * Move all the enemies on the grid
     */
    function moveEnemies() {
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];

if (enemy.y < gameHeight - 1) {
          gameGrid[enemy.y][enemy.x] = pictograms.empty;
          enemy.y++;
          gameGrid[enemy.y][enemy.x] = pictograms.enemy;
        } else {
          enemies.splice(i, 1);
          baseHealth--;
          if (baseHealth <= 0) {
            endGame();
            return;
          }
        }
      }
    }

/**
     * Check for collision between bullets and enemies
     */
    function checkCollisions() {
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];

for (let y = 0; y < gameHeight; y++) {
          for (let x = 0; x < gameWidth; x++) {
            if (gameGrid[y][x] === pictograms.bullet && x === enemy.x && y === enemy.y) {
              enemies.splice(i, 1);
              gameGrid[enemy.y][enemy.x] = pictograms.empty;
              gameGrid[y][x] = pictograms.empty;
              return;
            }
          }
        }
      }
    }

/**
     * End the game and display the result
     */
    function endGame() {
      clearInterval(gameInterval);
      gameRunning = false;

gameContainer.innerHTML = `<h1>Game Over! Final score: ${enemies.length}</h1>`;
    }

/**
     * Handle user input and move the base
     * @param {Event} event - The keydown event
     */
    function handleUserInput(event) {
      const key = event.key;

if (key === 'ArrowLeft') {
        moveBase(-1);
      } else if (key === 'ArrowRight') {
        moveBase(1);
      } else if (key === ' ') {
        fireBullet();
      }
    }

/**
     * Move the base left or right
     * @param {number} direction - The movement direction (-1 for left, 1 for right)
     */
    function moveBase(direction) {
      const baseX = getBaseX();
      const newBaseX = baseX + direction;

if (newBaseX >= 0 && newBaseX < gameWidth) {
        gameGrid[gameHeight - 1][baseX] = pictograms.empty;
        gameGrid[gameHeight - 1][newBaseX] = pictograms.base;
      }
    }

/**
     * Get the current position of the base on the x-axis
     * @returns {number} The x-axis position of the base
     */
    function getBaseX() {
      for (let x = 0; x < gameWidth; x++) {
        if (gameGrid[gameHeight - 1][x] === pictograms.base) {
          return x;
        }
      }
      return -1;
    }

/**
     * Fire a bullet from the base
     */
    function fireBullet() {
      const baseX = getBaseX();
      const bulletX = baseX;
      let bulletY = gameHeight - 2;

gameGrid[bulletY][bulletX] = pictograms.bullet;

// Start the game
    initGame();
    gameRunning = true;
    document.addEventListener('keydown', handleUserInput);

// Game loop
    setInterval(() => {
      if (gameRunning) {
        moveEnemies();
        checkCollisions();
        drawGameGrid();
      }
    }, 500);
  </script>
</body>
</html>