Spaces:

awacke1
/

HexagonGame

Running

App Files Files Community

awacke1 commited on Feb 16

Commit

1094e96

verified ·

1 Parent(s): 65b3abb

Create index.html

Browse files

Files changed (1) hide show

index.html +139 -0

index.html ADDED Viewed

	@@ -0,0 +1,139 @@

+<!DOCTYPE html>
+<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, emoji: "" });
+                }
+            }
+        }
+        function selectPlant(plant) {
+            selectedPlant = plant;
+        }
+        function drawHex(hex) {
+            const { x, y, type, emoji } = 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";
+            ctx.fillText(emoji, x - 10, y + 5);
+        }
+        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;
+                    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 % 15 === 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.emoji = selectedPlant;
+                        resources[selectedPlant]--;
+                        document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
+                    }
+                }
+            });
+            renderMap();
+        });
+        generateHexGrid();
+        renderMap();
+        let gameLoop = setInterval(updateTimer, 1000);
+    </script>
+</body>
+</html>