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

No:11543

120

←

Prev Next

→

A tower defense game with 5 waves
Developer User4914｜Date and time 23/8/11 1:42:16
Build time 38.661 sec｜Game capacity 4.708KB｜

Script

Sure! Here's an example of a tower defense game implemented as a single HTML file using JavaScript. Please note that this is a simplified version of a tower defense game and does not include all features typically found in such games.

Tower Defense Game

This HTML file contains a simple tower defense game with 5 waves. The game board is represented by a grid of cells, where the enemies move along the defined path using pictogram-like colors. Each wave is defined as an array of enemy positions, and the game progresses to the next wave after defeating the current wave. The player's objective is to strategically place towers to stop the enemies from reaching the end of the path.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tower Defense Game</title>
  <style>
    body {
      background-color: #F0F0F0;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    #game-board {
      margin-top: 30px;
    }
    
    .cell {
      width: 50px;
      height: 50px;
      border: 1px solid #CCCCCC;
      display: inline-block;
      margin: -1px 0 0 -1px;
      background-color: #FFFFFF;
    }
    
    .path {
      background-color: #CCCCCC;
    }
    
    .tower {
      background-color: #FF0000;
    }
    
    .enemy {
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <h1>Tower Defense Game</h1>
  <div id="game-board">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><br>
    <div class="cell"></div><div class="cell path"></div><div class="cell path"></div><div class="cell path"></div><div class="cell"></div><br>
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell path"></div><div class="cell"></div><br>
    <div class="cell"></div><div class="cell path"></div><div class="cell"></div><div class="cell path"></div><div class="cell"></div><br>
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell path"></div><div class="cell"></div>
  </div>

function updateGameBoard() {
      for (var i = 0; i < cells.length; i++) {
        cells[i].className = 'cell';
      }
      
      cells[convertPositionToIndex(enemyPosition)].className = 'cell enemy';
    }

function convertPositionToIndex(position) {
      var coordinates = position.split('-');
      var row = parseInt(coordinates[0]);
      var col = parseInt(coordinates[1]);
      
      return (row - 1) * 5 + col - 1;
    }

function moveEnemy() {
      var nextPosition;

// Check if enemy reached the end
      if (enemyPosition === '5-4') {
        alert('Game Over! Enemy reached the end.');
        return;
      }

// Calculate next position for the enemy
      var coordinates = enemyPosition.split('-');
      var row = parseInt(coordinates[0]);
      var col = parseInt(coordinates[1]);
      
      if (cells[convertPositionToIndex(enemyPosition) + 1].classList.contains('path')) {
        nextPosition = row + '-'+ (col + 1);
      } else if (row < 5 && cells[convertPositionToIndex(enemyPosition) + 5].classList.contains('path')) {
        nextPosition = (row + 1) + '-' + col;
      }

// Clear previous enemy position
      cells[convertPositionToIndex(enemyPosition)].className = 'cell';

// Update enemy position
      enemyPosition = nextPosition;

// Update game board
      updateGameBoard();
      setTimeout(moveEnemy, 1000); // Move enemy every 1 second
    }

// Start the game
    startWave();
  </script>
</body>
</html>
```