Shooting zombies game First person's game

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

No:40517

←

Prev Next

→

Shooting zombies game First person
Developer User18179｜Date and time 24/2/3 8:09:57
Build time 14.259 sec｜Game capacity 4.088KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shooting Zombies Game</title>

#game-display {
      width: 100%;
      height: 100%;
      background-color: #000;
      overflow: hidden;
    }

#player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 50%;
    }

.zombie {
      position: absolute;
      background-image: url('zombie.png');
      background-size: contain;
      width: 70px;
      height: 70px;
      animation: move-zombie 3s infinite linear;
    }

@keyframes move-zombie {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(100vh);
      }
    }

.bullet {
      position: absolute;
      background-color: red;
      width: 10px;
      height: 10px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-display">
      <div id="player"></div>
    </div>
  </div>

document.addEventListener('DOMContentLoaded', startGame);

function startGame() {
      player = document.getElementById('player');
      document.addEventListener('mousemove', movePlayer);
      spawnZombies();
      setInterval(updateGame, 10); // Update the game every 10ms
    }

function movePlayer(event) {
      const x = event.clientX;
      const y = event.clientY;
      player.style.left = x + 'px';
      player.style.top = y + 'px';
    }

function spawnZombies() {
      const gameDisplay = document.getElementById('game-display');
      setInterval(() => {
        const zombie = document.createElement('div');
        zombie.classList.add('zombie');
        zombie.style.left = (Math.random() * (window.innerWidth - 70)) + 'px';
        zombies.push(zombie);
        gameDisplay.appendChild(zombie);
      }, 1000); // Spawn a zombie every second
    }

function updateGame() {
      moveBullets();
      moveZombies();
      checkCollisions();
    }

function collisionDetected(element1, element2) {
      const rect1 = element1.getBoundingClientRect();
      const rect2 = element2.getBoundingClientRect();
      return (
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top &&
        rect1.left < rect2.right &&
        rect1.right > rect2.left
      );
    }

function updateScore() {
      // Update the score display on the screen
      document.getElementById('score').textContent = score;
    }

function shootBullet() {
      const bullet = document.createElement('div');
      bullet.classList.add('bullet');
      const playerRect = player.getBoundingClientRect();
      bullet.style.top = (playerRect.top + 20) + 'px';
      bullet.style.left = (playerRect.left + 20) + 'px';
      bullets.push(bullet);
      const gameDisplay = document.getElementById('game-display');
      gameDisplay.appendChild(bullet);
    }

document.addEventListener('click', shootBullet);
  </script>
</body>
</html>