Spaces:
Running
Running
Update index.html
Browse files- index.html +38 -38
index.html
CHANGED
|
@@ -6,23 +6,30 @@
|
|
| 6 |
<title>Hexagon Evolution Game</title>
|
| 7 |
<style>
|
| 8 |
body { text-align: center; background-color: #282c34; color: white; }
|
|
|
|
|
|
|
| 9 |
canvas { background-color: #1e1e1e; cursor: pointer; }
|
| 10 |
-
#timer, #resources, #seedSelection { font-size: 20px; margin-top: 10px; }
|
| 11 |
button { margin: 5px; padding: 10px; font-size: 16px; cursor: pointer; }
|
| 12 |
</style>
|
| 13 |
</head>
|
| 14 |
<body>
|
| 15 |
<h1>🌱 Hexagon Evolution Game 🌿</h1>
|
| 16 |
-
<div id="
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
</div>
|
| 25 |
-
<canvas id="gameCanvas" width="800" height="600"></canvas>
|
| 26 |
<script>
|
| 27 |
const canvas = document.getElementById("gameCanvas");
|
| 28 |
const ctx = canvas.getContext("2d");
|
|
@@ -30,23 +37,22 @@
|
|
| 30 |
const hexSize = 40;
|
| 31 |
const hexWidth = Math.sqrt(3) * hexSize;
|
| 32 |
const hexHeight = 2 * hexSize;
|
| 33 |
-
const offsetX = hexWidth
|
| 34 |
-
const offsetY = hexHeight * 0.
|
| 35 |
const rows = 10;
|
| 36 |
const cols = 10;
|
| 37 |
-
|
| 38 |
let hexGrid = [];
|
| 39 |
-
let timer = 300;
|
| 40 |
let selectedPlant = null;
|
| 41 |
let resources = { "🌿": 5, "🍁": 5, "🌺": 5, "🌾": 5, "🍊": 5 };
|
| 42 |
-
let
|
| 43 |
|
| 44 |
function generateHexGrid() {
|
| 45 |
for (let row = 0; row < rows; row++) {
|
| 46 |
for (let col = 0; col < cols; col++) {
|
| 47 |
-
let x = col * offsetX;
|
| 48 |
-
let y = row * hexHeight + (col % 2 ? offsetY : 0);
|
| 49 |
-
hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0 });
|
| 50 |
}
|
| 51 |
}
|
| 52 |
}
|
|
@@ -55,7 +61,8 @@
|
|
| 55 |
selectedPlant = plant;
|
| 56 |
}
|
| 57 |
|
| 58 |
-
function drawHex(
|
|
|
|
| 59 |
ctx.beginPath();
|
| 60 |
for (let i = 0; i < 6; i++) {
|
| 61 |
let angle = (Math.PI / 3) * i;
|
|
@@ -67,33 +74,29 @@
|
|
| 67 |
ctx.fillStyle = getTerrainColor(type);
|
| 68 |
ctx.fill();
|
| 69 |
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
| 70 |
}
|
| 71 |
|
| 72 |
function getTerrainColor(type) {
|
| 73 |
-
|
| 74 |
-
case "empty": return "#C2B280";
|
| 75 |
-
case "seed": return "#FFD700";
|
| 76 |
-
case "stem": return "#8B4513";
|
| 77 |
-
case "leaf": return "#228B22";
|
| 78 |
-
case "bud": return "#FF69B4";
|
| 79 |
-
case "flower": return "#FFA500";
|
| 80 |
-
default: return "#FFFFFF";
|
| 81 |
-
}
|
| 82 |
}
|
| 83 |
|
| 84 |
function evolveGrid() {
|
| 85 |
hexGrid.forEach(hex => {
|
| 86 |
-
if (hex.type !== "empty"
|
| 87 |
hex.lifeStage++;
|
| 88 |
-
hex.
|
| 89 |
-
|
|
|
|
| 90 |
}
|
| 91 |
});
|
| 92 |
}
|
| 93 |
|
| 94 |
function renderMap() {
|
| 95 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 96 |
-
hexGrid.forEach(hex => drawHex(hex
|
| 97 |
}
|
| 98 |
|
| 99 |
function updateTimer() {
|
|
@@ -105,7 +108,7 @@
|
|
| 105 |
renderMap();
|
| 106 |
if (timer <= 0) {
|
| 107 |
clearInterval(gameLoop);
|
| 108 |
-
alert("Game Over! Final Score: " +
|
| 109 |
}
|
| 110 |
}
|
| 111 |
|
|
@@ -119,18 +122,15 @@
|
|
| 119 |
if (selectedPlant && resources[selectedPlant] > 0 && hex.type === "empty") {
|
| 120 |
hex.type = "seed";
|
| 121 |
hex.lifeStage = 1;
|
|
|
|
| 122 |
resources[selectedPlant]--;
|
| 123 |
-
|
| 124 |
}
|
| 125 |
}
|
| 126 |
});
|
| 127 |
renderMap();
|
| 128 |
});
|
| 129 |
|
| 130 |
-
function updateResources() {
|
| 131 |
-
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
|
| 132 |
-
}
|
| 133 |
-
|
| 134 |
generateHexGrid();
|
| 135 |
renderMap();
|
| 136 |
let gameLoop = setInterval(updateTimer, 1000);
|
|
|
|
| 6 |
<title>Hexagon Evolution Game</title>
|
| 7 |
<style>
|
| 8 |
body { text-align: center; background-color: #282c34; color: white; }
|
| 9 |
+
#gameContainer { display: flex; justify-content: space-between; }
|
| 10 |
+
#sidebar { width: 250px; text-align: left; padding: 10px; }
|
| 11 |
canvas { background-color: #1e1e1e; cursor: pointer; }
|
| 12 |
+
#timer, #resources, #seedSelection, #scoreboard { font-size: 20px; margin-top: 10px; }
|
| 13 |
button { margin: 5px; padding: 10px; font-size: 16px; cursor: pointer; }
|
| 14 |
</style>
|
| 15 |
</head>
|
| 16 |
<body>
|
| 17 |
<h1>🌱 Hexagon Evolution Game 🌿</h1>
|
| 18 |
+
<div id="gameContainer">
|
| 19 |
+
<div id="sidebar">
|
| 20 |
+
<div id="timer">Time Left: 5:00</div>
|
| 21 |
+
<div id="resources">Seeds: 🌿5 🍁5 🌺5 🌾5 🍊5</div>
|
| 22 |
+
<div id="seedSelection">
|
| 23 |
+
<button onclick="selectPlant('🌿')">🌿</button>
|
| 24 |
+
<button onclick="selectPlant('🍁')">🍁</button>
|
| 25 |
+
<button onclick="selectPlant('🌺')">🌺</button>
|
| 26 |
+
<button onclick="selectPlant('🌾')">🌾</button>
|
| 27 |
+
<button onclick="selectPlant('🍊')">🍊</button>
|
| 28 |
+
</div>
|
| 29 |
+
<div id="scoreboard">Total Score: 0</div>
|
| 30 |
+
</div>
|
| 31 |
+
<canvas id="gameCanvas" width="800" height="600"></canvas>
|
| 32 |
</div>
|
|
|
|
| 33 |
<script>
|
| 34 |
const canvas = document.getElementById("gameCanvas");
|
| 35 |
const ctx = canvas.getContext("2d");
|
|
|
|
| 37 |
const hexSize = 40;
|
| 38 |
const hexWidth = Math.sqrt(3) * hexSize;
|
| 39 |
const hexHeight = 2 * hexSize;
|
| 40 |
+
const offsetX = hexWidth;
|
| 41 |
+
const offsetY = hexHeight * 0.75;
|
| 42 |
const rows = 10;
|
| 43 |
const cols = 10;
|
|
|
|
| 44 |
let hexGrid = [];
|
| 45 |
+
let timer = 300;
|
| 46 |
let selectedPlant = null;
|
| 47 |
let resources = { "🌿": 5, "🍁": 5, "🌺": 5, "🌾": 5, "🍊": 5 };
|
| 48 |
+
let totalScore = 0;
|
| 49 |
|
| 50 |
function generateHexGrid() {
|
| 51 |
for (let row = 0; row < rows; row++) {
|
| 52 |
for (let col = 0; col < cols; col++) {
|
| 53 |
+
let x = col * offsetX + 150;
|
| 54 |
+
let y = row * hexHeight + (col % 2 ? offsetY : 0) + 50;
|
| 55 |
+
hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0, emoji: "" });
|
| 56 |
}
|
| 57 |
}
|
| 58 |
}
|
|
|
|
| 61 |
selectedPlant = plant;
|
| 62 |
}
|
| 63 |
|
| 64 |
+
function drawHex(hex) {
|
| 65 |
+
const { x, y, type, emoji } = hex;
|
| 66 |
ctx.beginPath();
|
| 67 |
for (let i = 0; i < 6; i++) {
|
| 68 |
let angle = (Math.PI / 3) * i;
|
|
|
|
| 74 |
ctx.fillStyle = getTerrainColor(type);
|
| 75 |
ctx.fill();
|
| 76 |
ctx.stroke();
|
| 77 |
+
ctx.fillStyle = "white";
|
| 78 |
+
ctx.font = "20px Arial";
|
| 79 |
+
ctx.fillText(emoji, x - 10, y + 5);
|
| 80 |
}
|
| 81 |
|
| 82 |
function getTerrainColor(type) {
|
| 83 |
+
return type === "empty" ? "#C2B280" : "#90EE90";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 84 |
}
|
| 85 |
|
| 86 |
function evolveGrid() {
|
| 87 |
hexGrid.forEach(hex => {
|
| 88 |
+
if (hex.type !== "empty") {
|
| 89 |
hex.lifeStage++;
|
| 90 |
+
hex.score += hex.lifeStage * 5;
|
| 91 |
+
totalScore += hex.lifeStage * 5;
|
| 92 |
+
document.getElementById("scoreboard").innerText = `Total Score: ${totalScore}`;
|
| 93 |
}
|
| 94 |
});
|
| 95 |
}
|
| 96 |
|
| 97 |
function renderMap() {
|
| 98 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 99 |
+
hexGrid.forEach(hex => drawHex(hex));
|
| 100 |
}
|
| 101 |
|
| 102 |
function updateTimer() {
|
|
|
|
| 108 |
renderMap();
|
| 109 |
if (timer <= 0) {
|
| 110 |
clearInterval(gameLoop);
|
| 111 |
+
alert("Game Over! Final Score: " + totalScore);
|
| 112 |
}
|
| 113 |
}
|
| 114 |
|
|
|
|
| 122 |
if (selectedPlant && resources[selectedPlant] > 0 && hex.type === "empty") {
|
| 123 |
hex.type = "seed";
|
| 124 |
hex.lifeStage = 1;
|
| 125 |
+
hex.emoji = selectedPlant;
|
| 126 |
resources[selectedPlant]--;
|
| 127 |
+
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
|
| 128 |
}
|
| 129 |
}
|
| 130 |
});
|
| 131 |
renderMap();
|
| 132 |
});
|
| 133 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 134 |
generateHexGrid();
|
| 135 |
renderMap();
|
| 136 |
let gameLoop = setInterval(updateTimer, 1000);
|