Hugging Face's logo

Spaces:
D110
/
game
Running

App Files Community
D110 commited on
Commit
da183fa
·
verified ·
1 Parent(s): 1f8e07a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +212 -1163
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,1235 +3,284 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Ultimate Battle Royale</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @keyframes fadeIn {
11
- from { opacity: 0; }
12
- to { opacity: 1; }
13
- }
14
-
15
- @keyframes pulse {
16
  0% { transform: scale(1); }
17
- 50% { transform: scale(1.05); }
18
  100% { transform: scale(1); }
19
  }
20
 
21
- .game-container {
22
- perspective: 1000px;
23
- }
24
-
25
- .character {
26
- transition: transform 0.2s;
27
- }
28
-
29
- .character:hover {
30
- transform: translateY(-5px) rotateY(10deg);
31
- }
32
-
33
- .weapon-card {
34
- transition: all 0.3s;
35
- }
36
-
37
- .weapon-card:hover {
38
- transform: translateY(-5px);
39
- box-shadow: 0 10px 20px rgba(0,0,0,0.2);
40
- }
41
-
42
- .map-selector {
43
- background-size: cover;
44
- background-position: center;
45
- transition: all 0.3s;
46
- }
47
-
48
- .map-selector:hover {
49
- transform: scale(1.03);
50
- }
51
-
52
- #game-screen {
53
- display: none;
54
- position: relative;
55
- overflow: hidden;
56
- background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
57
- background-size: cover;
58
  }
59
 
60
- #player {
61
- position: absolute;
62
- width: 50px;
63
- height: 50px;
64
- background-image: url('https://i.imgur.com/Jj7ZxHm.png');
65
- background-size: contain;
66
- background-repeat: no-repeat;
67
- z-index: 10;
68
  }
69
 
70
- .enemy {
71
- position: absolute;
72
- width: 40px;
73
- height: 40px;
74
- background-image: url('https://i.imgur.com/8Km9tLL.png');
75
- background-size: contain;
76
- background-repeat: no-repeat;
77
- z-index: 9;
78
  }
79
 
80
- .bullet {
81
- position: absolute;
82
- width: 5px;
83
- height: 5px;
84
- background-color: yellow;
85
- border-radius: 50%;
86
- z-index: 8;
87
  }
88
 
89
- .health-bar {
90
- height: 5px;
91
- background-color: red;
92
- transition: width 0.3s;
93
  }
94
 
95
- .damage-effect {
96
- position: absolute;
97
- top: 0;
98
- left: 0;
99
- width: 100%;
100
- height: 100%;
101
- background-color: rgba(255, 0, 0, 0.3);
102
- pointer-events: none;
103
- opacity: 0;
104
- transition: opacity 0.3s;
105
  }
106
 
107
- .loot-item {
108
- position: absolute;
109
- width: 30px;
110
- height: 30px;
111
- background-size: contain;
112
- background-repeat: no-repeat;
113
- z-index: 7;
114
- animation: pulse 1.5s infinite;
115
- }
116
-
117
- #mini-map {
118
- position: absolute;
119
- bottom: 20px;
120
- right: 20px;
121
- width: 150px;
122
- height: 150px;
123
- background-color: rgba(0,0,0,0.5);
124
- border: 2px solid #fff;
125
- z-index: 20;
126
- }
127
-
128
- #player-mini {
129
- position: absolute;
130
- width: 5px;
131
- height: 5px;
132
- background-color: blue;
133
- border-radius: 50%;
134
- }
135
-
136
- .enemy-mini {
137
- position: absolute;
138
- width: 4px;
139
- height: 4px;
140
- background-color: red;
141
- border-radius: 50%;
142
- }
143
-
144
- .safe-zone {
145
- position: absolute;
146
- border: 2px dashed #00ff00;
147
- border-radius: 50%;
148
- }
149
-
150
- #kill-feed {
151
- position: absolute;
152
- top: 20px;
153
- right: 20px;
154
- width: 200px;
155
- background-color: rgba(0,0,0,0.5);
156
- color: white;
157
- padding: 10px;
158
- border-radius: 5px;
159
- z-index: 20;
160
- }
161
-
162
- .kill-message {
163
- margin-bottom: 5px;
164
- animation: fadeIn 0.5s;
165
  }
166
  </style>
167
  </head>
168
- <body class="bg-gray-900 text-white">
169
- <!-- Main Menu -->
170
- <div id="main-menu" class="min-h-screen flex flex-col items-center justify-center p-4">
171
- <div class="text-center mb-12">
172
- <h1 class="text-6xl font-bold mb-4 text-yellow-400">ULTIMATE BATTLE ROYALE</h1>
173
- <p class="text-xl text-gray-300">Survive, Loot, and Be the Last One Standing!</p>
174
- </div>
175
-
176
- <div class="flex flex-col md:flex-row gap-8 w-full max-w-6xl">
177
- <!-- Quick Play -->
178
- <div class="bg-gray-800 rounded-lg p-6 flex-1 hover:bg-gray-700 transition cursor-pointer" onclick="startGame()">
179
- <div class="text-center">
180
- <i class="fas fa-play-circle text-5xl text-green-500 mb-4"></i>
181
- <h2 class="text-2xl font-bold mb-2">Quick Play</h2>
182
- <p class="text-gray-300">Jump into a match right away with random settings</p>
183
- </div>
184
- </div>
185
-
186
- <!-- Custom Game -->
187
- <div class="bg-gray-800 rounded-lg p-6 flex-1 hover:bg-gray-700 transition cursor-pointer" onclick="showCustomGameMenu()">
188
- <div class="text-center">
189
- <i class="fas fa-cog text-5xl text-blue-500 mb-4"></i>
190
- <h2 class="text-2xl font-bold mb-2">Custom Game</h2>
191
- <p class="text-gray-300">Customize your match settings and play style</p>
192
- </div>
193
- </div>
194
-
195
- <!-- Inventory -->
196
- <div class="bg-gray-800 rounded-lg p-6 flex-1 hover:bg-gray-700 transition cursor-pointer" onclick="showInventory()">
197
- <div class="text-center">
198
- <i class="fas fa-archive text-5xl text-purple-500 mb-4"></i>
199
- <h2 class="text-2xl font-bold mb-2">Inventory</h2>
200
- <p class="text-gray-300">View and manage your collected items and skins</p>
201
- </div>
202
  </div>
 
203
  </div>
204
 
205
- <div class="mt-12 flex gap-4">
206
- <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-bold flex items-center gap-2">
207
- <i class="fas fa-users"></i> Squad
 
208
  </button>
209
- <button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-bold flex items-center gap-2">
210
- <i class="fas fa-store"></i> Shop
211
  </button>
212
- <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold flex items-center gap-2">
213
- <i class="fas fa-cog"></i> Settings
214
  </button>
215
  </div>
216
  </div>
217
 
218
- <!-- Custom Game Menu -->
219
- <div id="custom-game-menu" class="min-h-screen hidden p-8">
220
- <div class="max-w-6xl mx-auto">
221
- <div class="flex justify-between items-center mb-8">
222
- <h1 class="text-4xl font-bold text-yellow-400">CUSTOM GAME</h1>
223
- <button onclick="hideCustomGameMenu()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg">
224
- <i class="fas fa-arrow-left"></i> Back
 
 
 
 
 
 
 
 
225
  </button>
