Boss battle with ending's game

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

No:47661

←

Prev Next

→

Boss battle with ending
Developer User20597｜Date and time 24/2/29 3:07:43
Build time 13.544 sec｜Game capacity 1.864KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Boss Battle Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    let playerX = 400;
    let playerY = 500;
    let bossX = 400;
    let bossY = 50;
    let playerWidth = 50;
    let playerHeight = 50;
    let bossWidth = 100;
    let bossHeight = 100;
    let playerSpeed = 10;
    let bossSpeed = 5;
    
    function drawPlayer() {
      ctx.fillStyle = "red";
      ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
    }
    
    function drawBoss() {
      ctx.fillStyle = "blue";
      ctx.fillRect(bossX, bossY, bossWidth, bossHeight);
    }
    
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function movePlayer(event) {
      if (event.key === "ArrowLeft" && playerX > 0) {
        playerX -= playerSpeed;
      } else if (event.key === "ArrowRight" && playerX < canvas.width - playerWidth) {
        playerX += playerSpeed;
      }
    }
    
    function moveBoss() {
      if (bossX < playerX) {
        bossX += bossSpeed;
      } else if (bossX > playerX) {
        bossX -= bossSpeed;
      }
    }
    
    function checkCollision() {
      if (playerX < bossX + bossWidth && playerX + playerWidth > bossX &&
          playerY < bossY + bossHeight && playerY + playerHeight > bossY) {
        alert("You defeated the boss! Game over.");
        document.removeEventListener("keydown", movePlayer);
        clearInterval(gameLoop);
      }
    }
    
    document.addEventListener("keydown", movePlayer);
    
    let gameLoop = setInterval(() => {
      clearCanvas();
      drawPlayer();
      drawBoss();
      moveBoss();
      checkCollision();
    }, 50);
  </script>
</body>
</html>