Spaces:
Running
Running
File size: 5,278 Bytes
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 141 142 143 144 145 146 |
<!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 { font-size: 20px; margin-top: 10px; }
</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>
<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 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();
});
canvas.addEventListener("contextmenu", (event) => {
event.preventDefault();
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 && hex.lifeStage > 1) {
score += hex.score;
hex.type = "empty";
hex.lifeStage = 0;
hex.score = 0;
updateResources();
}
});
renderMap();
});
function updateResources() {
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
}
generateHexGrid();
renderMap();
let gameLoop = setInterval(updateTimer, 1000);
</script>
</body>
</html>
|