Spaces:
Running
Running
File size: 3,122 Bytes
adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c c371d92 adff28c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!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>
|