Hugging Face's logo

Spaces:
awacke1
/
HexagonGame
Running

App Files Community
awacke1 commited on
Commit
9ddeb1a
·
verified ·
1 Parent(s): 9d551a5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +47 -38
index.html CHANGED
@@ -3,45 +3,47 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Hexagon Ecosystem Game</title>
7
  <style>
8
- body { text-align: center; background-color: #282c34; color: white; font-family: Arial; }
9
- #gameContainer { display: flex; justify-content: space-between; }
10
- #sidebar { width: 300px; text-align: left; padding: 10px; }
11
- canvas { background-color: #1e1e1e; cursor: pointer; }
12
- #timer, #counts, #selection { font-size: 18px; margin-top: 10px; }
13
- button { margin: 3px; padding: 8px; font-size: 14px; cursor: pointer; }
14
- .category { margin-top: 15px; }
15
  </style>
16
  </head>
17
  <body>
18
- <h1>🌱 Hexagon Ecosystem Game 🐝</h1>
19
  <div id="gameContainer">
20
  <div id="sidebar">
21
  <div id="timer">Time Left: 5:00</div>
22
  <div id="counts">Counts: Loading...</div>
23
  <div id="selection">
24
- <div class="category"><strong>Plants</strong></div>
25
  <div id="plantSelection"></div>
26
- <div class="category"><strong>Insects</strong></div>
27
  <div id="insectSelection"></div>
28
- <div class="category"><strong>Animals</strong></div>
29
  <div id="animalSelection"></div>
30
  </div>
31
  </div>
32
- <canvas id="gameCanvas" width="800" height="600"></canvas>
33
  </div>
34
  <script>
35
  const canvas = document.getElementById("gameCanvas");
36
  const ctx = canvas.getContext("2d");
37
 
38
- const hexSize = 40;
 
 
 
39
  const hexWidth = Math.sqrt(3) * hexSize;
40
  const hexHeight = 2 * hexSize;
41
  const offsetX = hexWidth;
42
  const offsetY = hexHeight * 0.75;
43
- const rows = 10;
44
- const cols = 10;
45
  let hexGrid = [];
46
  let timer = 300;
47
  let selectedEntity = null;
@@ -53,7 +55,7 @@
53
  };
54
  let resources = {};
55
  let counts = {};
56
- let animalPairs = new Map(); // Tracks paired animals
57
 
58
  function initializeEntities() {
59
  Object.keys(entities).forEach(category => {
@@ -65,13 +67,14 @@
65
  }
66
 
67
  function generateHexGrid() {
 
68
  for (let row = 0; row < rows; row++) {
69
  for (let col = 0; col < cols; col++) {
70
- let x = col * offsetX + 150;
71
- let y = row * hexHeight + (col % 2 ? offsetY : 0) + 50;
72
  hexGrid.push({ x, y, type: "empty", entities: [], nourishment: 0 });
73
  }
74
- });
75
  }
76
 
77
  function selectEntity(entity) {
@@ -85,17 +88,17 @@
85
  let angle = (Math.PI / 3) * i;
86
  let px = x + hexSize * Math.cos(angle);
87
  let py = y + hexSize * Math.sin(angle);
88
- ctx.lineTo(px, py);
89
  }
90
  ctx.closePath();
91
  ctx.fillStyle = type === "empty" ? "#C2B280" : "#90EE90";
92
  ctx.fill();
93
  ctx.stroke();
94
  ctx.fillStyle = "white";
95
- ctx.font = "20px Arial";
96
  entities.forEach((entity, index) => {
97
- let randX = x - 10 + (Math.random() * 20 - 10);
98
- let randY = y + 5 + (Math.random() * 20 - 10);
99
  ctx.fillText(entity, randX, randY);
100
  });
101
  }
@@ -159,11 +162,11 @@
159
  }
160
 
