Zombie shooter game: the orbs (prequel game)'s game

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

No:51197

131

←

Prev Next

→

Zombie shooter game: the orbs (prequel game)
Developer Winnerweiner2113｜Date and time 24/3/11 6:41:49
Build time 10.703 sec｜Game capacity 3.248KB｜

Script

The above code creates a simple zombie shooter game called "Zombie Shooter: The Orbs." The player can move around and shoot bullets using the spacebar, and zombies move towards the player. The goal is to survive as long as possible by shooting the zombies. The game loop constantly updates the player, bullets, and zombies positions, detects collisions, and redraws the game elements on the canvas.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zombie Shooter: The Orbs</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const player = {
      x: 240,
      y: 160,
      radius: 10,
      color: 'green'
    };
    
    const bullets = [];
    const zombies = [];
    
    function drawPlayer() {
      ctx.beginPath();
      ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
      ctx.fillStyle = player.color;
      ctx.fill();
      ctx.closePath();
    }
    
    function shoot() {
      bullets.push({ x: player.x, y: player.y });
    }
    
    function updateBullets() {
      bullets.forEach(bullet => {
        bullet.x += 5;
      });
      bullets.filter(bullet => bullet.x < canvas.width);
    }
    
    function drawBullets() {
      bullets.forEach(bullet => {
        ctx.beginPath();
        ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.closePath();
      });
    }
    
    function spawnZombie() {
      zombies.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height });
    }
    
    function updateZombies() {
      zombies.forEach(zombie => {
        zombie.x -= 2;
      });
      zombies.filter(zombie => zombie.x > 0);
    }
    
    function drawZombies() {
      zombies.forEach(zombie => {
        ctx.beginPath();
        ctx.arc(zombie.x, zombie.y, 10, 0, Math.PI * 2);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
      });
    }
    
    function checkCollision() {
      bullets.forEach(bullet => {
        zombies.forEach(zombie => {
          const dx = bullet.x - zombie.x;
          const dy = bullet.y - zombie.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
    
          if (distance < 13) {
            bullets.splice(bullets.indexOf(bullet), 1);
            zombies.splice(zombies.indexOf(zombie), 1);
          }
        });
      });
    }
    
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    
      drawPlayer();
      updateBullets();
      drawBullets();
      updateZombies();
      drawZombies();
      checkCollision();
    
      requestAnimationFrame(gameLoop);
    }
    
    document.addEventListener('keydown', (event) => {
      if (event.key === ' ') {
        shoot();
      }
    });
    
    setInterval(spawnZombie, 2000);
    
    gameLoop();
  </script>
</body>
</html>
```
The above code creates a simple zombie shooter game called "Zombie Shooter: The Orbs." The player can move around and shoot bullets using the spacebar, and zombies move towards the player. The goal is to survive as long as possible by shooting the zombies. The game loop constantly updates the player, bullets, and zombies positions, detects collisions, and redraws the game elements on the canvas.