226
  </div>
227
 
228
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
229
- <!-- Map Selection -->
230
- <div class="bg-gray-800 rounded-lg p-6">
231
- <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">MAP SELECTION</h2>
232
- <div class="grid grid-cols-2 gap-4">
233
- <div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
234
- style="background-image: url('https://i.imgur.com/XdKXz7A.jpg')" onclick="selectMap('erangel')">
235
- <span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Erangel</span>
236
- </div>
237
- <div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
238
- style="background-image: url('https://i.imgur.com/5QzZfzJ.jpg')" onclick="selectMap('miramar')">
239
- <span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Miramar</span>
240
- </div>
241
- <div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
242
- style="background-image: url('https://i.imgur.com/8YvJ3RB.jpg')" onclick="selectMap('sanhok')">
243
- <span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Sanhok</span>
244
- </div>
245
- <div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
246
- style="background-image: url('https://i.imgur.com/9pXqM9T.jpg')" onclick="selectMap('vikendi')">
247
- <span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Vikendi</span>
248
- </div>
249
- </div>
250
- </div>
251
-
252
- <!-- Game Mode -->
253
- <div class="bg-gray-800 rounded-lg p-6">
254
- <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">GAME MODE</h2>
255
- <div class="space-y-4">
256
- <div class="flex items-center gap-3 p-3 hover:bg-gray-700 rounded-lg cursor-pointer" onclick="selectMode('solo')">
257
- <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
258
- <i class="fas fa-user"></i>
259
- </div>
260
- <div>
261
- <h3 class="font-bold">Solo</h3>
262
- <p class="text-sm text-gray-400">Play alone against 99 players</p>
263
- </div>
264
- </div>
265
- <div class="flex items-center gap-3 p-3 hover:bg-gray-700 rounded-lg cursor-pointer" onclick="selectMode('duo')">
266
- <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center">
267
- <i class="fas fa-user-friends"></i>
268
- </div>
269
- <div>
270
- <h3 class="font-bold">Duo</h3>
271
- <p class="text-sm text-gray-400">Team up with 1 friend</p>
272
- </div>
273
- </div>
274
- <div class="flex items-center gap-3 p-3 hover:bg-gray-700 rounded-lg cursor-pointer" onclick="selectMode('squad')">
275
- <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
276
- <i class="fas fa-users"></i>
277
- </div>
278
- <div>
279
- <h3 class="font-bold">Squad</h3>
280
- <p class="text-sm text-gray-400">Team up with 3 friends</p>
281
- </div>
282
- </div>
283
- </div>
284
- </div>
285
-
286
- <!-- Advanced Settings -->
287
- <div class="bg-gray-800 rounded-lg p-6">
288
- <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">ADVANCED SETTINGS</h2>
289
- <div class="space-y-4">
290
- <div>
291
- <label class="block mb-2">Bot Difficulty</label>
292
- <select class="w-full bg-gray-700 rounded p-2">
293
- <option>Easy</option>
294
- <option selected>Medium</option>
295
- <option>Hard</option>
296
- </select>
297
- </div>
298
- <div>
299
- <label class="block mb-2">Starting Zone</label>
300
- <select class="w-full bg-gray-700 rounded p-2">
301
- <option selected>Random</option>
302
- <option>Hot Drop</option>
303
- <option>Safe Landing</option>
304
- </select>
305
- </div>
306
- <div>
307
- <label class="flex items-center gap-2">
308
- <input type="checkbox" class="rounded" checked>
309
- <span>Fog Weather</span>
310
- </label>
311
- </div>
312
- <div>
313
- <label class="flex items-center gap-2">
314
- <input type="checkbox" class="rounded">
315
- <span>Night Mode</span>
316
- </label>
317
- </div>
318
- </div>
319
- </div>
320
  </div>
321
 
322
- <div class="mt-8 text-center">
323
- <button onclick="startCustomGame()" class="bg-green-600 hover:bg-green-700 px-8 py-3 rounded-lg font-bold text-xl">
324
- START GAME <i class="fas fa-play ml-2"></i>
 
 
325
  </button>
326
  </div>
327
  </div>
328
  </div>
329
 
