Hugging Face's logo

Spaces:
awacke1
/
HexagonGame
Running

App Files Community
awacke1 commited on
Commit
210fc5e
·
verified ·
1 Parent(s): b3daaec

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +145 -0
index.html ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
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 { 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");
20
+ const ctx = canvas.getContext("2d");
21
+
22
+ const hexSize = 40;
23
+ const hexWidth = Math.sqrt(3) * hexSize;
24
+ const hexHeight = 2 * hexSize;
25
+ const offsetX = hexWidth * 0.75;
26
+ const offsetY = hexHeight * 0.5;
27
+ const rows = 10;
28
+ const cols = 10;
29
+
30
+ let hexGrid = [];
31
+ let timer = 300; // 5 minutes
32
+ let selectedPlant = null;
33
+ let resources = { "🌿": 5, "🍁": 5, "🌺": 5, "🌾": 5, "🍊": 5 };
34
+ let score = 0;
35
+
36
+ function generateHexGrid() {
37
+ for (let row = 0; row < rows; row++) {
38
+ for (let col = 0; col < cols; col++) {
39
+ let x = col * offsetX;
40
+ let y = row * hexHeight + (col % 2 ? offsetY : 0);
41
+ hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0 });
42
+ }
43
+ }
44
+ }
45
+
46
+ function drawHex(x, y, type) {
47
+ ctx.beginPath();
48
+ for (let i = 0; i < 6; i++) {
49
+ let angle = (Math.PI / 3) * i;
50
+ let px = x + hexSize * Math.cos(angle);
51
+ let py = y + hexSize * Math.sin(angle);
52
+ ctx.lineTo(px, py);
53
+ }
54
+ ctx.closePath();
55
+ ctx.fillStyle = getTerrainColor(type);
56
+ ctx.fill();
57
+ ctx.stroke();
58
+ }
59
+
60
+ function getTerrainColor(type) {
61
+ switch (type) {
62
+ case "empty": return "#C2B280";
63
+ case "seed": return "#FFD700";
64
+ case "stem": return "#8B4513";
65
+ case "leaf": return "#228B22";
66
+ case "bud": return "#FF69B4";
67
+ case "flower": return "#FFA500";
68
+ default: return "#FFFFFF";
69
+ }
70
+ }
71
+
72
+ function evolveGrid() {
73
+ hexGrid.forEach(hex => {
74
+ if (hex.type !== "empty" && Math.random() < 0.1 && hex.lifeStage < 5) {
75
+ hex.lifeStage++;
76
+ hex.type = ["empty", "seed", "stem", "leaf", "bud", "flower"][hex.lifeStage];
77
+ hex.score += hex.lifeStage * 2;
78
+ }
79
+ });
80
+ }
81
+
82
+ function renderMap() {
83
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
84
+ hexGrid.forEach(hex => drawHex(hex.x, hex.y, hex.type));
85
+ }
86
+
87
+ function updateTimer() {
88
+ timer--;
89
+ document.getElementById("timer").innerText = `Time Left: ${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`;
90
+ if (timer % 15 === 0) {
91
+ evolveGrid();
92
+ }
93
+ renderMap();
94
+ if (timer <= 0) {
95
+ clearInterval(gameLoop);
96
+ alert("Game Over! Final Score: " + score);
97
+ }
98
+ }
99
+
100
+ canvas.addEventListener("click", (event) => {
101
+ const rect = canvas.getBoundingClientRect();
102
+ const mouseX = event.clientX - rect.left;
103
+ const mouseY = event.clientY - rect.top;
104
+
105
+ hexGrid.forEach(hex => {
106
+ if (Math.hypot(hex.x - mouseX, hex.y - mouseY) < hexSize) {
107
+ if (selectedPlant && resources[selectedPlant] > 0 && hex.type === "empty") {
108
+ hex.type = "seed";
109
+ hex.lifeStage = 1;
110
+ resources[selectedPlant]--;
111
+ updateResources();
112
+ }
113
+ }
114
+ });
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
+ }
139
+
140
+ generateHexGrid();
141
+ renderMap();
142
+ let gameLoop = setInterval(updateTimer, 1000);
143
+ </script>
144
+ </body>
145
+ </html>