Leprechaun Gold Rush

Guld: 0 kängor

Använd pilknapparna eller WASD för att samla guldet!

/* Ser till att allt centreras snyggt på skärmen */ body { background-color: #1a252f; /* Mörk mysig bakgrund */ color: #ffffff; font-family: 'Arial', 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: #2c3e50; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Spelets titel */ h1 { margin-top: 0; color: #f1c40f; /* Guldgul */ text-shadow: 2px 2px 0px #d35400; /* Orange skugga för retrokänsla */ font-size: 2.5rem; } /* Poängtavlan */ #ui { font-size: 1.2rem; margin-bottom: 15px; font-weight: bold; } #score { color: #f1c40f; font-size: 1.5rem; } /* Spelytan (Canvas) */ canvas { background-color: #27ae60; /* Gräsgrön */ border: 6px solid #1e8449; /* Mörkgrön ram */ border-radius: 10px; display: block; margin: 0 auto; box-shadow: inset 0 0 20px rgba(0,0,0,0.4); } /* Instruktionstexten längst ner */ .instructions { margin-top: 15px; font-size: 0.9rem; color: #bdc3c7; } // 1. Hämta canvas och verktyg för att rita (context) const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const scoreElement = document.getElementById("score"); // 2. Spelinställningar och poäng let score = 0; // 3. Spelaren (Leprechaun) const player = { x: 100, y: 200, radius: 14, speed: 4, color: "#2ecc71", // Grön kropp hasGold: false // Håller koll på om vi bär guld }; // 4. Målet (Regnbågen i mitten) const rainbow = { x: canvas.width / 2, y: canvas.height / 2, radius: 40 }; // 5. Guldmyntet (Slumpmässig startposition) const gold = { x: 0, y: 0, radius: 9, color: "#f1c40f" }; spawnGold(); // Placera ut första guldet // Funktion för att slumpa fram guldets position (undviker att det hamnar i regnbågen) function spawnGold() { do { gold.x = Math.random() * (canvas.width - 60) + 30; gold.y = Math.random() * (canvas.height - 60) + 30; } while (getDistance(gold.x, gold.y, rainbow.x, rainbow.y) < rainbow.radius + 20); } // Hjälpfunktion för att räkna ut avstånd mellan två punkter function getDistance(x1, y1, x2, y2) { const dx = x1 - x2; const dy = y1 - y2; return Math.sqrt(dx * dx + dy * dy); } // 6. Tangentbordskontroller const keys = {}; window.addEventListener("keydown", e => keys[e.key] = true); window.addEventListener("keyup", e => keys[e.key] = false); // 7. Uppdatera spelets logik (Rörelse och krockar) function update() { // Flytta spelaren (Pilbland eller WASD) if (keys["ArrowUp"] || keys["w"] || keys["W"]) player.y -= player.speed; if (keys["ArrowDown"] || keys["s"] || keys["S"]) player.y += player.speed; if (keys["ArrowLeft"] || keys["a"] || keys["A"]) player.x -= player.speed; if (keys["ArrowRight"] || keys["d"] || keys["D"]) player.x += player.speed; // Hindra spelaren från att springa utanför skärmen 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; // Kollision: Leprechaun rör vid guldet if (!player.hasGold) { let distToGold = getDistance(player.x, player.y, gold.x, gold.y); if (distToGold < player.radius + gold.radius) { player.hasGold = true; // Vi plockar upp guldet! } } // Kollision: Leprechaun lämnar guld vid regnbågen if (player.hasGold) { let distToRainbow = getDistance(player.x, player.y, rainbow.x, rainbow.y); if (distToRainbow < player.radius + rainbow.radius) { player.hasGold = false; score += 1; scoreElement.innerText = score; spawnGold(); // Skapa ett nytt guld på kartan } } } // 8. Rita ut allt på skärmen function draw() { // Rensa föregående bildruta ctx.clearRect(0, 0, canvas.width, canvas.height); // Rita Regnbågen (Målet i mitten) const colors = ["#ff4d4d", "#ff944d", "#ffff4d", "#4dff4d", "#4d94ff", "#944dff"]; colors.forEach((color, index) => { ctx.beginPath(); ctx.arc(rainbow.x, rainbow.y, rainbow.radius - (index * 4), Math.PI, 0, false); ctx.strokeStyle = color; ctx.lineWidth = 5; ctx.stroke(); ctx.closePath(); }); // Rita Guldmyntet (om spelaren inte har plockat upp det) if (!player.hasGold) { ctx.beginPath(); ctx.arc(gold.x, gold.y, gold.radius, 0, Math.PI * 2); ctx.fillStyle = gold.color; ctx.fill(); ctx.strokeStyle = "#e67e22"; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); } // Rita Leprechaun (Kropp) ctx.beginPath(); ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2); ctx.fillStyle = player.color; ctx.fill(); ctx.closePath(); // Rita Leprechaun (Hatt) // Om han bär på guld blir hatten guldglänsande, annars mörkgrön ctx.fillStyle = player.hasGold ? "#f1c40f" : "#1e8449"; ctx.fillRect(player.x - 12, player.y - 18, 24, 6); // Brätte ctx.fillRect(player.x - 8, player.y - 28, 16, 10); // Kulle // Hattband (Kontrasterande färg) ctx