Hugging Face's logo

Spaces:
D110
/
game
Running

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

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1238 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Game
3
- emoji: 📉
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: game
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1238 @@
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 lang="en">
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>
1238
+ </html>
prompts.txt ADDED
File without changes