Spaces:
Running
Running
File size: 5,127 Bytes
210fc5e 0ab1e8b 210fc5e 0ab1e8b 210fc5e 0ab1e8b 210fc5e |
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!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; }
canvas { background-color: #1e1e1e; cursor: pointer; }
#timer, #resources, #seedSelection { 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="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>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<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 * 0.75;
const offsetY = hexHeight * 0.5;
const rows = 10;
const cols = 10;
let hexGrid = [];
let timer = 300; // 5 minutes
let selectedPlant = null;
let resources = { "🌿": 5, "🍁": 5, "🌺": 5, "🌾": 5, "🍊": 5 };
let score = 0;
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: "empty", lifeStage: 0, score: 0 });
}
}
}
function selectPlant(plant) {
selectedPlant = plant;
}
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 getTerrainColor(type) {
switch (type) {
case "empty": return "#C2B280";
case "seed": return "#FFD700";
case "stem": return "#8B4513";
case "leaf": return "#228B22";
case "bud": return "#FF69B4";
case "flower": return "#FFA500";
default: return "#FFFFFF";
}
}
function evolveGrid() {
hexGrid.forEach(hex => {
if (hex.type !== "empty" && Math.random() < 0.1 && hex.lifeStage < 5) {
hex.lifeStage++;
hex.type = ["empty", "seed", "stem", "leaf", "bud", "flower"][hex.lifeStage];
hex.score += hex.lifeStage * 2;
}
});
}
function renderMap() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
hexGrid.forEach(hex => drawHex(hex.x, hex.y, hex.type));
}
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: " + score);
}
}
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;
resources[selectedPlant]--;
updateResources();
}
}
});
renderMap();
});
function updateResources() {
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
}
generateHexGrid();
renderMap();
let gameLoop = setInterval(updateTimer, 1000);
</script>
</body>
</html>
|