Juego de atrapar estrellas fugaces con JavaScript Canvas

13 Vanzylka0?V

Remix Abrir en el editor Publica tu código

Juego de atrapar estrellas fugaces con JavaScript Canvas

Recomendado

29 December 2025

Diseño de tarjeta HTML: fragmento de sitio web en francés

17 May 2025

sitio web moderno

28 December 2024

Un código de staticdata256

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();