Minijuego de atrapar estrellas en HTML Canvas y JavaScript

8 Vanzylka0?V

Remix Abrir en el editor Publica tu código

Minijuego de atrapar estrellas en HTML Canvas y JavaScript

Recomendado

12 August 2025

Fragmento de código de animación de corazón CSS

3 December 2025

Documentación de la API de contenido web v1

21 September 2024

Luz de entrada de contraseña

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