330
- <!-- Inventory Screen -->
331
- <div id="inventory-screen" class="min-h-screen hidden p-8">
332
- <div class="max-w-6xl mx-auto">
333
- <div class="flex justify-between items-center mb-8">
334
- <h1 class="text-4xl font-bold text-yellow-400">INVENTORY</h1>
335
- <button onclick="hideInventory()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg">
336
- <i class="fas fa-arrow-left"></i> Back
337
- </button>
338
- </div>
339
-
340
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
341
- <!-- Character Skins -->
342
- <div class="bg-gray-800 rounded-lg p-6 col-span-1">
343
- <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">CHARACTERS</h2>
344
- <div class="grid grid-cols-2 gap-4">
345
- <div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
346
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
347
- <i class="fas fa-user text-4xl"></i>
348
- </div>
349
- <h3 class="font-bold">Default</h3>
350
- <p class="text-xs text-gray-400">Equipped</p>
351
- </div>
352
- <div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
353
- <div class="h-24 bg-blue-600 rounded mb-2 flex items-center justify-center">
354
- <i class="fas fa-user-ninja text-4xl"></i>
355
- </div>
356
- <h3 class="font-bold">Shadow</h3>
357
- <p class="text-xs text-gray-400">Locked</p>
358
- </div>
359
- <div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
360
- <div class="h-24 bg-green-600 rounded mb-2 flex items-center justify-center">
361
- <i class="fas fa-user-secret text-4xl"></i>
362
- </div>
363
- <h3 class="font-bold">Ghost</h3>
364
- <p class="text-xs text-gray-400">Locked</p>
365
- </div>
366
- <div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
367
- <div class="h-24 bg-red-600 rounded mb-2 flex items-center justify-center">
368
- <i class="fas fa-user-astronaut text-4xl"></i>
369
- </div>
370
- <h3 class="font-bold">Cyborg</h3>
371
- <p class="text-xs text-gray-400">Locked</p>
372
- </div>
373
- </div>
374
- </div>
375
-
376
- <!-- Weapons -->
377
- <div class="bg-gray-800 rounded-lg p-6 col-span-3">
378
- <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">WEAPONS</h2>
379
-
380
- <div class="mb-6">
381
- <h3 class="text-xl font-bold mb-3">Assault Rifles</h3>
382
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
383
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
384
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
385
- <i class="fas fa-gun text-4xl"></i>
386
- </div>
387
- <h3 class="font-bold">M416</h3>
388
- <p class="text-xs text-gray-400">5.56mm</p>
389
- <div class="mt-2 flex justify-between items-center">
390
- <span class="text-yellow-400"><i class="fas fa-star"></i> 3</span>
391
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
392
- </div>
393
- </div>
394
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
395
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
396
- <i class="fas fa-gun text-4xl"></i>
397
- </div>
398
- <h3 class="font-bold">AKM</h3>
399
- <p class="text-xs text-gray-400">7.62mm</p>
400
- <div class="mt-2 flex justify-between items-center">
401
- <span class="text-yellow-400"><i class="fas fa-star"></i> 4</span>
402
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
403
- </div>
404
- </div>
405
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
406
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
407
- <i class="fas fa-gun text-4xl"></i>
408
- </div>
409
- <h3 class="font-bold">SCAR-L</h3>
410
- <p class="text-xs text-gray-400">5.56mm</p>
411
- <div class="mt-2 flex justify-between items-center">
412
- <span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
413
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
414
- </div>
415
- </div>
416
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
417
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
418
- <i class="fas fa-gun text-4xl"></i>
419
- </div>
420
- <h3 class="font-bold">M16A4</h3>
421
- <p class="text-xs text-gray-400">5.56mm</p>
422
- <div class="mt-2 flex justify-between items-center">
423
- <span class="text-yellow-400"><i class="fas fa-star"></i> 1</span>
424
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
425
- </div>
426
- </div>
427
- </div>
428
- </div>
429
-
430
- <div class="mb-6">
431
- <h3 class="text-xl font-bold mb-3">Sniper Rifles</h3>
432
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
433
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
434
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
435
- <i class="fas fa-gun text-4xl"></i>
436
- </div>
437
- <h3 class="font-bold">AWM</h3>
438
- <p class="text-xs text-gray-400">.300 Magnum</p>
439
- <div class="mt-2 flex justify-between items-center">
440
- <span class="text-yellow-400"><i class="fas fa-star"></i> 5</span>
441
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
442
- </div>
443
- </div>
444
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
445
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
446
- <i class="fas fa-gun text-4xl"></i>
447
- </div>
448
- <h3 class="font-bold">M24</h3>
449
- <p class="text-xs text-gray-400">7.62mm</p>
450
- <div class="mt-2 flex justify-between items-center">
451
- <span class="text-yellow-400"><i class="fas fa-star"></i> 4</span>
452
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
453
- </div>
454
- </div>
455
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
456
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
457
- <i class="fas fa-gun text-4xl"></i>
458
- </div>
459
- <h3 class="font-bold">Kar98k</h3>
460
- <p class="text-xs text-gray-400">7.62mm</p>
461
- <div class="mt-2 flex justify-between items-center">
462
- <span class="text-yellow-400"><i class="fas fa-star"></i> 3</span>
463
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
464
- </div>
465
- </div>
466
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
467
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
468
- <i class="fas fa-gun text-4xl"></i>
469
- </div>
470
- <h3 class="font-bold">SKS</h3>
471
- <p class="text-xs text-gray-400">7.62mm</p>
472
- <div class="mt-2 flex justify-between items-center">
473
- <span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
474
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
475
- </div>
476
- </div>
477
- </div>
478
- </div>
479
-
480
- <div>
481
- <h3 class="text-xl font-bold mb-3">SMGs & Shotguns</h3>
482
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
483
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
484
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
485
- <i class="fas fa-gun text-4xl"></i>
486
- </div>
487
- <h3 class="font-bold">UMP9</h3>
488
- <p class="text-xs text-gray-400">9mm</p>
489
- <div class="mt-2 flex justify-between items-center">
490
- <span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
491
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
492
- </div>
493
- </div>
494
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
495
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
496
- <i class="fas fa-gun text-4xl"></i>
497
- </div>
498
- <h3 class="font-bold">Vector</h3>
499
- <p class="text-xs text-gray-400">.45 ACP</p>
500
- <div class="mt-2 flex justify-between items-center">
501
- <span class="text-yellow-400"><i class="fas fa-star"></i> 3</span>
502
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
503
- </div>
504
- </div>
505
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
506
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
507
- <i class="fas fa-gun text-4xl"></i>
508
- </div>
509
- <h3 class="font-bold">S12K</h3>
510
- <p class="text-xs text-gray-400">12 Gauge</p>
511
- <div class="mt-2 flex justify-between items-center">
512
- <span class="text-yellow-400"><i class="fas fa-star"></i> 1</span>
513
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
514
- </div>
515
- </div>
516
- <div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
517
- <div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
518
- <i class="fas fa-gun text-4xl"></i>
519
- </div>
520
- <h3 class="font-bold">S686</h3>
521
- <p class="text-xs text-gray-400">12 Gauge</p>
522
- <div class="mt-2 flex justify-between items-center">
523
- <span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
524
- <button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
525
- </div>
526
- </div>
527
- </div>
528
- </div>
529
- </div>
530
- </div>
531
  </div>
532
- </div>
533
-
534
- <!-- Game Screen -->
535
- <div id="game-screen" class="w-full h-screen">
536
- <!-- Damage Effect -->
537
- <div class="damage-effect" id="damage-effect"></div>
538
 
539
- <!-- Player HUD -->
540
- <div class="absolute top-4 left-4 bg-black bg-opacity-50 p-3 rounded-lg z-10">
541
- <div class="flex items-center gap-4">
542
- <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center">
543
- <i class="fas fa-user text-2xl"></i>
544
- </div>
545
- <div>
546
- <h2 class="font-bold text-xl">Player1</h2>
547
- <div class="flex items-center gap-2">
548
- <i class="fas fa-heart text-red-500"></i>
549
- <div class="w-32 h-2 bg-gray-700 rounded-full">
550
- <div class="health-bar h-full rounded-full" id="health-bar" style="width: 100%"></div>
551
- </div>
552
- <span id="health-text">100</span>
553
- </div>
554
- <div class="flex items-center gap-2 mt-1">
555
- <i class="fas fa-shield-alt text-blue-400"></i>
556
- <div class="w-32 h-2 bg-gray-700 rounded-full">
557
- <div class="h-full bg-blue-400 rounded-full" id="armor-bar" style="width: 50%"></div>
558
- </div>
559
- <span id="armor-text">50</span>
560
- </div>
561
  </div>
562
  </div>
563
  </div>
564
 
565
- <!-- Weapons HUD -->
566
- <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 p-3 rounded-lg z-10">
567
- <div class="flex gap-4">
568
- <div class="weapon-slot bg-gray-800 p-2 rounded w-20 h-20 flex flex-col items-center justify-center border-2 border-yellow-500">
569
- <i class="fas fa-gun text-2xl mb-1"></i>
570
- <span class="text-xs">M416</span>
571
- <div class="text-xs mt-1">30/120</div>
572
- </div>
573
- <div class="weapon-slot bg-gray-800 p-2 rounded w-20 h-20 flex flex-col items-center justify-center">
574
- <i class="fas fa-gun text-2xl mb-1"></i>
575
- <span class="text-xs">Kar98k</span>
576
- <div class="text-xs mt-1">5/20</div>
577
- </div>
578
- <div class="weapon-slot bg-gray-800 p-2 rounded w-20 h-20 flex flex-col items-center justify-center">
579
- <i class="fas fa-bomb text-2xl mb-1"></i>
580
- <span class="text-xs">Frag</span>
581
- <div class="text-xs mt-1">2</div>
582
- </div>
583
- </div>
584
  </div>
