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

No:19418

←

Prev Next

→

Zombie tower defense
Developer User8617｜Date and time 23/10/3 23:56:08
Build time 25.879 sec｜Game capacity 3.954KB｜

Script

Sure! Here's an example of a simple Zombie Tower Defense game implemented as a single HTML file using JavaScript. You can copy and paste the code into an HTML file and open it in a web browser to play the game.

Zombie Tower Defense

In this game, you control a blue square (the player) at the bottom of the canvas. Zombies (green squares) will move down from the top. Your goal is to shoot the zombies by clicking on the canvas to launch red bullets (smaller squares). If any zombie reaches the bottom, the game is over, and "Game Over" will be displayed on the screen. Note that this is a simple example and can be further improved with additional features, levels, and game mechanics.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Zombie Tower Defense</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Zombie Tower Defense</h1>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

var player = {
      x: 400,
      y: 550,
      width: 50,
      height: 50,
      color: "blue"
    };

var zombies = [
      { x: 100, y: 100, width: 50, height: 50, color: "green", speed: 1 },
      { x: 300, y: 200, width: 50, height: 50, color: "green", speed: 1 },
      { x: 500, y: 300, width: 50, height: 50, color: "green", speed: 1 }
    ];

var bullets = [];

var gameOver = false;

// Event listeners
    canvas.addEventListener("mousemove", function(event) {
      if (!gameOver) {
        player.x = event.clientX - canvas.offsetLeft;
      }
    });

canvas.addEventListener("click", function(event) {
      if (!gameOver) {
        bullets.push({ x: player.x, y: player.y, width: 10, height: 10, color: "red", speed: 5 });
      }
    });

// Game loop
    function gameLoop() {
      update();
      draw();

if (!gameOver) {
        requestAnimationFrame(gameLoop);
      }
    }

// Update game state
    function update() {
      for (var i = bullets.length - 1; i >= 0; i--) {
        var bullet = bullets[i];
        bullet.y -= bullet.speed;

if (bullet.y < 0) {
          bullets.splice(i, 1);
        }
      }

for (var i = zombies.length - 1; i >= 0; i--) {
        var zombie = zombies[i];
        zombie.y += zombie.speed;

if (zombie.y + zombie.height > canvas.height) {
          gameOver = true;
        }

for (var j = bullets.length - 1; j >= 0; j--) {
          var bullet = bullets[j];

if (
            bullet.x < zombie.x + zombie.width &&
            bullet.x + bullet.width > zombie.x &&
            bullet.y < zombie.y + zombie.height &&
            bullet.y + bullet.height > zombie.y
          ) {
            zombies.splice(i, 1);
            bullets.splice(j, 1);
          }
        }
      }
    }

// Draw game objects
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);

for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        ctx.fillStyle = bullet.color;
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
      }

for (var i = 0; i < zombies.length; i++) {
        var zombie = zombies[i];
        ctx.fillStyle = zombie.color;
        ctx.fillRect(zombie.x, zombie.y, zombie.width, zombie.height);
      }

if (gameOver) {
        ctx.fillStyle = "red";
        ctx.font = "bold 36px Arial";
        ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
      }
    }

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

Note that this is a simple example and can be further improved with additional features, levels, and game mechanics.