上から落ちてくる星を下から撃ち落とすゲーム's game

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

No:52241

113

←

Prev Next

→

上から落ちてくる星を下から撃ち落とすゲーム
Developer User21817｜Date and time 24/3/19 19:09:24
Build time 10.266 sec｜Game capacity 1.942KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Stars Game</title>
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>

let player = {
    x: canvas.width / 2,
    y: canvas.height - 50,
    width: 30,
    height: 30,
    speed: 5
  };

let stars = [];
  let starSpeed = 2;

canvas.addEventListener("mousemove", function(event) {
    player.x = event.clientX - canvas.getBoundingClientRect().left;
  });

function createStar() {
    let x = Math.floor(Math.random() * canvas.width);
    let y = 0;
    let star = { x, y, width: 10, height: 10 };
    stars.push(star);
  }

function drawPlayer() {
    ctx.fillStyle = "yellow";
    ctx.fillRect(player.x - player.width / 2, player.y - player.height / 2, player.width, player.height);
  }

function detectCollision(star) {
    return player.x - player.width / 2 < star.x + star.width &&
           player.x + player.width / 2 > star.x &&
           player.y - player.height / 2 < star.y + star.height &&
           player.y + player.height / 2 > star.y;
  }

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

createStar();
    drawStars();
    drawPlayer();

stars.forEach((star, index) => {
      if (detectCollision(star)) {
        stars.splice(index, 1);
      }
    });

requestAnimationFrame(gameLoop);
  }

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