Spaces:

awacke1
/

HexagonGame

Running

App Files Files Community

awacke1 commited on Feb 16

Commit

adff28c

verified ·

1 Parent(s): c371d92

Update index.html

Browse files

Files changed (1) hide show

index.html +74 -56

index.html CHANGED Viewed

@@ -1,67 +1,85 @@
-const canvas = document.getElementById("gameCanvas");
-const ctx = canvas.getContext("2d");
-// Hexagon properties
-const hexSize = 50; // Size of each hexagon
-const hexWidth = Math.sqrt(3) * hexSize;
-const hexHeight = 2 * hexSize;
-const offsetX = hexWidth * 0.75;
-const offsetY = hexHeight * 0.5;
-const rows = 10;
-const cols = 10;
-// Hex map storage
-let hexGrid = [];
-// Function to generate a hexagonal grid
-function generateHexGrid() {
-    for (let row = 0; row < rows; row++) {
-        for (let col = 0; col < cols; col++) {
-            let x = col * offsetX;
-            let y = row * hexHeight + (col % 2 ? offsetY : 0);
-            hexGrid.push({ x, y, type: getRandomTerrain() });
         }
-    }
-}
-// Function to draw hexagons
-function drawHex(x, y, type) {
-    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();
-}
-// Function to assign random terrain types
-function getRandomTerrain() {
-    const terrains = ["water", "plains", "forest", "mountain"];
-    return terrains[Math.floor(Math.random() * terrains.length)];
-}
-// Function to get terrain color
-function getTerrainColor(type) {
-    switch (type) {
-        case "water": return "#3A80BA";
-        case "plains": return "#C2B280";
-        case "forest": return "#228B22";
-        case "mountain": return "#A9A9A9";
-        default: return "#FFFFFF";
-    }
-}
-// Function to render the map
-function renderMap() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    hexGrid.forEach(hex => drawHex(hex.x, hex.y, hex.type));
-}
-// Initialize and draw map
 generateHexGrid();
 renderMap();

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hexagon Game</title>
+    <style>
+        body { text-align: center; background-color: #282c34; color: white; }
+        canvas { background-color: #1e1e1e; }
+    </style>
+</head>
+<body>
+    <h1>🛡️ Hexagon Strategy Game 🎲</h1>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <script>
+        const canvas = document.getElementById("gameCanvas");
+        const ctx = canvas.getContext("2d");
+        // 🛠️ Hexagon properties (Hexagons are like pizzas, but with 6 slices!)
+        const hexSize = 40;
+        const hexWidth = Math.sqrt(3) * hexSize;
+        const hexHeight = 2 * hexSize;
+        const offsetX = hexWidth * 0.75;
+        const offsetY = hexHeight * 0.5;
+        const rows = 10;
+        const cols = 10;
+        // 🌍 Hex map storage (Storing our mighty kingdom!)
+        let hexGrid = [];
+        // 🎲 Function to generate a hexagonal grid
+        function generateHexGrid() {
+            for (let row = 0; row < rows; row++) {
+                for (let col = 0; col < cols; col++) {
+                    let x = col * offsetX;
+                    let y = row * hexHeight + (col % 2 ? offsetY : 0);
+                    hexGrid.push({ x, y, type: getRandomTerrain() });
+                }
+            }
         }
+        // 🔷 Function to draw hexagons (Like drawing fancy stop signs)
+        function drawHex(x, y, type) {
+            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();
+        }
+        // 🎭 Function to assign random terrain types (Nature is random, so is this!)
+        function getRandomTerrain() {
+            const terrains = ["water", "plains", "forest", "mountain"];
+            return terrains[Math.floor(Math.random() * terrains.length)];
+        }
+        // 🎨 Function to get terrain color (Paint the world!)
+        function getTerrainColor(type) {
+            switch (type) {
+                case "water": return "#3A80BA"; // 💦 Blue for water
+                case "plains": return "#C2B280"; // 🌾 Golden for plains
+                case "forest": return "#228B22"; // 🌲 Green for forests
+                case "mountain": return "#A9A9A9"; // ⛰️ Gray for mountains
+                default: return "#FFFFFF"; // ❓ If all else fails, white!
+            }
+        }
+        // 🖌️ Function to render the map (A masterpiece in the making!)
+        function renderMap() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            hexGrid.forEach(hex => drawHex(hex.x, hex.y, hex.type));
+        }
+        // 🚀 Initialize and draw map
 generateHexGrid();
 renderMap();
+    </script>
+</body>
+</html>