Hugging Face's logo

Spaces:
itpasotm
/
zombie-game
Running

App Files Community
kolaslab commited on
Commit
8adb4d9
·
verified ·
1 Parent(s): 097e83a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +362 -18
index.html CHANGED
@@ -1,19 +1,363 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Zombie Survival</title>
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ overflow: hidden;
10
+ background: #333;
11
+ font-family: Arial, sans-serif;
12
+ cursor: crosshair;
13
+ }
14
+
15
+ #score {
16
+ position: fixed;
17
+ top: 20px;
18
+ left: 20px;
19
+ color: #fff;
20
+ font-size: 24px;
21
+ z-index: 100;
22
+ }
23
+
24
+ #health {
25
+ position: fixed;
26
+ top: 20px;
27
+ right: 20px;
28
+ color: #f00;
29
+ font-size: 24px;
30
+ z-index: 100;
31
+ }
32
+
33
+ #startScreen {
34
+ position: fixed;
35
+ top: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ background: rgba(0, 0, 0, 0.8);
40
+ display: flex;
41
+ flex-direction: column;
42
+ justify-content: center;
43
+ align-items: center;
44
+ z-index: 1000;
45
+ }
46
+
47
+ #startButton {
48
+ padding: 15px 40px;
49
+ font-size: 24px;
50
+ background: #4CAF50;
51
+ color: white;
52
+ border: none;
53
+ border-radius: 5px;
54
+ cursor: pointer;
55
+ transition: transform 0.2s;
56
+ }
57
+
58
+ #startButton:hover {
59
+ transform: scale(1.1);
60
+ }
61
+
62
+ #gameTitle {
63
+ color: #fff;
64
+ font-size: 48px;
65
+ margin-bottom: 30px;
66
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
67
+ }
68
+
69
+ #gameOver {
70
+ position: fixed;
71
+ top: 50%;
72
+ left: 50%;
73
+ transform: translate(-50%, -50%);
74
+ color: #f00;
75
+ font-size: 48px;
76
+ display: none;
77
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
78
+ z-index: 100;
79
+ }
80
+
81
+ .bullet {
82
+ position: absolute;
83
+ width: 8px;
84
+ height: 8px;
85
+ background: #ffd700;
86
+ border-radius: 50%;
87
+ z-index: 50;
88
+ box-shadow: 0 0 10px #ffd700;
89
+ }
90
+
91
+ #player {
92
+ position: absolute;
93
+ width: 40px;
94
+ height: 40px;
95
+ background: #0f0;
96
+ border-radius: 50%;
97
+ transform-origin: center;
98
+ z-index: 90;
99
+ box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
100
+ }
101
+
102
+ #playerGun {
103
+ position: absolute;
104
+ width: 20px;
105
+ height: 8px;
106
+ background: #666;
107
+ top: 50%;
108
+ right: -15px;
109
+ transform: translateY(-50%);
110
+ }
111
+
112
+ .zombie {
113
+ position: absolute;
114
+ width: 40px;
115
+ height: 40px;
116
+ background: #8B0000;
117
+ border-radius: 50%;
118
+ z-index: 80;
119
+ }
120
+
121
+ .explosion {
122
+ position: absolute;
123
+ width: 40px;
124
+ height: 40px;
125
+ border-radius: 50%;
126
+ animation: explode 0.5s ease-out forwards;
127
+ z-index: 85;
128
+ }
129
+
130
+ @keyframes explode {
131
+ 0% {
132
+ transform: scale(1);
133
+ background: #ff4500;
134
+ opacity: 1;
135
+ }
136
+ 100% {
137
+ transform: scale(2);
138
+ background: #ff0000;
139
+ opacity: 0;
140
+ }
141
+ }
142
+
143
+ .muzzleFlash {
144
+ position: absolute;
145
+ width: 20px;
146
+ height: 20px;
147
+ background: #ffd700;
148
+ border-radius: 50%;
149
+ opacity: 0;
150
+ animation: flash 0.1s ease-out;
151
+ }
152
+
153
+ @keyframes flash {
154
+ 0% { opacity: 1; transform: scale(1); }
155
+ 100% { opacity: 0; transform: scale(2); }
156
+ }
157
+ </style>
158
+ </head>
159
+ <body>
160
+ <div id="startScreen">
161
+ <h1 id="gameTitle">ZOMBIE SURVIVAL</h1>
162
+ <button id="startButton">START GAME</button>
163
+ </div>
164
+
165
+ <div id="score">Score: 0</div>
166
+ <div id="health">Health: 100</div>
167
+ <div id="gameOver">GAME OVER</div>
168
+ <div id="player">
169
+ <div id="playerGun"></div>
170
+ </div>
171
+
172
+ <script>
173
+ const startScreen = document.getElementById('startScreen');
174
+ const startButton = document.getElementById('startButton');
175
+ const player = document.getElementById('player');
176
+ const scoreElement = document.getElementById('score');
177
+ const healthElement = document.getElementById('health');
178
+ const gameOverElement = document.getElementById('gameOver');
179
+
180
+ let score = 0;
181
+ let health = 100;
182
+ let zombies = [];
183
+ let bullets = [];
184
+ let gameRunning = false;
185
+ let mouseX = 0;
186
+ let mouseY = 0;
187
+ let playerX = window.innerWidth / 2;
188
+ let playerY = window.innerHeight / 2;
189
+ let zombieSpawnInterval;
190
+
191
+ function startGame() {
192
+ startScreen.style.display = 'none';
193
+ gameRunning = true;
194
+ score = 0;
195
+ health = 100;
196
+ scoreElement.textContent = `Score: ${score}`;
197
+ healthElement.textContent = `Health: ${health}`;
198
+ gameOverElement.style.display = 'none';
199
+
200
+ zombies.forEach(zombie => zombie.element.remove());
201
+ zombies = [];
202
+ bullets.forEach(bullet => bullet.element.remove());
203
+ bullets = [];
204
+
205
+ playerX = window.innerWidth / 2;
206
+ playerY = window.innerHeight / 2;
207
+ updatePlayer();
208
+
209
+ zombieSpawnInterval = setInterval(createZombie, 1000);
210
+ requestAnimationFrame(gameLoop);
211
+ }
212
+
213
+ function updatePlayer() {
214
+ player.style.left = `${playerX - 20}px`;
215
+ player.style.top = `${playerY - 20}px`;
216
+
217
+ const angle = Math.atan2(mouseY - playerY, mouseX - playerX);
218
+ player.style.transform = `rotate(${angle}rad)`;
219
+ }
220
+
221
+ function createZombie() {
222
+ if (!gameRunning) return;
223
+
224
+ const zombie = document.createElement('div');
225
+ zombie.className = 'zombie';
226
+
227
+ const side = Math.floor(Math.random() * 4);
228
+ let x, y;
229
+
230
+ switch(side) {
231
+ case 0: x = Math.random() * window.innerWidth; y = -40; break;
232
+ case 1: x = window.innerWidth + 40; y = Math.random() * window.innerHeight; break;
233
+ case 2: x = Math.random() * window.innerWidth; y = window.innerHeight + 40; break;
234
+ case 3: x = -40; y = Math.random() * window.innerHeight; break;
235
+ }
236
+
237
+ document.body.appendChild(zombie);
238
+ zombies.push({
239
+ element: zombie,
240
+ x: x,
241
+ y: y,
242
+ speed: 2 + Math.random()
243
+ });
244
+ }
245
+
246
+ function createMuzzleFlash() {
247
+ const flash = document.createElement('div');
248
+ flash.className = 'muzzleFlash';
249
+ const angle = Math.atan2(mouseY - playerY, mouseX - playerX);
250
+ const distance = 30;
251
+ const flashX = playerX + Math.cos(angle) * distance;
252
+ const flashY = playerY + Math.sin(angle) * distance;
253
+
254
+ flash.style.left = `${flashX - 10}px`;
255
+ flash.style.top = `${flashY - 10}px`;
256
+ document.body.appendChild(flash);
257
+
258
+ setTimeout(() => flash.remove(), 100);
259
+ }
260
+
261
+ function shoot(e) {
262
+ if (!gameRunning || e.button !== 0) return;
263
+
264
+ const bullet = document.createElement('div');
265
+ bullet.className = 'bullet';
266
+
267
+ const angle = Math.atan2(mouseY - playerY, mouseX - playerX);
268
+ const velocity = {
269
+ x: Math.cos(angle) * 15,
270
+ y: Math.sin(angle) * 15
271
+ };
272
+
273
+ createMuzzleFlash();
274
+
275
+ document.body.appendChild(bullet);
276
+ bullets.push({
277
+ element: bullet,
278
+ x: playerX,
279
+ y: playerY,
280
+ velocity: velocity
281
+ });
282
+ }
283
+
284
+ function createExplosion(x, y) {
285
+ const explosion = document.createElement('div');
286
+ explosion.className = 'explosion';
287
+ explosion.style.left = `${x - 20}px`;
288
+ explosion.style.top = `${y - 20}px`;
289
+ document.body.appendChild(explosion);
290
+
291
+ setTimeout(() => explosion.remove(), 500);
292
+ }
293
+
294
+ function gameLoop() {
295
+ if (!gameRunning) return;
296
+
297
+ bullets.forEach((bullet, bulletIndex) => {
298
+ bullet.x += bullet.velocity.x;
299
+ bullet.y += bullet.velocity.y;
300
+ bullet.element.style.left = `${bullet.x - 4}px`;
301
+ bullet.element.style.top = `${bullet.y - 4}px`;
302
+
303
+ if (bullet.x < 0 || bullet.x > window.innerWidth ||
304
+ bullet.y < 0 || bullet.y > window.innerHeight) {
305
+ bullet.element.remove();
306
+ bullets.splice(bulletIndex, 1);
307
+ }
308
+ });
309
+
310
+ zombies.forEach((zombie, zombieIndex) => {
311
+ const angle = Math.atan2(playerY - zombie.y, playerX - zombie.x);
312
+ zombie.x += Math.cos(angle) * zombie.speed;
313
+ zombie.y += Math.sin(angle) * zombie.speed;
314
+ zombie.element.style.left = `${zombie.x - 20}px`;
315
+ zombie.element.style.top = `${zombie.y - 20}px`;
316
+
317
+ const distToPlayer = Math.hypot(playerX - zombie.x, playerY - zombie.y);
318
+ if (distToPlayer < 40) {
319
+ health -= 1;
320
+ healthElement.textContent = `Health: ${health}`;
321
+ if (health <= 0) gameOver();
322
+ }
323
+
324
+ bullets.forEach((bullet, bulletIndex) => {
325
+ const distToBullet = Math.hypot(bullet.x - zombie.x, bullet.y - zombie.y);
326
+ if (distToBullet < 30) {
327
+ createExplosion(zombie.x, zombie.y);
328
+ zombie.element.remove();
329
+ bullet.element.remove();
330
+ zombies.splice(zombieIndex, 1);
331
+ bullets.splice(bulletIndex, 1);
332
+ score += 10;
333
+ scoreElement.textContent = `Score: ${score}`;
334
+ }
335
+ });
336
+ });
337
+
338
+ requestAnimationFrame(gameLoop);
339
+ }
340
+
341
+ function gameOver() {
342
+ gameRunning = false;
343
+ gameOverElement.style.display = 'block';
344
+ clearInterval(zombieSpawnInterval);
345
+ setTimeout(() => {
346
+ startScreen.style.display = 'flex';
347
+ }, 2000);
348
+ }
349
+
350
+ document.addEventListener('mousemove', (e) => {
351
+ mouseX = e.clientX;
352
+ mouseY = e.clientY;
353
+ if (gameRunning) updatePlayer();
354
+ });
355
+
356
+ document.addEventListener('mousedown', shoot);
357
+ startButton.addEventListener('click', startGame);
358
+
359
+ // Initial setup
360
+ updatePlayer();
361
+ </script>
362
+ </body>
363
+ </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>