Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hexagon Evolution Game</title> | |
| <style> | |
| body { text-align: center; background-color: #282c34; color: white; } | |
| #gameContainer { display: flex; justify-content: space-between; } | |
| #sidebar { width: 250px; text-align: left; padding: 10px; } | |
| canvas { background-color: #1e1e1e; cursor: pointer; } | |
| #timer, #resources, #seedSelection, #scoreboard { font-size: 20px; margin-top: 10px; } | |
| button { margin: 5px; padding: 10px; font-size: 16px; cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🌱 Hexagon Evolution Game 🌿</h1> | |
| <div id="gameContainer"> | |
| <div id="sidebar"> | |
| <div id="timer">Time Left: 5:00</div> | |
| <div id="resources">Seeds: 🌿5 🍁5 🌺5 🌾5 🍊5</div> | |
| <div id="seedSelection"> | |
| <button onclick="selectPlant('🌿')">🌿</button> | |
| <button onclick="selectPlant('🍁')">🍁</button> | |
| <button onclick="selectPlant('🌺')">🌺</button> | |
| <button onclick="selectPlant('🌾')">🌾</button> | |
| <button onclick="selectPlant('🍊')">🍊</button> | |
| </div> | |
| <div id="scoreboard">Total Score: 0</div> | |
| </div> | |
| <canvas id="gameCanvas" width="800" height="600"></canvas> | |
| </div> | |
| <script> | |
| const canvas = document.getElementById("gameCanvas"); | |
| const ctx = canvas.getContext("2d"); | |
| const hexSize = 40; | |
| const hexWidth = Math.sqrt(3) * hexSize; | |
| const hexHeight = 2 * hexSize; | |
| const offsetX = hexWidth; | |
| const offsetY = hexHeight * 0.75; | |
| const rows = 10; | |
| const cols = 10; | |
| let hexGrid = []; | |
| let timer = 300; | |
| let selectedPlant = null; | |
| let resources = { "🌿": 5, "🍁": 5, "🌺": 5, "🌾": 5, "🍊": 5 }; | |
| let totalScore = 0; | |
| function generateHexGrid() { | |
| for (let row = 0; row < rows; row++) { | |
| for (let col = 0; col < cols; col++) { | |
| let x = col * offsetX + 150; | |
| let y = row * hexHeight + (col % 2 ? offsetY : 0) + 50; | |
| hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0, emojis: [] }); | |
| } | |
| } | |
| } | |
| function selectPlant(plant) { | |
| selectedPlant = plant; | |
| } | |
| function drawHex(hex) { | |
| const { x, y, type, emojis } = hex; | |
| ctx.beginPath(); | |
| for (let i = 0; i < 6; i++) { | |
| let angle = (Math.PI / 3) * i; | |
| let px = x + hexSize * Math.cos(angle); | |
| let py = y + hexSize * Math.sin(angle); | |
| ctx.lineTo(px, py); | |
| } | |
| ctx.closePath(); | |
| ctx.fillStyle = getTerrainColor(type); | |
| ctx.fill(); | |
| ctx.stroke(); | |
| ctx.fillStyle = "white"; | |
| ctx.font = "20px Arial"; | |
| emojis.forEach((emoji, index) => { | |
| let randX = x - 10 + (Math.random() * 20 - 10); | |
| let randY = y + 5 + (Math.random() * 20 - 10); | |
| ctx.fillText(emoji, randX, randY); | |
| }); | |
| } | |
| function getTerrainColor(type) { | |
| return type === "empty" ? "#C2B280" : "#90EE90"; | |
| } | |
| function evolveGrid() { | |
| hexGrid.forEach(hex => { | |
| if (hex.type !== "empty") { | |
| hex.lifeStage++; | |
| hex.score += hex.lifeStage * 5; | |
| totalScore += hex.lifeStage * 5; | |
| if (hex.lifeStage % 3 === 0) { | |
| hex.emojis.push(hex.emojis[0]); | |
| } | |
| document.getElementById("scoreboard").innerText = `Total Score: ${totalScore}`; | |
| } | |
| }); | |
| } | |
| function renderMap() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| hexGrid.forEach(hex => drawHex(hex)); | |
| } | |
| function updateTimer() { | |
| timer--; | |
| document.getElementById("timer").innerText = `Time Left: ${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`; | |
| if (timer % 10 === 0) { | |
| evolveGrid(); | |
| } | |
| renderMap(); | |
| if (timer <= 0) { | |
| clearInterval(gameLoop); | |
| alert("Game Over! Final Score: " + totalScore); | |
| } | |
| } | |
| canvas.addEventListener("click", (event) => { | |
| const rect = canvas.getBoundingClientRect(); | |
| const mouseX = event.clientX - rect.left; | |
| const mouseY = event.clientY - rect.top; | |
| hexGrid.forEach(hex => { | |
| if (Math.hypot(hex.x - mouseX, hex.y - mouseY) < hexSize) { | |
| if (selectedPlant && resources[selectedPlant] > 0 && hex.type === "empty") { | |
| hex.type = "seed"; | |
| hex.lifeStage = 1; | |
| hex.emojis.push(selectedPlant); | |
| resources[selectedPlant]--; | |
| document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`; | |
| } | |
| } | |
| }); | |
| renderMap(); | |
| }); | |
| generateHexGrid(); | |
| renderMap(); | |
| let gameLoop = setInterval(updateTimer, 1000); | |
| </script> | |
| </body> | |
| </html> | |