Jeu de capture d'étoiles filantes avec JavaScript Canvas

14 Vanzylka0?V

Remixer Ouvrir dans l'éditeur Publiez votre code

Jeu de capture d'étoiles filantes avec JavaScript Canvas

Recommandé

14 May 2026

Clicker de capybara

24 December 2023

Page d'accueil de café

16 April 2026

Jeux HTML débloqués : Répertoire et visionneuse GN-Math Zone

HTML

CSS

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var player = { x: 180, w: 60 };
var stars = [];
var score = 0;

// Move with the mouse
canvas.addEventListener("mousemove", function (e) {
  player.x = e.offsetX - player.w / 2;
});

// Move with arrow keys
document.addEventListener("keydown", function (e) {
  if (e.key === "ArrowLeft") player.x -= 25;
  if (e.key === "ArrowRight") player.x += 25;
});

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

// Add a new star sometimes
  if (Math.random() < 0.03) stars.push({ x: Math.random() * 380, y: 0 });

ctx.font = "22px sans-serif";
  stars.forEach(function (s) {
    s.y += 3;
    ctx.fillText("⭐", s.x, s.y);
    // Caught it?
    if (s.y > 460 && s.x > player.x - 10 && s.x < player.x + player.w) {
      s.y = 999;
      score++;
      document.getElementById("score").textContent = "Score: " + score;
    }
  });
  stars = stars.filter(function (s) { return s.y < 520; });

// Draw the player
  ctx.fillStyle = "#10b3a4";
  ctx.fillRect(player.x, 470, player.w, 14);

requestAnimationFrame(loop);
}
loop();