585
-
586
- <!-- Inventory Quick Access -->
587
- <div class="absolute bottom-4 right-4 bg-black bg-opacity-50 p-2 rounded-lg z-10">
588
- <div class="grid grid-cols-4 gap-2">
589
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
590
- <i class="fas fa-plus text-gray-500"></i>
591
- </div>
592
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
593
- <i class="fas fa-plus text-gray-500"></i>
594
- </div>
595
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
596
- <i class="fas fa-plus text-gray-500"></i>
597
- </div>
598
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
599
- <i class="fas fa-plus text-gray-500"></i>
600
- </div>
601
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
602
- <i class="fas fa-plus text-gray-500"></i>
603
- </div>
604
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
605
- <i class="fas fa-plus text-gray-500"></i>
606
- </div>
607
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
608
- <i class="fas fa-plus text-gray-500"></i>
609
- </div>
610
- <div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
611
- <i class="fas fa-plus text-gray-500"></i>
612
- </div>
 
 
 
 
613
  </div>
614
- </div>
615
-
616
- <!-- Mini Map -->
617
- <div id="mini-map">
618
- <div id="player-mini" style="top: 75px; left: 75px;"></div>
619
- <div class="safe-zone" style="width: 120px; height: 120px; top: 15px; left: 15px;"></div>
620
- </div>
621
-
622
- <!-- Kill Feed -->
623
- <div id="kill-feed">
624
- <div class="kill-message">Player2 killed Player3 with AKM</div>
625
- <div class="kill-message">Player4 killed Player5 with M416</div>
626
- </div>
627
-
628
- <!-- Player -->
629
- <div id="player" style="top: 300px; left: 500px;"></div>
630
-
631
- <!-- Controls -->
632
- <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 p-3 rounded-lg z-10">
633
- <div class="flex gap-4">
634
- <button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
635
- <i class="fas fa-arrow-up"></i>
636
- </button>
637
- <div class="flex flex-col gap-2">
638
- <button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
639
- <i class="fas fa-arrow-left"></i>
640
- </button>
641
- <button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
642
- <i class="fas fa-arrow-right"></i>
643
  </button>
644
  </div>
645
- <button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
646
- <i class="fas fa-arrow-down"></i>
647
- </button>
648
- <button class="control-btn bg-red-600 w-12 h-12 rounded-full flex items-center justify-center ml-4">
649
- <i class="fas fa-fire"></i>
650
- </button>
651
- <button class="control-btn bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center">
652
- <i class="fas fa-sync-alt"></i>
653
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
654
  </div>
655
  </div>
656
  </div>
657
 
658
- <!-- Game Over Screen -->
659
- <div id="game-over-screen" class="min-h-screen hidden items-center justify-center bg-black bg-opacity-80 absolute inset-0 z-20">
660
- <div class="text-center p-8 bg-gray-900 rounded-lg max-w-md">
661
- <h1 class="text-5xl font-bold text-red-500 mb-4">GAME OVER</h1>
662
- <p class="text-2xl mb-6">You placed <span class="text-yellow-400">#5</span> out of 100 players</p>
663
- <div class="grid grid-cols-2 gap-4 mb-8">
664
- <div class="bg-gray-800 p-4 rounded">
665
- <div class="text-3xl font-bold text-green-500">3</div>
666
- <div class="text-gray-400">Kills</div>
667
- </div>
668
- <div class="bg-gray-800 p-4 rounded">
669
- <div class="text-3xl font-bold text-blue-500">542</div>
670
- <div class="text-gray-400">Damage</div>
671
- </div>
672
- <div class="bg-gray-800 p-4 rounded">
673
- <div class="text-3xl font-bold text-purple-500">12:34</div>
674
- <div class="text-gray-400">Time Survived</div>
675
- </div>
676
- <div class="bg-gray-800 p-4 rounded">
677
- <div class="text-3xl font-bold text-yellow-500">1,250</div>
678
- <div class="text-gray-400">XP Earned</div>
679
- </div>
680
- </div>
681
- <div class="flex justify-center gap-4">
682
- <button onclick="returnToMainMenu()" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-bold">
683
- Main Menu
684
- </button>
685
- <button onclick="playAgain()" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-bold">
686
- Play Again
687
- </button>
688
- </div>
689
  </div>
690
  </div>
691
-
692
  <script>
