Spaces:
Running
Running
Update index.html
Browse files- index.html +13 -19
index.html
CHANGED
|
@@ -7,13 +7,21 @@
|
|
| 7 |
<style>
|
| 8 |
body { text-align: center; background-color: #282c34; color: white; }
|
| 9 |
canvas { background-color: #1e1e1e; cursor: pointer; }
|
| 10 |
-
#timer, #resources { font-size: 20px; margin-top: 10px; }
|
|
|
|
| 11 |
</style>
|
| 12 |
</head>
|
| 13 |
<body>
|
| 14 |
<h1>🌱 Hexagon Evolution Game 🌿</h1>
|
| 15 |
<div id="timer">Time Left: 5:00</div>
|
| 16 |
<div id="resources">Seeds: 🌿5 🍁5 🌺5 🌾5 🍊5</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
<canvas id="gameCanvas" width="800" height="600"></canvas>
|
| 18 |
<script>
|
| 19 |
const canvas = document.getElementById("gameCanvas");
|
|
@@ -43,6 +51,10 @@
|
|
| 43 |
}
|
| 44 |
}
|
| 45 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 46 |
function drawHex(x, y, type) {
|
| 47 |
ctx.beginPath();
|
| 48 |
for (let i = 0; i < 6; i++) {
|
|
@@ -115,24 +127,6 @@
|
|
| 115 |
renderMap();
|
| 116 |
});
|
| 117 |
|
| 118 |
-
canvas.addEventListener("contextmenu", (event) => {
|
| 119 |
-
event.preventDefault();
|
| 120 |
-
const rect = canvas.getBoundingClientRect();
|
| 121 |
-
const mouseX = event.clientX - rect.left;
|
| 122 |
-
const mouseY = event.clientY - rect.top;
|
| 123 |
-
|
| 124 |
-
hexGrid.forEach(hex => {
|
| 125 |
-
if (Math.hypot(hex.x - mouseX, hex.y - mouseY) < hexSize && hex.lifeStage > 1) {
|
| 126 |
-
score += hex.score;
|
| 127 |
-
hex.type = "empty";
|
| 128 |
-
hex.lifeStage = 0;
|
| 129 |
-
hex.score = 0;
|
| 130 |
-
updateResources();
|
| 131 |
-
}
|
| 132 |
-
});
|
| 133 |
-
renderMap();
|
| 134 |
-
});
|
| 135 |
-
|
| 136 |
function updateResources() {
|
| 137 |
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
|
| 138 |
}
|
|
|
|
| 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="timer">Time Left: 5:00</div>
|
| 17 |
<div id="resources">Seeds: 🌿5 🍁5 🌺5 🌾5 🍊5</div>
|
| 18 |
+
<div id="seedSelection">
|
| 19 |
+
<button onclick="selectPlant('🌿')">🌿</button>
|
| 20 |
+
<button onclick="selectPlant('🍁')">🍁</button>
|
| 21 |
+
<button onclick="selectPlant('🌺')">🌺</button>
|
| 22 |
+
<button onclick="selectPlant('🌾')">🌾</button>
|
| 23 |
+
<button onclick="selectPlant('🍊')">🍊</button>
|
| 24 |
+
</div>
|
| 25 |
<canvas id="gameCanvas" width="800" height="600"></canvas>
|
| 26 |
<script>
|
| 27 |
const canvas = document.getElementById("gameCanvas");
|
|
|
|
| 51 |
}
|
| 52 |
}
|
| 53 |
|
| 54 |
+
function selectPlant(plant) {
|
| 55 |
+
selectedPlant = plant;
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
function drawHex(x, y, type) {
|
| 59 |
ctx.beginPath();
|
| 60 |
for (let i = 0; i < 6; i++) {
|
|
|
|
| 127 |
renderMap();
|
| 128 |
});
|
| 129 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 130 |
function updateResources() {
|
| 131 |
document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
|
| 132 |
}
|