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

No:11995

Tower defense game. When you press start wave, two..ALL
Developer User3709｜Date and time 23/8/13 8:26:21
Build time 35.248 sec｜Game capacity 5.81KB｜

Script

h 10 HP and at wave 10, there will be a boss enemy with 15 HP. The game ends when the player's health reaches 0 or the player successfully defeats the boss enemy. Here's the implementation of the Tower Defense game in a single HTML file:

Tower Defense Game

Player Health: 10

Wave: 1

Game Over!

This HTML file contains the necessary JavaScript code enclosed in script tags to implement the Tower Defense game as described. The game is playable on smartphones and makes use of pictogram-like red boxes for the enemies. The player can start waves, attack enemies, and the game progresses with increasing difficulty. The player's health is displayed, and the game ends when their health reaches 0 or they defeat the boss enemy. The player can restart the game after it ends.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

h 10 HP and at wave 10, there will be a boss enemy with 15 HP. The game ends when the player's health reaches 0 or the player successfully defeats the boss enemy.

Here's the implementation of the Tower Defense game in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tower Defense Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .enemy-box {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        #player-health {
            font-weight: bold;
        }
        #wave-counter {
            font-weight: bold;
        }
        #game-over {
            display: none;
            font-weight: bold;
            font-size: 24px;
        }
        #restart {
            display: none;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Tower Defense Game</h1>
    <div id="game-board"></div>
    <p>Player Health: <span id="player-health">10</span></p>
    <p>Wave: <span id="wave-counter">1</span></p>
    <button id="start-wave">Start Wave</button>
    <button id="attack-enemies">Attack Enemies</button>
    <p id="game-over">Game Over!</p>
    <button id="restart">Restart Game</button>

function createEnemy(speed, health) {
            var enemyBox = document.createElement('div');
            enemyBox.className = 'enemy-box';
            enemyBox.style.left = '0px';
            enemyBox.style.top = '0px';
            enemyBox.speed = speed;
            enemyBox.health = health;
            gameBoard.appendChild(enemyBox);
            return enemyBox;
        }

function moveEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.style.left = parseInt(enemy.style.left) + enemy.speed + 'px';

if (parseInt(enemy.style.left) >= gameBoard.offsetWidth) {
                    // Remove enemy when it reaches the end
                    gameBoard.removeChild(enemy);
                    enemies.splice(i, 1);
                    player.health -= enemy.health;
                    playerHealth.textContent = player.health;

if (player.health <= 0) {
                        endGame();
                    }
                }
            }
        }

function startWave() {
            startWaveBtn.disabled = true;
            attackEnemiesBtn.disabled = false;

for (var i = 0; i < 2; i++) {
                var slowEnemy = createEnemy(1, 3);
                enemies.push(slowEnemy);
            }
        }

function attackEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.health -= 3;

if (enemy.health <= 0) {
                    gameBoard.removeChild(enemy);
                    enemies.splice(i, 1);
                }
            }

if (enemies.length === 0) {
                wave++;
                waveCounter.textContent = wave;

if (wave === 5) {
                    var bigSlowEnemy = createEnemy(1, 10);
                    enemies.push(bigSlowEnemy);
                } else if (wave === 10) {
                    var bossEnemy = createEnemy(1, 15);
                    enemies.push(bossEnemy);
                } else {
                    for (var j = 0; j < 2; j++) {
                        var slowEnemy = createEnemy(1, 3);
                        enemies.push(slowEnemy);
                    }
                    var fastEnemy = createEnemy(2, 7);
                    enemies.push(fastEnemy);
                }
            }
        }

function endGame() {
            attackEnemiesBtn.disabled = true;
            gameOverMsg.style.display = 'block';
            restartBtn.style.display = 'block';
        }

function restartGame() {
            wave = 1;
            enemies = [];
            player.health = 10;
            playerHealth.textContent = player.health;
            waveCounter.textContent = wave;
            startWaveBtn.disabled = false;
            gameOverMsg.style.display = 'none';
            restartBtn.style.display = 'none';
            gameBoard.innerHTML = '';
        }

startWaveBtn.addEventListener('click', startWave);
        attackEnemiesBtn.addEventListener('click', attackEnemies);
        restartBtn.addEventListener('click', restartGame);

setInterval(moveEnemies, 10);
    </script>
</body>
</html>
```