693
- // Game state
694
- const gameState = {
695
- player: {
696
- x: 500,
697
- y: 300,
698
- health: 100,
699
- armor: 50,
700
- weapons: [
701
- { name: "M416", ammo: 30, maxAmmo: 120, type: "assault" },
702
- { name: "Kar98k", ammo: 5, maxAmmo: 20, type: "sniper" }
703
- ],
704
- activeWeapon: 0,
705
- grenades: 2
706
- },
707
- enemies: [],
708
- bullets: [],
709
- loot: [],
710
- gameTime: 0,
711
- safeZone: {
712
- x: 0,
713
- y: 0,
714
- radius: 600
715
- },
716
- miniMapScale: 0.1,
717
- gameActive: false
718
- };
719
-
720
- // Game elements
721
- const mainMenu = document.getElementById('main-menu');
722
- const customGameMenu = document.getElementById('custom-game-menu');
723
- const inventoryScreen = document.getElementById('inventory-screen');
724
- const gameScreen = document.getElementById('game-screen');
725
- const gameOverScreen = document.getElementById('game-over-screen');
726
- const playerElement = document.getElementById('player');
727
- const healthBar = document.getElementById('health-bar');
728
- const healthText = document.getElementById('health-text');
729
- const armorBar = document.getElementById('armor-bar');
730
- const armorText = document.getElementById('armor-text');
731
- const damageEffect = document.getElementById('damage-effect');
732
- const miniMap = document.getElementById('mini-map');
733
- const playerMini = document.getElementById('player-mini');
734
-
735
- // Navigation functions
736
- function startGame() {
737
- mainMenu.style.display = 'none';
738
- gameScreen.style.display = 'block';
739
- initGame();
740
- }
741
-
742
- function showCustomGameMenu() {
743
- mainMenu.style.display = 'none';
744
- customGameMenu.style.display = 'block';
745
- }
746
-
747
- function hideCustomGameMenu() {
748
- customGameMenu.style.display = 'none';
749
- mainMenu.style.display = 'flex';
750
- }
751
-
752
- function showInventory() {
753
- mainMenu.style.display = 'none';
754
- inventoryScreen.style.display = 'block';
755
- }
756
-
757
- function hideInventory() {
758
- inventoryScreen.style.display = 'none';
759
- mainMenu.style.display = 'flex';
760
- }
761
-
762
- function selectMap(map) {
763
- console.log(`Selected map: ${map}`);
764
- }
765
-
766
- function selectMode(mode) {
767
- console.log(`Selected mode: ${mode}`);
768
- }
769
-
770
- function startCustomGame() {
771
- customGameMenu.style.display = 'none';
772
- gameScreen.style.display = 'block';
773
- initGame();
774
- }
775
-
776
- function returnToMainMenu() {
777
- gameOverScreen.style.display = 'none';
778
- mainMenu.style.display = 'flex';
779
- stopGame();
780
- }
781
-
782
- function playAgain() {
783
- gameOverScreen.style.display = 'none';
784
- gameScreen.style.display = 'block';
785
- initGame();
786
- }
787
-
788
- // Game functions
789
- function initGame() {
790
- gameState.gameActive = true;
791
- gameState.player.health = 100;
792
- gameState.player.armor = 50;
793
- gameState.enemies = [];
794
- gameState.bullets = [];
795
- gameState.loot = [];
796
- gameState.gameTime = 0;
797
-
798
- // Create initial enemies
799
- for (let i = 0; i < 10; i++) {
800
- createEnemy();
801
- }
802
-
803
- // Create initial loot
804
- for (let i = 0; i < 15; i++) {
805
- createLoot();
806
- }
807
-
808
- // Start game loop
809
- gameLoop();
810
- }
811
-
812
- function stopGame() {
813
- gameState.gameActive = false;
814
-
815
- // Remove all enemies and bullets from DOM
816
- document.querySelectorAll('.enemy').forEach(e => e.remove());
817
- document.querySelectorAll('.bullet').forEach(b => b.remove());
818
- document.querySelectorAll('.loot-item').forEach(l => l.remove());
819
- }
820
-
821
- function gameLoop() {
822
- if (!gameState.gameActive) return;
823
-
824
- updatePlayer();
825
- updateEnemies();
826
- updateBullets();
827
- checkCollisions();
828
- updateGameTime();
829
- updateMiniMap();
830
-
831
- requestAnimationFrame(gameLoop);
832
- }
833
-
834
- function updatePlayer() {
835
- // Update player position based on controls (simplified for this demo)
836
- // In a real game, this would respond to keyboard/controller input
837
-
838
- // Update HUD
839
- healthBar.style.width = `${gameState.player.health}%`;
840
- healthText.textContent = gameState.player.health;
841
- armorBar.style.width = `${gameState.player.armor}%`;
842
- armorText.textContent = gameState.player.armor;
843
-
844
- // Position player element
845
- playerElement.style.left = `${gameState.player.x}px`;
846
- playerElement.style.top = `${gameState.player.y}px`;
847
- }
848
-
849
- function updateEnemies() {
850
- // Move enemies randomly
851
- gameState.enemies.forEach(enemy => {
852
- // Simple random movement
853
- enemy.x += (Math.random() - 0.5) * 2;
854
- enemy.y += (Math.random() - 0.5) * 2;
855
 
856
- // Keep within bounds
857
- enemy.x = Math.max(0, Math.min(window.innerWidth - 40, enemy.x));
858
- enemy.y = Math.max(0, Math.min(window.innerHeight - 40, enemy.y));
 
 
859
 
860
- // Update DOM element
861
- const enemyElement = document.getElementById(`enemy-${enemy.id}`);
862
- if (enemyElement) {
863
- enemyElement.style.left = `${enemy.x}px`;
864
- enemyElement.style.top = `${enemy.y}px`;
865
- }
866
-
867
- // Occasionally shoot at player
868
- if (Math.random() < 0.01) {
869
- shoot(enemy.x + 20, enemy.y + 20, gameState.player.x + 25, gameState.player.y + 25, false);
870
- }
871
- });
872
- }
873
-
874
- function updateBullets() {
875
- // Move bullets
876
- gameState.bullets.forEach(bullet => {
877
- bullet.x += bullet.vx;
878
- bullet.y += bullet.vy;
879
-
880
- // Remove if out of bounds
881
- if (bullet.x < 0 || bullet.x > window.innerWidth ||
882
- bullet.y < 0 || bullet.y > window.innerHeight) {
883
- removeBullet(bullet.id);
884
- }
885
-
886
- // Update DOM element
887
- const bulletElement = document.getElementById(`bullet-${bullet.id}`);
888
- if (bulletElement) {
889
- bulletElement.style.left = `${bullet.x}px`;
890
- bulletElement.style.top = `${bullet.y}px`;
891
- }
892
  });
893
- }
894
 
895
- function checkCollisions() {
896
- // Check bullet collisions with enemies and player
897
- gameState.bullets.forEach(bullet => {
898
- // Check if bullet hits player
899
- if (bullet.fromPlayer === false &&
900
- bullet.x > gameState.player.x && bullet.x < gameState.player.x + 50 &&
901
- bullet.y > gameState.player.y && bullet.y < gameState.player.y + 50) {
902
-
903
- // Player hit
904
- takeDamage(10);
905
- removeBullet(bullet.id);
906
- }
907
-
908
- // Check if bullet hits enemy
909
- if (bullet.fromPlayer === true) {
910
- gameState.enemies.forEach(enemy => {
911
- if (bullet.x > enemy.x && bullet.x < enemy.x + 40 &&
912
- bullet.y > enemy.y && bullet.y < enemy.y + 40) {
913
-
914
- // Enemy hit
915
- enemy.health -= 25;
916
- if (enemy.health <= 0) {
917
- removeEnemy(enemy.id);
918
- }
919
- removeBullet(bullet.id);
920
- }
921
- });
922
- }
923
  });
924
-
925
- // Check player collision with loot
926
- gameState.loot.forEach(loot => {
927
- if (gameState.player.x + 25 > loot.x && gameState.player.x + 25 < loot.x + 30 &&
928
- gameState.player.y + 25 > loot.y && gameState.player.y + 25 < loot.y + 30) {
929
-
930
- // Collect loot
931
- collectLoot(loot);
932
- }
933
- });
934
- }
935
 
