3d zombie sniper game's game

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

No:3398

2655

←

Prev Next

→

3d zombie sniper game
Developer User3691｜Date and time 23/6/24 23:54:39
Build time 31.511 sec｜Game capacity 3.492KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
  <title>3D Zombie Sniper Game</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    canvas {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  </style>
</head>

<body>

// Define the player object
    let player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      speed: 5,
      angle: 0
    };

// Define the zombie object
    let zombie = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      speed: 2,
      angle: 0
    };

// Load the zombie image
    const zombieImage = new Image();
    zombieImage.src = 'https://cdn.pixabay.com/photo/2016/06/13/16/57/zombie-1453933_960_720.png';

// Handle the player movement
    function handlePlayerMovement(event) {
      event.preventDefault();
      switch (event.type) {
        case 'keydown':
          switch (event.key) {
            case 'ArrowUp':
              player.y -= player.speed;
              break;
            case 'ArrowRight':
              player.angle += Math.PI / 16;
              break;
            case 'ArrowDown':
              player.y += player.speed;
              break;
            case 'ArrowLeft':
              player.angle -= Math.PI / 16;
              break;
          }
          break;
        case 'touchstart':
        case 'touchmove':
          const touchX = event.touches[0].clientX;
          const touchY = event.touches[0].clientY;
          const dx = touchX - player.x;
          const dy = touchY - player.y;
          player.angle = Math.atan2(dy, dx) + Math.PI / 2;
          player.y += player.speed * Math.sin(player.angle - Math.PI / 2);
          player.x += player.speed * Math.cos(player.angle - Math.PI / 2);
          break;
      }
    }

// Update the game state
    function update() {
      // Move the zombie towards the player
      const dx = player.x - zombie.x;
      const dy = player.y - zombie.y;
      zombie.angle = Math.atan2(dy, dx);
      zombie.y += zombie.speed * Math.sin(zombie.angle);
      zombie.x += zombie.speed * Math.cos(zombie.angle);

// Check for collision between the player and the zombie
      const distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < 50) {
        alert('Game over!');
      }

// Draw the game objects
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(player.x, player.y);
      context.rotate(player.angle);
      context.fillStyle = 'yellow';
      context.fillRect(-25, -25, 50, 50);
      context.rotate(-player.angle);
      context.translate(-player.x, -player.y);
      context.translate(zombie.x, zombie.y);
      context.rotate(zombie.angle);
      context.drawImage(zombieImage, -25, -25, 50, 50);
      context.rotate(-zombie.angle);
      context.translate(-zombie.x, -zombie.y);
    }

// Start the game loop
    setInterval(update, 1000 / 60);

// Set up the event listeners
    window.addEventListener('keydown', handlePlayerMovement);
    window.addEventListener('touchstart', handlePlayerMovement);
    window.addEventListener('touchmove', handlePlayerMovement);
  </script>

</body>

</html>