<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<title>Carrot Hunter</title>
<style>
  body {
    margin: 0;
    background: #9dd9ff;
    overflow: hidden;
    font-family: Arial, sans-serif;
  }
  canvas {
    display: block;
    background: linear-gradient(#9dd9ff, #c9f7c5);
  }
</style>
</head>
<body>
<canvas id="game"></canvas>

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const gravity = 0.6;
let score = 0;

const bunny = {
  x: 100,
  y: 300,
  w: 40,
  h: 40,
  vx: 0,
  vy: 0,
  onGround: false
};

const carrots = [];
for (let i = 0; i < 5; i++) {
  carrots.push({
    x: 300 + i * 200,
    y: 300,
    r: 10,
    collected: false
  });
}

const ground = canvas.height - 80;

const keys = {};
window.addEventListener("keydown", e => keys[e.key] = true);
window.addEventListener("keyup", e => keys[e.key] = false);

function update() {
  // Movement
  bunny.vx = 0;
  if (keys["ArrowLeft"]) bunny.vx = -5;
  if (keys["ArrowRight"]) bunny.vx = 5;
  if (keys["ArrowUp"] && bunny.onGround) {
    bunny.vy = -12;
    bunny.onGround = false;
  }

  bunny.vy += gravity;
  bunny.x += bunny.vx;
  bunny.y += bunny.vy;

  // Ground collision
  if (bunny.y + bunny.h >= ground) {
    bunny.y = ground - bunny.h;
    bunny.vy = 0;
    bunny.onGround = true;
  }

  // Carrot collision
  carrots.forEach(c => {
    if (!c.collected) {
      const dx = bunny.x + bunny.w/2 - c.x;
      const dy = bunny.y + bunny.h/2 - c.y;
      if (Math.sqrt(dx*dx + dy*dy) < c.r + 20) {
        c.collected = true;
        score++;
      }
    }
  });
}

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

  // Ground
  ctx.fillStyle = "#5c8a3d";
  ctx.fillRect(0, ground, canvas.width, 80);

  // Bunny
  ctx.fillStyle = "#fff";
  ctx.fillRect(bunny.x, bunny.y, bunny.w, bunny.h);
  ctx.fillStyle = "#000";
  ctx.fillRect(bunny.x+10, bunny.y+10, 5, 5);
  ctx.fillRect(bunny.x+25, bunny.y+10, 5, 5);

  // Carrots
  carrots.forEach(c => {
    if (!c.collected) {
      ctx.fillStyle = "orange";
      ctx.beginPath();
      ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = "green";
      ctx.fillRect(c.x - 2, c.y - c.r - 5, 4, 6);
    }
  });

  // Score
  ctx.fillStyle = "#000";
  ctx.font = "24px Arial";
  ctx.fillText("Gulerødder: " + score + " / " + carrots.length, 20, 40);
}

function gameLoop() {
  update();
  draw();
  requestAnimationFrame(gameLoop);
}

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