Leprechaun's Gold Hunt

Guld: 0

Använd pilarna (eller WASD) för att flytta din Leprechaun!

/* Grundläggande inställningar för sidan */ body { background-color: #2c3e50; /* Mörkblå bakgrund utanför spelet */ color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } /* Behållaren för hela spelet */ #game-container { text-align: center; background-color: #34495e; padding: 20px 30px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } /* Rubriken */ h1 { margin-top: 0; color: #f1c40f; /* Fin guldfärg */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } /* Poängtavlan */ #ui { font-size: 1.4rem; margin-bottom: 15px; font-weight: bold; color: #ecf0f1; } #score { color: #f1c40f; /* Poängen blir guldfärgad */ } /* Själva spelytan (Canvas) */ canvas { background-color: #27ae60; /* Gräsgrön färg för spelytan */ border: 5px solid #1e8449; border-radius: 8px; display: block; margin: 0 auto; box-shadow: inset 0 0 10px rgba(0,0,0,0.3); } /* Instruktionstexten under spelet */ .instructions { margin-top: 15px; margin-bottom: 0; font-size: 0.95rem; color: #bdc3c7; font-style: italic; // Hämta canvas och kontext const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const scoreElement = document.getElementById("score"); // Speltillstånd let score = 0; // Spelaren (Leprechaun) const player = { x: canvas.width / 2, y: canvas.height / 2, radius: 15, speed: 5, color: "#2ecc71" // Grön }; // Guldet const gold = { x: Math.random() * (canvas.width - 40) + 20, y: Math.random() * (canvas.height - 40) + 20, radius: 10, color: "#f1c40f" // Guldgul }; // Håll koll på tangenttryckningar const keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, w: false, a: false, s: false, d: false }; // Lyssna på tangentbordsinput window.addEventListener("keydown", (e) => { if (e.key in keys) { keys[e.key] = true; } }); window.addEventListener("keyup", (e) => { if (e.key in keys) { keys[e.key] = false; } }); // Uppdatera spelobjektens positioner function update() { // Rörelse upp/ner if (keys.ArrowUp || keys.w) player.y -= player.speed; if (keys.down || keys.ArrowDown || keys.s) player.y += player.speed; // Rörelse vänster/höger if (keys.ArrowLeft || keys.a) player.x -= player.speed; if (keys.ArrowRight || keys.d) player.x += player.speed; // Håll spelaren innanför skärmen (Collision med väggar) if (player.x - player.radius < 0) player.x = player.radius; if (player.x + player.radius > canvas.width) player.x = canvas.width - player.radius; if (player.y - player.radius < 0) player.y = player.radius; if (player.y + player.radius > canvas.height) player.y = canvas.height - player.radius; // Känner av om leprechaunen rör vid guldet (AABB / Cirkel-kollision) const dx = player.x - gold.x; const dy = player.y - gold.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < player.radius + gold.radius) { // Öka poäng score += 10; scoreElement.innerText = score; // Flytta guldet till en ny slumpmässig plats gold.x = Math.random() * (canvas.width - 40) + 20; gold.y = Math.random() * (canvas.height - 40) + 20; } } // Rita ut allt på skärmen function draw() { // Rensa skärmen inför nästa frame ctx.clearRect(0, 0, canvas.width, canvas.height); // 1. Rita guldet (med en liten glenseffekt) ctx.beginPath(); ctx.arc(gold.x, gold.y, gold.radius, 0, Math.PI * 2); ctx.fillStyle = gold.color; ctx.fill(); ctx.strokeStyle = "#d4ac0d"; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); // 2. Rita Leprechaunen (Kropp) ctx.beginPath(); ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2); ctx.fillStyle = player.color; ctx.fill(); ctx.closePath(); // 3. Rita en liten Leprechaun-hatt ovanpå kroppen ctx.fillStyle = "#1e8449"; // Mörkgrön hatt ctx.fillRect(player.x - 12, player.y - 22, 24, 8); // Brätte ctx.fillRect(player.x - 8, player.y - 34, 16, 12); // Kulle // Guldband på hatten ctx.fillStyle = "#f1c40f"; ctx.fillRect(player.x - 8, player.y - 26, 16, 4); } // Huvudloopen (Game Loop) function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } // Starta spelet! gameLoop(); }