Buat game zombie flatformer's game

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

No:34192

←

Prev Next

→

Buat game zombie flatformer
Developer User16163｜Date and time 24/1/9 2:19:43
Build time 40.606 sec｜Game capacity 3.611KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Zombie Platformer Game</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Definisi karakter player
    const player = {
      x: 50,
      y: height - 100,
      width: 50,
      height: 50,
      speed: 8,
      velX: 0,
      velY: 0,
      jumping: false
    };

// Definisi karakter zombie
    const zombie = {
      x: width - 100,
      y: height - 100,
      width: 50,
      height: 50,
      speed: 3,
      velX: 0,
      velY: 0,
      movingRight: true
    };

// Manipulasi pergerakan karakter player
    function movePlayer() {
      if (player.jumping) {
        player.velY += 1.5;
      }

player.x += player.velX;
      player.y += player.velY;

if (player.x >= width - player.width) {
        player.x = width - player.width;
      } else if (player.x <= 0) {
        player.x = 0;
      }

if (player.y >= height - player.height) {
        player.y = height - player.height;
        player.jumping = false;
      }

ctx.fillStyle = "blue";
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

// Manipulasi pergerakan karakter zombie
    function moveZombie() {
      if (zombie.movingRight) {
        zombie.velX = zombie.speed;
      } else {
        zombie.velX = -zombie.speed;
      }

zombie.x += zombie.velX;

if (zombie.x >= width - zombie.width) {
        zombie.movingRight = false;
      } else if (zombie.x <= 0) {
        zombie.movingRight = true;
      }

ctx.fillStyle = "green";
      ctx.fillRect(zombie.x, zombie.y, zombie.width, zombie.height);
    }

// Mendeteksi collision antara player dan zombie
    function checkCollision() {
      if (player.x < zombie.x + zombie.width &&
        player.x + player.width > zombie.x &&
        player.y < zombie.y + zombie.height &&
        player.y + player.height > zombie.y) {
        // Jika terjadi collision, maka game over
        alert("Game Over!");
        location.reload(); // Restart game
      }
    }

// Handling keyboard input
    function keyDownHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        player.velX = player.speed;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        player.velX = -player.speed;
      } else if (e.key === "Up" || e.key === "ArrowUp") {
        if (!player.jumping) {
          player.jumping = true;
          player.velY = -player.speed * 2;
        }
      }
    }

function keyUpHandler(e) {
      if (
        e.key === "Right" ||
        e.key === "ArrowRight" ||
        e.key === "Left" ||
        e.key === "ArrowLeft"
      ) {
        player.velX = 0;
      }
    }

// Event listeners untuk handling input keyboard
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Game loop utama
    function gameLoop() {
      // Bersihkan canvas
      ctx.clearRect(0, 0, width, height);

movePlayer();
      moveZombie();
      checkCollision();

requestAnimationFrame(gameLoop);
    }

// Memulai game
    gameLoop();
  </script>
</body>
</html>