h

<!DOCTYPE html>
<html>
<head>
  <title>Kawaii Candy Catcher 🍬</title>
  <style>
    body {
      margin: 0;
      background: pink;
      overflow: hidden;
      font-family: "Comic Sans MS", cursive;
      text-align: center;
    }
    canvas {
      display: block;
      margin: auto;
      background: #ffe6f2;
      border: 5px solid white;
      border-radius: 15px;
    }
  </style>
</head>
<body>

<h1>🍬 Kawaii Candy Catcher 🍬</h1>
<canvas id="gameCanvas" width="400" height="600"></canvas>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Player
let player = {
  x: 180,
  y: 550,
  width: 50,
  height: 30,
  speed: 7
};

// Candy
let candies = [];
let score = 0;

// Controls
let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);

// Spawn candy
function spawnCandy() {
  candies.push({
    x: Math.random() * 370,
    y: -20,
    size: 20,
    speed: 2 + Math.random() * 3
  });
}

// Draw player (kawaii basket)
function drawPlayer() {
  ctx.fillStyle = "#ff66b2";
  ctx.fillRect(player.x, player.y, player.width, player.height);

  // Cute face
  ctx.fillStyle = "white";
  ctx.fillRect(player.x + 10, player.y + 5, 5, 5);
  ctx.fillRect(player.x + 35, player.y + 5, 5, 5);
}

// Draw candy
function drawCandy(c) {
  ctx.fillStyle = "#ff99cc";
  ctx.beginPath();
  ctx.arc(c.x, c.y, c.size, 0, Math.PI * 2);
  ctx.fill();
}

// Update
function update() {
  // Move player
  if (keys["ArrowLeft"] && player.x > 0) player.x -= player.speed;
  if (keys["ArrowRight"] && player.x < canvas.width - player.width) player.x += player.speed;

  // Move candies
  candies.forEach((c, i) => {
    c.y += c.speed;

    // Collision
    if (
      c.y + c.size > player.y &&
      c.x > player.x &&
      c.x < player.x + player.width
    ) {
      candies.splice(i, 1);
      score++;
    }

    // Missed candy
    if (c.y > canvas.height) {
      candies.splice(i, 1);
    }
  });
}

// Draw everything
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawPlayer();

  candies.forEach(drawCandy);

  ctx.fillStyle = "#ff3399";
  ctx.font = "20px Comic Sans MS";
  ctx.fillText("Score: " + score, 10, 30);
}

// Game loop
function gameLoop() {
  update();
  draw();
  requestAnimationFrame(gameLoop);
}

// Spawn candies repeatedly
setInterval(spawnCandy, 1000);

gameLoop();
</script>

</body>
</html>
Editor is loading...