Top down shooter, you have a gun that fires bullets, you can shoot and k○ll zombies that spawn randomly, zombies k○ll you if they touch you. You have 3 lives, you can move around freely and shoot around you using a joystick. In a city theme area's game

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

No:50604

118

←

Prev Next

→

Top down shooter, you have a gun that fires bullet..ALL
Developer User21371｜Date and time 24/3/9 8:32:19
Build time 10.338 sec｜Game capacity 3.679KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Zombie Shooter game</title>
  <style>
    #gameArea {
      width: 500px;
      height: 500px;
      border: 1px solid black;
      position: relative;
    }
    #player {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    #bullet {
      width: 10px;
      height: 10px;
      background-color: red;
      position: absolute;
    }
    .zombie {
      width: 50px;
      height: 50px;
      background-color: green;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="player"></div>
  </div>

let playerX = 50;
    let playerY = 50;
    let zombies = [];
    let bullets = [];
    let lives = 3;

function createZombie() {
      const zombie = document.createElement("div");
      zombie.classList.add("zombie");
      zombie.style.left = Math.random() * 450 + "px";
      zombie.style.top = Math.random() * 450 + "px";
      gameArea.appendChild(zombie);
      zombies.push(zombie);
    }

function moveZombies() {
      zombies.forEach(zombie => {
        const dx = playerX - parseInt(zombie.style.left);
        const dy = playerY - parseInt(zombie.style.top);
        const angle = Math.atan2(dy, dx);
        zombie.style.left = parseInt(zombie.style.left) + Math.cos(angle) + "px";
        zombie.style.top = parseInt(zombie.style.top) + Math.sin(angle) + "px";
      });
    }

function checkCollisions() {
      zombies.forEach(zombie => {
        if (
          Math.abs(playerX - parseInt(zombie.style.left)) < 25 &&
          Math.abs(playerY - parseInt(zombie.style.top)) < 25
        ) {
          lives--;
          if (lives === 0) {
            alert("Game Over!");
            location.reload();
          }
        }

bullets.forEach(bullet => {
          if (
            Math.abs(parseInt(bullet.style.left) - parseInt(zombie.style.left)) < 25 &&
            Math.abs(parseInt(bullet.style.top) - parseInt(zombie.style.top)) < 25
          ) {
            zombie.remove();
            zombies.splice(zombies.indexOf(zombie), 1);
            bullet.remove();
            bullets.splice(bullets.indexOf(bullet), 1);
          }
        });
      });
    }

setInterval(() => {
      createZombie();
      moveZombies();
      moveBullets();
      checkCollisions();
    }, 1000);

</script>
</body>
</html>