Make 1st person shooter game with zombies's game

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

No:44143

←

Prev Next

→

Make 1st person shooter game with zombies
Developer User19320｜Date and time 24/2/17 5:44:14
Build time 9.263 sec｜Game capacity 2.519KB｜

Script

Sure! Here's a simple implementation of a first-person shooter game with zombies using HTML, CSS, and JavaScript:

To play the game, simply open the HTML file in a web browser. The game canvas will occupy the entire screen. Move your mouse to control the player's position, and click to create new zombies. The goal is to collide with the zombies to eliminate them and increase your score.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple implementation of a first-person shooter game with zombies using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Zombie Shooter</title>
  <style>
    #gameCanvas {
      width: 100%;
      height: 100%;
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

function createZombie() {
      var zombie = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height
      };
      zombies.push(zombie);
    }

function handleZombieCollision() {
      for (var i = 0; i < zombies.length; i++) {
        var zombie = zombies[i];
        var dx = zombie.x - playerX;
        var dy = zombie.y - playerY;
        var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 10) {
          zombies.splice(i, 1);
          score++;
        }
      }
    }

function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);

handleZombieCollision();

context.fillStyle = '#ff0000'; // Player color
      context.fillRect(playerX - 5, playerY - 5, 10, 10);

context.fillStyle = '#00ff00'; // Zombie color
      for (var i = 0; i < zombies.length; i++) {
        var zombie = zombies[i];
        context.fillRect(zombie.x - 2, zombie.y - 2, 4, 4);
      }

requestAnimationFrame(updateGame);
    }

function handleMouseMove(event) {
      playerX = event.clientX;
      playerY = event.clientY;
    }

function handleMouseClick(event) {
      createZombie();
    }

function startGame() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      
      canvas.addEventListener('mousemove', handleMouseMove);
      canvas.addEventListener('click', handleMouseClick);

// Initial player position
      playerX = canvas.width / 2;
      playerY = canvas.height / 2;

// Create zombies
      for (var i = 0; i < 10; i++) {
        createZombie();
      }

updateGame();
    }

startGame();
  </script>
</body>
</html>
```