134 lines
2.5 KiB
Plaintext
134 lines
2.5 KiB
Plaintext
<!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>
|