936
- function updateGameTime() {
937
- gameState.gameTime += 0.016; // Approximate time per frame at 60fps
938
-
939
- // Shrink safe zone over time
940
- if (gameState.gameTime % 30 < 0.016) { // Every ~30 seconds
941
- gameState.safeZone.radius = Math.max(200, gameState.safeZone.radius - 50);
942
-
943
- // Update safe zone visual
944
- const safeZoneElement = document.querySelector('.safe-zone');
945
- if (safeZoneElement) {
946
- safeZoneElement.style.width = `${gameState.safeZone.radius * gameState.miniMapScale * 2}px`;
947
- safeZoneElement.style.height = `${gameState.safeZone.radius * gameState.miniMapScale * 2}px`;
948
  }
 
949
  }
950
-
951
- // Check if player is outside safe zone
952
- const distanceToCenter = Math.sqrt(
953
- Math.pow(gameState.player.x + 25 - window.innerWidth/2, 2) +
954
- Math.pow(gameState.player.y + 25 - window.innerHeight/2, 2)
955
- );
956
-
957
- if (distanceToCenter > gameState.safeZone.radius) {
958
- // Take zone damage
959
- takeDamage(1);
960
- }
961
-
962
- // Randomly spawn new enemies
963
- if (Math.random() < 0.01 && gameState.enemies.length < 15) {
964
- createEnemy();
965
- }
966
-
967
- // Randomly spawn new loot
968
- if (Math.random() < 0.005 && gameState.loot.length < 20) {
969
- createLoot();
970
- }
971
- }
972
-
973
- function updateMiniMap() {
974
- // Update player position on mini map
975
- const miniX = (gameState.player.x * gameState.miniMapScale) + 75 - 2.5;
976
- const miniY = (gameState.player.y * gameState.miniMapScale) + 75 - 2.5;
977
-
978
- playerMini.style.left = `${miniX}px`;
979
- playerMini.style.top = `${miniY}px`;
980
-
981
- // Update enemies on mini map
982
- document.querySelectorAll('.enemy-mini').forEach(e => e.remove());
983
-
984
- gameState.enemies.forEach(enemy => {
985
- const enemyMini = document.createElement('div');
986
- enemyMini.className = 'enemy-mini';
987
- enemyMini.style.left = `${(enemy.x * gameState.miniMapScale) + 75 - 2}px`;
988
- enemyMini.style.top = `${(enemy.y * gameState.miniMapScale) + 75 - 2}px`;
989
- miniMap.appendChild(enemyMini);
990
- });
991
- }
992
-
993
- function createEnemy() {
994
- const id = Date.now() + Math.random();
995
- const x = Math.random() * (window.innerWidth - 40);
996
- const y = Math.random() * (window.innerHeight - 40);
997
-
998
- gameState.enemies.push({
999
- id,
1000
- x,
1001
- y,
1002
- health: 100
1003
- });
1004
-
1005
- const enemyElement = document.createElement('div');
1006
- enemyElement.className = 'enemy';
1007
- enemyElement.id = `enemy-${id}`;
1008
- enemyElement.style.left = `${x}px`;
1009
- enemyElement.style.top = `${y}px`;
1010
- gameScreen.appendChild(enemyElement);
1011
- }
1012
-
1013
- function removeEnemy(id) {
1014
- // Remove from array
1015
- gameState.enemies = gameState.enemies.filter(e => e.id !== id);
1016
-
1017
- // Remove from DOM
1018
- const enemyElement = document.getElementById(`enemy-${id}`);
1019
- if (enemyElement) {
1020
- enemyElement.remove();
1021
- }
1022
-
1023
- // Check win condition
1024
- if (gameState.enemies.length === 0) {
1025
- endGame(true);
1026
- }
1027
- }
1028
-
1029
- function createLoot() {
1030
- const types = ['ammo', 'health', 'armor', 'weapon'];
1031
- const type = types[Math.floor(Math.random() * types.length)];
1032
-
1033
- const loot = {
1034
- id: Date.now() + Math.random(),
1035
- x: Math.random() * (window.innerWidth - 30),
1036
- y: Math.random() * (window.innerHeight - 30),
1037
- type
1038
- };
1039
-
1040
- gameState.loot.push(loot);
1041
-
1042
- const lootElement = document.createElement('div');
1043
- lootElement.className = 'loot-item';
1044
- lootElement.id = `loot-${loot.id}`;
1045
-
1046
- // Set different icons for different loot types
1047
- switch(type) {
1048
- case 'ammo':
1049
- lootElement.innerHTML = '<i class="fas fa-bullseye text-yellow-500 text-xl"></i>';
1050
- break;
1051
- case 'health':
1052
- lootElement.innerHTML = '<i class="fas fa-heart text-red-500 text-xl"></i>';
1053
- break;
1054
- case 'armor':
1055
- lootElement.innerHTML = '<i class="fas fa-shield-alt text-blue-400 text-xl"></i>';
1056
- break;
1057
- case 'weapon':
1058
- lootElement.innerHTML = '<i class="fas fa-gun text-gray-300 text-xl"></i>';
1059
- break;
1060
- }
1061
-
1062
- lootElement.style.left = `${loot.x}px`;
1063
- lootElement.style.top = `${loot.y}px`;
1064
- gameScreen.appendChild(lootElement);
1065
- }
1066
-
1067
- function collectLoot(loot) {
1068
- // Apply loot effect
1069
- switch(loot.type) {
1070
- case 'ammo':
1071
- gameState.player.weapons[gameState.player.activeWeapon].ammo =
1072
- gameState.player.weapons[gameState.player.activeWeapon].maxAmmo;
1073
- break;
1074
- case 'health':
1075
- gameState.player.health = Math.min(100, gameState.player.health + 25);
1076
- break;
1077
- case 'armor':
1078
- gameState.player.armor = Math.min(100, gameState.player.armor + 25);
1079
- break;
1080
- case 'weapon':
1081
- // In a real game, this would add a new weapon
1082
- break;
1083
- }
1084
-
1085
- // Remove from array
1086
- gameState.loot = gameState.loot.filter(l => l.id !== loot.id);
1087
-
1088
- // Remove from DOM
1089
- const lootElement = document.getElementById(`loot-${loot.id}`);
1090
- if (lootElement) {
1091
- lootElement.remove();
1092
- }
1093
- }
1094
-
1095
- function shoot(fromX, fromY, toX, toY, fromPlayer) {
1096
- const id = Date.now() + Math.random();
1097
-
1098
- // Calculate direction
1099
- const dx = toX - fromX;
1100
- const dy = toY - fromY;
1101
- const distance = Math.sqrt(dx * dx + dy * dy);
1102
- const speed = 10;
1103
-
1104
- const bullet = {
1105
- id,
1106
- x: fromX,
1107
- y: fromY,
1108
- vx: (dx / distance) * speed,
1109
- vy: (dy / distance) * speed,
1110
- fromPlayer
1111
- };
1112
-
1113
- gameState.bullets.push(bullet);
1114
-
1115
- // Create bullet element
1116
- const bulletElement = document.createElement('div');
1117
- bulletElement.className = 'bullet';
1118
- bulletElement.id = `bullet-${id}`;
1119
- bulletElement.style.left = `${fromX}px`;
1120
- bulletElement.style.top = `${fromY}px`;
1121
- gameScreen.appendChild(bulletElement);
1122
- }
1123
-
1124
- function removeBullet(id) {
1125
- // Remove from array
1126
- gameState.bullets = gameState.bullets.filter(b => b.id !== id);
1127
-
1128
- // Remove from DOM
1129
- const bulletElement = document.getElementById(`bullet-${id}`);
1130
- if (bulletElement) {
1131
- bulletElement.remove();
1132
- }
1133
- }
1134
-
1135
- function takeDamage(amount) {
1136
- // Apply damage to armor first
1137
- if (gameState.player.armor > 0) {
1138
- const armorDamage = Math.min(amount, gameState.player.armor);
1139
- gameState.player.armor -= armorDamage;
1140
- amount -= armorDamage;
1141
- }
1142
-
1143
- // Apply remaining damage to health
1144
- gameState.player.health = Math.max(0, gameState.player.health - amount);
1145
-
1146
- // Show damage effect
1147
- damageEffect.style.opacity = '1';
1148
- setTimeout(() => {
1149
- damageEffect.style.opacity = '0';
1150
- }, 200);
1151
-
1152
- // Check if player died
1153
- if (gameState.player.health <= 0) {
1154
- endGame(false);
1155
- }
1156
- }
1157
-
1158
- function endGame(win) {
1159
- gameState.gameActive = false;
1160
-
1161
- // Show game over screen
1162
- gameScreen.style.display = 'none';
1163
- gameOverScreen.style.display = 'flex';
1164
-
1165
- // Update game over message
1166
- const gameOverTitle = document.querySelector('#game-over-screen h1');
1167
- const gameOverMessage = document.querySelector('#game-over-screen p span');
1168
-
1169
- if (win) {
1170
- gameOverTitle.textContent = 'VICTORY!';
1171
- gameOverTitle.className = 'text-5xl font-bold text-green-500 mb-4';
1172
- gameOverMessage.textContent = '#1';
1173
- } else {
1174
- gameOverTitle.textContent = 'GAME OVER';
1175
- gameOverTitle.className = 'text-5xl font-bold text-red-500 mb-4';
1176
- gameOverMessage.textContent = `#${Math.floor(Math.random() * 10) + 1}`;
1177
- }
1178
- }
1179
-
1180
- // Event listeners for controls (simplified for this demo)
1181
- document.addEventListener('keydown', (e) => {
1182
- if (!gameState.gameActive) return;
1183
-
1184
- const speed = 5;
1185
-
1186
- switch(e.key) {
1187
- case 'ArrowUp':
1188
- case 'w':
1189
- gameState.player.y = Math.max(0, gameState.player.y - speed);
1190
- break;
1191
- case 'ArrowDown':
1192
- case 's':
1193
- gameState.player.y = Math.min(window.innerHeight - 50, gameState.player.y + speed);
1194
- break;
1195
- case 'ArrowLeft':
1196
- case 'a':
1197
- gameState.player.x = Math.max(0, gameState.player.x - speed);
1198
- break;
1199
- case 'ArrowRight':
1200
- case 'd':
1201
- gameState.player.x = Math.min(window.innerWidth - 50, gameState.player.x + speed);
1202
- break;
1203
- case ' ':
1204
- // Shoot in direction of mouse
1205
- const rect = gameScreen.getBoundingClientRect();
1206
- const mouseX = e.clientX - rect.left;
1207
- const mouseY = e.clientY - rect.top;
1208
-
1209
- shoot(
1210
- gameState.player.x + 25,
1211
- gameState.player.y + 25,
1212
- mouseX,
1213
- mouseY,
1214
- true
1215
- );
1216
- break;
1217
- }
1218
- });
1219
-
1220
- // Mouse click to shoot
1221
- gameScreen.addEventListener('click', (e) => {
1222
- if (!gameState.gameActive) return;
1223
-
1224
- const rect = gameScreen.getBoundingClientRect();
1225
- const mouseX = e.clientX - rect.left;
1226
- const mouseY = e.clientY - rect.top;
1227
-
1228
- shoot(
1229
- gameState.player.x + 25,
1230
- gameState.player.y + 25,
1231
- mouseX,
1232
- mouseY,
1233
- true
1234
- );
1235
  });
