Spaces:
Running
Running
| <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> | |