Spaces:
Running
Running
File size: 5,646 Bytes
1094e96 d1cf091 1094e96 d1cf091 1094e96 d1cf091 1094e96 d1cf091 1094e96 d1cf091 1094e96 d1cf091 1094e96 |
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 147 |
<!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; }
#gameContainer { display: flex; justify-content: space-between; }
#sidebar { width: 250px; text-align: left; padding: 10px; }
canvas { background-color: #1e1e1e; cursor: pointer; }
#timer, #resources, #seedSelection, #scoreboard { 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="gameContainer">
<div id="sidebar">
<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>
<div id="scoreboard">Total Score: 0</div>
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
</div>
<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;
const offsetY = hexHeight * 0.75;
const rows = 10;
const cols = 10;
let hexGrid = [];
let timer = 300;
let selectedPlant = null;
let resources = { "🌿": 5, "🍁": 5, "🌺": 5, "🌾": 5, "🍊": 5 };
let totalScore = 0;
function generateHexGrid() {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
let x = col * offsetX + 150;
let y = row * hexHeight + (col % 2 ? offsetY : 0) + 50;
hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0, emojis: [] });
}
}
}
function selectPlant(plant) {
selectedPlant = plant;
}
function drawHex(hex) {
const { x, y, type, emojis } = hex;
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();
ctx.fillStyle = "white";
ctx.font = "20px Arial";
emojis.forEach((emoji, index) => {
let randX = x - 10 + (Math.random() * 20 - 10);
let randY = y + 5 + (Math.random() * 20 - 10);
ctx.fillText(emoji, randX, randY);
});
}
function getTerrainColor(type) {
return type === "empty" ? "#C2B280" : "#90EE90";
}
function evolveGrid() {
hexGrid.forEach(hex => {
if (hex.type !== "empty") {
hex.lifeStage++;
hex.score += hex.lifeStage * 5;
totalScore += hex.lifeStage * 5;
if (hex.lifeStage % 3 === 0) {
hex.emojis.push(hex.emojis[0]);
}
document.getElementById("scoreboard").innerText = `Total Score: ${totalScore}`;
}
});
}
function renderMap() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
hexGrid.forEach(hex => drawHex(hex));
}
function updateTimer() {
timer--;
document.getElementById("timer").innerText = `Time Left: ${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`;
if (timer % 10 === 0) {
evolveGrid();
}
renderMap();
if (timer <= 0) {
clearInterval(gameLoop);
alert("Game Over! Final Score: " + totalScore);
}
}
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;
hex.emojis.push(selectedPlant);
resources[selectedPlant]--;
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
}
}
});
renderMap();
});
generateHexGrid();
renderMap();
let gameLoop = setInterval(updateTimer, 1000);
</script>
</body>
</html>
|