161
  function pollinate() {
162
- hexGrid.forEach((hex, index) => {
163
  if (hex.entities.some(e => entities.insects.includes(e))) {
164
  hex.entities.forEach(entity => {
165
  if (entities.plants.includes(entity) && Math.random() < 0.2) {
166
- hex.entities.push(entity); // Spawn plant baby in same hex
167
  counts[entity]++;
168
  }
169
  });
@@ -180,7 +183,7 @@
180
  const hasPlants = hex.entities.some(e => entities.plants.includes(e));
181
  const hasInsects = hex.entities.some(e => entities.insects.includes(e));
182
 
183
- // Eat plants or insects for nourishment
184
  if (hasPlants && Math.random() < 0.3) {
185
  const plantIdx = hex.entities.findIndex(e => entities.plants.includes(e));
186
  hex.entities.splice(plantIdx, 1);
@@ -193,18 +196,18 @@
193
  counts[hex.entities[insectIdx]]--;
194
  }
195
 
196
- // Pair bonding and reproduction
197
  const mateCount = hex.entities.filter(e => e === entity).length;
198
  if (mateCount >= 2 && nourishment >= 2 && Math.random() < 0.1) {
199
- hex.entities.push(entity); // Spawn baby in same hex
200
  counts[entity]++;
201
- nourishment -= 2; // Cost of reproduction
202
  if (!animalPairs.has(entity + index)) {
203
- animalPairs.set(entity + index, true); // Mark as paired
204
  }
205
  }
206
 
207
- // Movement logic
208
  const neighbors = getNeighbors(index);
209
  let goalIdx = neighbors.find(n => hexGrid[n].entities.some(e => entities.plants.includes(e)));
210
  if (!goalIdx) goalIdx = neighbors.find(n => hexGrid[n].entities.some(e => entities.insects.includes(e)));
@@ -214,7 +217,6 @@
214
  if (path.length > 1) {
215
  animalsToMove.push({ entity, fromIdx: index, toIdx: path[1], nourishment });
216
  if (animalPairs.has(entity + index)) {
217
- // Move pair together
218
  const pairIdx = hex.entities.indexOf(entity, i + 1);
219
  if (pairIdx !== -1) {
220
  animalsToMove.push({ entity, fromIdx: index, toIdx: path[1], nourishment });
@@ -224,7 +226,6 @@
224
  }
225
  });
226
 
227
- // Process animal movement
228
  animalsToMove.forEach(move => {
229
  const fromHex = hexGrid[move.fromIdx];
230
  const toHex = hexGrid[move.toIdx];
@@ -233,6 +234,7 @@
233
  fromHex.entities.splice(entityIdx, 1);
234
  toHex.entities.push(move.entity);
235
  toHex.nourishment += move.nourishment;
 
236
  if (fromHex.entities.length === 0) fromHex.type = "empty";
237
  toHex.type = "occupied";
238
  if (animalPairs.has(move.entity + move.fromIdx)) {
@@ -249,7 +251,7 @@
249
  hexGrid.forEach(hex => drawHex(hex));
250
  }
251
 
252
- function updateTimer() {
253
  timer--;
254
  document.getElementById("timer").innerText = `Time Left: ${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`;
255
  if (timer % 5 === 0) {
@@ -267,7 +269,7 @@
267
  function updateCounts() {
268
  let countText = "Counts: ";
269
  Object.keys(counts).forEach(entity => {
270
- countText += `${entity}: ${counts[entity]} `;
271
  });
272
  document.getElementById("counts").innerText = countText;
273
  }
@@ -289,7 +291,7 @@
289
  const rect = canvas.getBoundingClientRect();
290
  const mouseX = event.clientX - rect.left;
291
  const mouseY = event.clientY - rect.top;
292
-
293
  hexGrid.forEach(hex => {
294
  if (Math.hypot(hex.x - mouseX, hex.y - mouseY) < hexSize) {
295
  if (selectedEntity && resources[selectedEntity] > 0 && hex.type === "empty") {
@@ -304,11 +306,18 @@
304
  renderMap();
305
  });
306
 
 
 
 
 
 
 
 
307
  initializeEntities();
308
  generateHexGrid();
309
  populateSidebar();
310
  renderMap();
311
- let gameLoop = setInterval(updateTimer, 1000);
312
  </script>
313
  </body>
314
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hexagon Ecosystem Evolution</title>
7
  <style>
8
+ body { margin: 0; background-color: #282c34; color: white; font-family: Arial; overflow: hidden; }
9
+ #gameContainer { display: flex; height: 100vh; }
10
+ #sidebar { width: 300px; padding: 10px; text-align: left; background-color: #1e1e1e; overflow-y: auto; }
11
+ canvas { flex-grow: 1; background-color: #1e1e1e; cursor: pointer; height: 100%; }
12
+ #timer, #counts, #selection { font-size: 18px; margin: 10px 0; }
13
+ button { margin: 3px; padding: 8px; font-size: 14px; cursor: pointer; width: 50px; }
14
+ .category { margin-top: 15px; font-weight: bold; }
15
  </style>
16
  </head>
17
  <body>
 
18
  <div id="gameContainer">
19
  <div id="sidebar">
20
  <div id="timer">Time Left: 5:00</div>
21
  <div id="counts">Counts: Loading...</div>
22
  <div id="selection">
23
+ <div class="category">Plants</div>
24
  <div id="plantSelection"></div>
25
+ <div class="category">Insects</div>
26
  <div id="insectSelection"></div>
27
+ <div class="category">Animals</div>
28
  <div id="animalSelection"></div>
29
  </div>
30
  </div>
31
+ <canvas id="gameCanvas"></canvas>
32
  </div>
33
  <script>
34
  const canvas = document.getElementById("gameCanvas");
35
  const ctx = canvas.getContext("2d");
36
 
37
+ canvas.width = window.innerWidth - 300; // Full width minus sidebar
38
+ canvas.height = window.innerHeight; // Full height
39
+
40
+ const hexSize = 30;
41
  const hexWidth = Math.sqrt(3) * hexSize;
42
  const hexHeight = 2 * hexSize;
43
  const offsetX = hexWidth;
44
  const offsetY = hexHeight * 0.75;
45
+ const rows = Math.ceil(canvas.height / offsetY) + 1;
46
+ const cols = Math.ceil(canvas.width / offsetX) + 1;
47
  let hexGrid = [];
48
  let timer = 300;
49
  let selectedEntity = null;
 
55
  };
56
  let resources = {};
57
  let counts = {};
58
+ let animalPairs = new Map();
59
 
60
  function initializeEntities() {
61
  Object.keys(entities).forEach(category => {
 
67
  }
68
 
69
  function generateHexGrid() {
70
+ hexGrid = [];
71
  for (let row = 0; row < rows; row++) {
72
  for (let col = 0; col < cols; col++) {
73
+ let x = col * offsetX;
74
+ let y = row * offsetY + (col % 2 ? offsetY / 2 : 0);
75
  hexGrid.push({ x, y, type: "empty", entities: [], nourishment: 0 });
76
  }
77
+ }
78
  }
79
 
80
  function selectEntity(entity) {
 
88
  let angle = (Math.PI / 3) * i;
89
  let px = x + hexSize * Math.cos(angle);
90
  let py = y + hexSize * Math.sin(angle);
91
+ ctx[i === 0 ? "moveTo" : "lineTo"](px, py);
92
  }
93
  ctx.closePath();
94
  ctx.fillStyle = type === "empty" ? "#C2B280" : "#90EE90";
95
  ctx.fill();
96
  ctx.stroke();
97
  ctx.fillStyle = "white";
98
+ ctx.font = "18px Arial";
99
  entities.forEach((entity, index) => {
100
+ let randX = x - 8 + (Math.random() * 16 - 8);
101
+ let randY = y + 4 + (Math.random() * 16 - 8);
102
  ctx.fillText(entity, randX, randY);
103
  });
104
  }
 
162
  }
163
 
164
  function pollinate() {
165
+ hexGrid.forEach(hex => {
166
  if (hex.entities.some(e => entities.insects.includes(e))) {
167
  hex.entities.forEach(entity => {
168
  if (entities.plants.includes(entity) && Math.random() < 0.2) {
169
+ hex.entities.push(entity); // Plant baby in same hex
170
  counts[entity]++;
171
  }
172
  });
 
183
  const hasPlants = hex.entities.some(e => entities.plants.includes(e));
184
  const hasInsects = hex.entities.some(e => entities.insects.includes(e));
185
 
186
+ // Eating logic
187
  if (hasPlants && Math.random() < 0.3) {
188
  const plantIdx = hex.entities.findIndex(e => entities.plants.includes(e));
189
  hex.entities.splice(plantIdx, 1);
 
196
  counts[hex.entities[insectIdx]]--;
197
  }
198
 
199
+ // Reproduction
200
  const mateCount = hex.entities.filter(e => e === entity).length;
201
  if (mateCount >= 2 && nourishment >= 2 && Math.random() < 0.1) {
202
+ hex.entities.push(entity); // Baby in same hex
203
  counts[entity]++;
204
+ nourishment -= 2;
205
  if (!animalPairs.has(entity + index)) {
206
+ animalPairs.set(entity + index, true);
207
  }
208
  }
209
 
210
+ // Movement toward food
211
  const neighbors = getNeighbors(index);
212
  let goalIdx = neighbors.find(n => hexGrid[n].entities.some(e => entities.plants.includes(e)));
213
  if (!goalIdx) goalIdx = neighbors.find(n => hexGrid[n].entities.some(e => entities.insects.includes(e)));
 
217
  if (path.length > 1) {
218
  animalsToMove.push({ entity, fromIdx: index, toIdx: path[1], nourishment });
219
  if (animalPairs.has(entity + index)) {
 
220
  const pairIdx = hex.entities.indexOf(entity, i + 1);
221
  if (pairIdx !== -1) {
222
  animalsToMove.push({ entity, fromIdx: index, toIdx: path[1], nourishment });
 
226
  }
227
  });
228
 
 
229
  animalsToMove.forEach(move => {
230
  const fromHex = hexGrid[move.fromIdx];
231
  const toHex = hexGrid[move.toIdx];
 
234
  fromHex.entities.splice(entityIdx, 1);
235
  toHex.entities.push(move.entity);
236
  toHex.nourishment += move.nourishment;
237
+ fromHex.nourishment = Math.max(0, fromHex.nourishment - move.nourishment);
238
  if (fromHex.entities.length === 0) fromHex.type = "empty";
239
  toHex.type = "occupied";
240
  if (animalPairs.has(move.entity + move.fromIdx)) {
 
251
  hexGrid.forEach(hex => drawHex(hex));
252
  }
253
 
254
+ function updateGame() {
255
  timer--;
256
  document.getElementById("timer").innerText = `Time Left: ${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`;
257
  if (timer % 5 === 0) {
 
269
  function updateCounts() {
270
  let countText = "Counts: ";
271
  Object.keys(counts).forEach(entity => {
272
+ countText += `${entity}:${counts[entity]} `;
273
  });
274
  document.getElementById("counts").innerText = countText;
275
  }
 
291
  const rect = canvas.getBoundingClientRect();
292
  const mouseX = event.clientX - rect.left;
293
  const mouseY = event.clientY - rect.top;
294
+
295
  hexGrid.forEach(hex => {
296
  if (Math.hypot(hex.x - mouseX, hex.y - mouseY) < hexSize) {
297
  if (selectedEntity && resources[selectedEntity] > 0 && hex.type === "empty") {
 
306
  renderMap();
307
  });
308
 
309
+ window.addEventListener("resize", () => {
310
+ canvas.width = window.innerWidth - 300;
311
+ canvas.height = window.innerHeight;
312
+ generateHexGrid();
313
+ renderMap();
314
+ });
315
+
316
  initializeEntities();
317
  generateHexGrid();
318
  populateSidebar();
319
  renderMap();
320
+ const gameLoop = setInterval(updateGame, 1000);
321
  </script>
322
  </body>
323
  </html>