175 lines
3.9 KiB
HTML
175 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Carrot Hunter - Test</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #9dd9ff;
|
|
overflow: hidden;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
background: linear-gradient(#9dd9ff, #c9f7c5);
|
|
}
|
|
#debug {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(255,255,255,0.9);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="game"></canvas>
|
|
<div id="debug">
|
|
<div>Status: Loading...</div>
|
|
<div id="errors"></div>
|
|
</div>
|
|
|
|
<script>
|
|
console.log("Script started");
|
|
|
|
try {
|
|
const canvas = document.getElementById("game");
|
|
const ctx = canvas.getContext("2d");
|
|
console.log("Canvas found:", canvas);
|
|
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
console.log("Canvas size:", canvas.width, "x", canvas.height);
|
|
|
|
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
|
|
});
|
|
}
|
|
console.log("Carrots created:", carrots.length);
|
|
|
|
const ground = canvas.height - 80;
|
|
|
|
const keys = {};
|
|
window.addEventListener("keydown", e => {
|
|
keys[e.key] = true;
|
|
console.log("Key down:", e.key);
|
|
});
|
|
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++;
|
|
console.log("Carrot collected! Score:", 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);
|
|
|
|
// Debug info
|
|
ctx.fillText("Bunny: (" + Math.floor(bunny.x) + ", " + Math.floor(bunny.y) + ")", 20, 70);
|
|
ctx.fillText("Keys: " + Object.keys(keys).filter(k => keys[k]).join(", "), 20, 100);
|
|
}
|
|
|
|
let frameCount = 0;
|
|
function gameLoop() {
|
|
update();
|
|
draw();
|
|
frameCount++;
|
|
if (frameCount === 1) {
|
|
console.log("First frame rendered");
|
|
document.getElementById("debug").innerHTML = '<div style="color:green">✓ Game running! Use arrow keys to play</div>';
|
|
}
|
|
requestAnimationFrame(gameLoop);
|
|
}
|
|
|
|
console.log("Starting game loop");
|
|
gameLoop();
|
|
|
|
} catch(error) {
|
|
console.error("Error:", error);
|
|
document.getElementById("errors").innerHTML = '<div style="color:red">ERROR: ' + error.message + '</div>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|