1236
  </script>
1237
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=D110/game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Eternity Browser</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @keyframes dragonPulse {
 
 
 
 
 
11
  0% { transform: scale(1); }
12
+ 50% { transform: scale(1.1); }
13
  100% { transform: scale(1); }
14
  }
15
 
16
+ .dragon-logo {
17
+ animation: dragonPulse 2s infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
 
20
+ .tab-active {
21
+ border-top: 3px solid #3b82f6;
22
+ background: linear-gradient(to bottom, #ffffff, #f0f4ff);
 
 
 
 
 
23
  }
24
 
25
+ .tab-inactive {
26
+ background: linear-gradient(to bottom, #e5e7eb, #f3f4f6);
 
 
 
 
 
 
27
  }
28
 
29
+ .tab-close:hover {
30
+ background-color: #fee2e2;
31
+ color: #dc2626;
 
 
 
 
32
  }
33
 
34
+ .url-bar:focus {
35
+ box-shadow: 0 0 0 2px #3b82f6;
 
 
36
  }
37
 
38
+ .toolbar-btn:hover {
39
+ background-color: #e0e7ff;
 
 
 
 
 
 
 
 
40
  }
41
 
42
+ .bookmark-btn:hover {
43
+ background-color: #fee2e2;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
  </style>
46
  </head>
47
+ <body class="bg-gray-50 h-screen flex flex-col overflow-hidden">
48
+ <!-- Browser Header -->
49
+ <div class="bg-white border-b border-gray-200 flex items-center px-2 py-1">
50
+ <!-- Dragon Logo -->
51
+ <div class="flex items-center mr-4">
52
+ <div class="dragon-logo text-red-500 text-2xl mr-2">
53
+ <i class="fas fa-dragon"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </div>
55
+ <span class="text-xl font-bold text-red-600">Eternity</span>
56
  </div>
57
 
58
+ <!-- Menu Buttons -->
59
+ <div class="flex space-x-1">
60
+ <button class="toolbar-btn p-2 rounded-full text-blue-600">
61
+ <i class="fas fa-bars"></i>
62
  </button>
63
+ <button class="toolbar-btn p-2 rounded-full text-blue-600">
64
+ <i class="fas fa-book"></i>
65
  </button>
66
+ <button class="toolbar-btn p-2 rounded-full text-blue-600">
67
+ <i class="fas fa-cog"></i>
68
  </button>
69
  </div>
70
  </div>
71
 
72
+ <!-- Tab Bar -->
73
+ <div class="bg-gray-100 flex items-center px-2 pt-2 pb-0 overflow-x-auto">
74
+ <!-- New Tab Button -->
75
+ <button class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 mr-2">
76
+ <i class="fas fa-plus"></i>
77
+ </button>
78
+
79
+ <!-- Tabs -->
80
+ <div class="flex space-x-1">
81
+ <!-- Active Tab -->
82
+ <div class="tab-active flex items-center rounded-t-lg px-3 py-1 border border-gray-200 border-b-0 shadow-sm min-w-[200px] max-w-[250px]">
83
+ <i class="fas fa-lock text-gray-500 text-xs mr-2"></i>
84
+ <span class="truncate flex-1">Eternity Browser Home</span>
85
+ <button class="tab-close w-5 h-5 rounded-full flex items-center justify-center ml-2">
86
+ <i class="fas fa-times text-xs"></i>
87
  </button>
88
  </div>
89
 
90
+ <!-- Inactive Tabs -->
91
+ <div class="tab-inactive flex items-center rounded-t-lg px-3 py-1 border border-gray-200 border-b-0 shadow-sm min-w-[200px] max-w-[250px]">
92
+ <i class="fas fa-globe text-gray-500 text-xs mr-2"></i>
93
+ <span class="truncate flex-1">Google Search - Eternity Browser</span>
94
+ <button class="tab-close w-5 h-5 rounded-full flex items-center justify-center ml-2">
95
+ <i class="fas fa-times text-xs"></i>
96
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </div>
98
 
99
+ <div class="tab-inactive flex items-center rounded-t-lg px-3 py-1 border border-gray-200 border-b-0 shadow-sm min-w-[200px] max-w-[250px]">
100
+ <i class="fas fa-unlock text-gray-500 text-xs mr-2"></i>
101
+ <span class="truncate flex-1">GitHub - Create your own browser</span>
102
+ <button class="tab-close w-5 h-5 rounded-full flex items-center justify-center ml-2">
103
+ <i class="fas fa-times text-xs"></i>
104
  </button>
105
  </div>
106
  </div>
107
  </div>
108
 
109
+ <!-- Toolbar -->
110
+ <div class="bg-white border-b border-gray-200 flex items-center px-4 py-2">
111
+ <!-- Navigation Buttons -->
112
+ <div class="flex space-x-1 mr-4">
113
+ <button class="toolbar-btn w-8 h-8 rounded-full text-gray-600 disabled opacity-50">
114
+ <i class="fas fa-arrow-left"></i>
115
+ </button>
116
+ <button class="toolbar-btn w-8 h-8 rounded-full text-gray-600">
117
+ <i class="fas fa-arrow-right"></i>
118
+ </button>
119
+ <button class="toolbar-btn w-8 h-8 rounded-full text-gray-600">
120
+ <i class="fas fa-redo"></i>
121
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </div>
 
 
 
 
 
 
123
 
124
+ <!-- URL Bar -->
125
+ <div class="flex-1 flex items-center">
126
+ <div class="url-bar flex-1 bg-gray-100 rounded-full flex items-center px-4 py-2 border border-gray-300">
127
+ <i class="fas fa-lock text-green-500 mr-2"></i>
128
+ <input type="text" value="https://eternitybrowser.com/home" class="bg-transparent outline-none flex-1 text-sm">
129
+ <div class="flex space-x-2 ml-2">
130
+ <button class="w-5 h-5 rounded-full text-gray-500 hover:bg-gray-200">
131
+ <i class="fas fa-star text-xs"></i>
132
+ </button>
133
+ <button class="w-5 h-5 rounded-full text-gray-500 hover:bg-gray-200">
134
+ <i class="fas fa-ellipsis-h text-xs"></i>
135
+ </button>
 
 
 
 
 
 
 
 
 
 
136
  </div>
137
  </div>
138
  </div>
139
 
140
+ <!-- User Menu -->
141
+ <div class="flex space-x-1 ml-4">
142
+ <button class="toolbar-btn w-8 h-8 rounded-full text-blue-600">
143
+ <i class="fas fa-user-circle"></i>
144
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  </div>
146
+ </div>
147
+
148
+ <!-- Bookmarks Bar -->
149
+ <div class="bg-white border-b border-gray-200 flex items-center px-4 py-1">
150
+ <button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2">
151
+ <i class="fas fa-home text-red-500 mr-1"></i>
152
+ <span>Home</span>
153
+ </button>
154
+ <button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2">
155
+ <i class="fab fa-youtube text-red-500 mr-1"></i>
156
+ <span>YouTube</span>
157
+ </button>
158
+ <button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2">
159
+ <i class="fab fa-twitter text-blue-400 mr-1"></i>
160
+ <span>Twitter</span>
161
+ </button>
162
+ <button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2">
163
+ <i class="fab fa-github text-gray-700 mr-1"></i>
164
+ <span>GitHub</span>
165
+ </button>
166
+ <button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center">
167
+ <i class="fas fa-shopping-cart text-blue-600 mr-1"></i>
168
+ <span>Amazon</span>
169
+ </button>
170
+ </div>
171
+
172
+ <!-- Web Content Area -->
173
+ <div class="flex-1 bg-white overflow-hidden">
174
+ <!-- New Tab Page -->
175
+ <div class="h-full flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-white p-8">
176
+ <div class="dragon-logo text-red-500 text-6xl mb-4">
177
+ <i class="fas fa-dragon"></i>
178
  </div>
179
+ <h1 class="text-4xl font-bold text-red-600 mb-2">Eternity Browser</h1>
180
+ <p class="text-gray-600 mb-8">The browser that lasts forever</p>
181
+
182
+ <!-- Search Box -->
183
+ <div class="w-full max-w-2xl mb-8">
184
+ <div class="relative">
185
+ <input type="text" placeholder="Search or enter website name"
186
+ class="w-full px-5 py-3 rounded-full border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
187
+ <button class="absolute right-3 top-3 text-blue-600">
188
+ <i class="fas fa-search"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  </button>
190
  </div>
191
+ </div>
192
+
193
+ <!-- Quick Links -->
194
+ <div class="grid grid-cols-5 gap-4 w-full max-w-4xl">
195
+ <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-blue-50">
196
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-2">
197
+ <i class="fab fa-google"></i>
198
+ </div>
199
+ <span class="text-sm">Google</span>
200
+ </a>
201
+ <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-red-50">
202
+ <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-2">
203
+ <i class="fab fa-youtube"></i>
204
+ </div>
205
+ <span class="text-sm">YouTube</span>
206
+ </a>
207
+ <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-blue-50">
208
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-400 mb-2">
209
+ <i class="fab fa-twitter"></i>
210
+ </div>
211
+ <span class="text-sm">Twitter</span>
212
+ </a>
213
+ <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-purple-50">
214
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-2">
215
+ <i class="fab fa-twitch"></i>
216
+ </div>
217
+ <span class="text-sm">Twitch</span>
218
+ </a>
219
+ <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100">
220
+ <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 mb-2">
221
+ <i class="fab fa-github"></i>
222
+ </div>
223
+ <span class="text-sm">GitHub</span>
224
+ </a>
225
  </div>
226
  </div>
227
  </div>
228
 
229
+ <!-- Status Bar -->
230
+ <div class="bg-gray-100 border-t border-gray-200 flex items-center justify-between px-4 py-1 text-xs text-gray-600">
231
+ <div>
232
+ <span class="mr-3"><i class="fas fa-lock text-green-500 mr-1"></i> Secure connection</span>
233
+ <span><i class="fas fa-shield-alt text-blue-500 mr-1"></i> Protected by Eternity</span>
234
+ </div>
235
+ <div>
236
+ <span class="mr-3"><i class="fas fa-desktop mr-1"></i> 100%</span>
237
+ <span><i class="fas fa-wifi mr-1"></i> Online</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
238
  </div>
239
  </div>
240
+
241
  <script>
242
+ // Simple tab switching functionality
243
+ document.querySelectorAll('.tab-inactive').forEach(tab => {
244
+ tab.addEventListener('click', function() {
245
+ // Remove active class from all tabs
246
+ document.querySelectorAll('.tab-active').forEach(t => {
247
+ t.classList.remove('tab-active');
248
+ t.classList.add('tab-inactive');
249
+ t.classList.remove('border-blue-500');
250
+ t.classList.add('border-gray-200');
251
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
 
253
+ // Add active class to clicked tab
254
+ this.classList.remove('tab-inactive');
255
+ this.classList.add('tab-active');
256
+ this.classList.remove('border-gray-200');
257
+ this.classList.add('border-blue-500');
258
 
259
+ // Update URL bar (simplified)
260
+ const tabText = this.querySelector('span').textContent;
261
+ document.querySelector('.url-bar input').value = `https://${tabText.toLowerCase().replace(/ /g, '')}.com`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  });
263
+ });
264
 
265
+ // Close tab functionality
266
+ document.querySelectorAll('.tab-close').forEach(btn => {
267
+ btn.addEventListener('click', function(e) {
268
+ e.stopPropagation();
269
+ const tab = this.closest('.tab-active, .tab-inactive');
270
+ tab.remove();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  });
272
+ });
 
 
 
 
 
 
 
 
 
 
273
 
274
+ // Search functionality
275
+ const searchInput = document.querySelector('.url-bar input');
276
+ searchInput.addEventListener('keypress', function(e) {
277
+ if (e.key === 'Enter') {
278
+ const url = this.value;
279
+ if (!url.startsWith('http')) {
280
+ this.value = `https://${url}`;
 
 
 
 
 
281
  }
282
+ alert(`Navigating to: ${this.value}\n\nThis is a demo - actual navigation would happen in a real browser.`);
283
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
284
  });
285
  </script>
286
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=D110/game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Create me a web browser similar to chrome in white ,blue,and red colour with ared colour dragon as the logo in the name of Eternity