Hugging Face's logo

Spaces:
Xacodavt
/
s
Running

App Files Community
Xacodavt commited on
Commit
dad4ff6
·
verified ·
1 Parent(s): 3a95521

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1016 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: S
3
- emoji: 🐢
4
- colorFrom: blue
5
- colorTo: purple
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: s
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
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,1016 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Guerra Espacial - Gere Renda Jogando!</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
11
+
12
+ body {
13
+ font-family: 'Press Start 2P', cursive;
14
+ overflow: hidden;
15
+ background: #000;
16
+ color: #fff;
17
+ }
18
+
19
+ #gameCanvas {
20
+ background: #000;
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ z-index: 1;
25
+ }
26
+
27
+ .game-ui {
28
+ position: relative;
29
+ z-index: 2;
30
+ }
31
+
32
+ .enemy {
33
+ transition: all 0.3s ease;
34
+ }
35
+
36
+ .enemy:hover {
37
+ transform: scale(1.1);
38
+ }
39
+
40
+ .power-up {
41
+ animation: pulse 1s infinite;
42
+ }
43
+
44
+ @keyframes pulse {
45
+ 0% { transform: scale(1); }
46
+ 50% { transform: scale(1.2); }
47
+ 100% { transform: scale(1); }
48
+ }
49
+
50
+ .modal {
51
+ display: none;
52
+ position: fixed;
53
+ z-index: 100;
54
+ left: 0;
55
+ top: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ background-color: rgba(0,0,0,0.8);
59
+ }
60
+
61
+ .modal-content {
62
+ background-color: #111;
63
+ margin: 10% auto;
64
+ padding: 20px;
65
+ border: 3px solid #00ff00;
66
+ width: 80%;
67
+ max-width: 500px;
68
+ animation: modalOpen 0.4s;
69
+ }
70
+
71
+ @keyframes modalOpen {
72
+ from {opacity: 0; transform: translateY(-50px);}
73
+ to {opacity: 1; transform: translateY(0);}
74
+ }
75
+
76
+ .close-btn {
77
+ color: #aaa;
78
+ float: right;
79
+ font-size: 28px;
80
+ font-weight: bold;
81
+ cursor: pointer;
82
+ }
83
+
84
+ .close-btn:hover {
85
+ color: #fff;
86
+ }
87
+
88
+ .progress-bar {
89
+ height: 20px;
90
+ background-color: #333;
91
+ border-radius: 10px;
92
+ overflow: hidden;
93
+ }
94
+
95
+ .progress-fill {
96
+ height: 100%;
97
+ background: linear-gradient(90deg, #ff0000, #ff9900);
98
+ transition: width 0.3s;
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="relative h-screen w-full">
103
+ <!-- Game Canvas -->
104
+ <canvas id="gameCanvas" class="w-full h-full"></canvas>
105
+
106
+ <!-- Game UI -->
107
+ <div class="game-ui absolute top-0 left-0 w-full p-4">
108
+ <div class="flex justify-between items-center">
109
+ <div class="bg-black bg-opacity-70 p-3 rounded-lg">
110
+ <div class="flex items-center space-x-4">
111
+ <div>
112
+ <p class="text-yellow-400 text-sm">PONTOS</p>
113
+ <p id="score" class="text-white text-xl">0</p>
114
+ </div>
115
+ <div>
116
+ <p class="text-red-400 text-sm">VIDAS</p>
117
+ <div class="flex space-x-2">
118
+ <i class="fas fa-heart text-red-500"></i>
119
+ <i class="fas fa-heart text-red-500"></i>
120
+ <i class="fas fa-heart text-red-500"></i>
121
+ </div>
122
+ </div>
123
+ <div>
124
+ <p class="text-blue-400 text-sm">MUNIÇÃO</p>
125
+ <div class="progress-bar w-32">
126
+ <div id="ammo-bar" class="progress-fill" style="width: 100%"></div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="bg-black bg-opacity-70 p-3 rounded-lg">
133
+ <div class="flex items-center space-x-4">
134
+ <div>
135
+ <p class="text-green-400 text-sm">MOEDAS</p>
136
+ <div class="flex items-center">
137
+ <i class="fas fa-coins text-yellow-500 mr-2"></i>
138
+ <p id="coins" class="text-white text-xl">0</p>
139
+ </div>
140
+ </div>
141
+ <button id="shop-btn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-white">
142
+ <i class="fas fa-shopping-cart mr-2"></i>Loja
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Start Screen -->
150
+ <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-90 z-10">
151
+ <h1 class="text-5xl md:text-6xl font-bold text-green-400 mb-8">GUERRA ESPACIAL</h1>
152
+ <p class="text-xl text-white mb-12">Proteja a Terra e ganhe recompensas!</p>
153
+
154
+ <div class="w-full max-w-md bg-gray-900 p-8 rounded-lg">
155
+ <div class="mb-6">
156
+ <h2 class="text-2xl text-yellow-400 mb-4">Como Jogar</h2>
157
+ <ul class="text-gray-300 space-y-2">
158
+ <li class="flex items-start">
159
+ <i class="fas fa-arrow-up text-green-400 mt-1 mr-2"></i>
160
+ <span>Use WASD ou setas para mover</span>
161
+ </li>
162
+ <li class="flex items-start">
163
+ <i class="fas fa-mouse-pointer text-green-400 mt-1 mr-2"></i>
164
+ <span>Clique para atirar</span>
165
+ </li>
166
+ <li class="flex items-start">
167
+ <i class="fas fa-bolt text-green-400 mt-1 mr-2"></i>
168
+ <span>Colete power-ups para vantagens</span>
169
+ </li>
170
+ <li class="flex items-start">
171
+ <i class="fas fa-coins text-green-400 mt-1 mr-2"></i>
172
+ <span>Ganhe moedas destruindo inimigos</span>
173
+ </li>
174
+ </ul>
175
+ </div>
176
+
177
+ <div class="flex flex-col space-y-4">
178
+ <button id="start-btn" class="bg-green-600 hover:bg-green-700 text-white py-3 px-6 rounded-lg text-xl transition-all transform hover:scale-105">
179
+ <i class="fas fa-play mr-2"></i> Começar Jogo
180
+ </button>
181
+ <button id="leaderboard-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg transition-all transform hover:scale-105">
182
+ <i class="fas fa-trophy mr-2"></i> Ranking
183
+ </button>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="mt-8 text-gray-400 text-sm">
188
+ <p>Jogue diariamente para ganhar recompensas especiais!</p>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Game Over Screen -->
193
+ <div id="game-over-screen" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-90 z-20">
194
+ <h1 class="text-5xl text-red-500 mb-4">FIM DE JOGO</h1>
195
+ <div class="bg-gray-900 p-8 rounded-lg max-w-md w-full">
196
+ <div class="text-center mb-6">
197
+ <p class="text-xl text-white mb-2">Sua pontuação:</p>
198
+ <p id="final-score" class="text-4xl text-yellow-400">0</p>
199
+ </div>
200
+
201
+ <div class="text-center mb-6">
202
+ <p class="text-xl text-white mb-2">Moedas ganhas:</p>
203
+ <div class="flex items-center justify-center">
204
+ <i class="fas fa-coins text-yellow-500 text-3xl mr-2"></i>
205
+ <p id="earned-coins" class="text-3xl text-yellow-400">0</p>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="flex flex-col space-y-4">
210
+ <button id="restart-btn" class="bg-green-600 hover:bg-green-700 text-white py-3 px-6 rounded-lg text-xl">
211
+ <i class="fas fa-redo mr-2"></i> Jogar Novamente
212
+ </button>
213
+ <button id="share-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg">
214
+ <i class="fas fa-share-alt mr-2"></i> Compartilhar
215
+ </button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Shop Modal -->
221
+ <div id="shop-modal" class="modal">
222
+ <div class="modal-content">
223
+ <span class="close-btn">&times;</span>
224
+ <h2 class="text-2xl text-purple-400 mb-6 text-center">LOJA DE MELHORIAS</h2>
225
+
226
+ <div class="grid grid-cols-1 gap-4 mb-6">
227
+ <div class="bg-gray-800 p-4 rounded-lg flex justify-between items-center">
228
+ <div>
229
+ <h3 class="text-yellow-400">Arma Dupla</h3>
230
+ <p class="text-gray-300 text-sm">Atire duas balas simultaneamente</p>
231
+ </div>
232
+ <button class="buy-btn bg-green-600 hover:bg-green-700 px-4 py-2 rounded" data-item="dual-gun" data-price="500">
233
+ <i class="fas fa-coins mr-1"></i> 500
234
+ </button>
235
+ </div>
236
+
237
+ <div class="bg-gray-800 p-4 rounded-lg flex justify-between items-center">
238
+ <div>
239
+ <h3 class="text-yellow-400">Escudo</h3>
240
+ <p class="text-gray-300 text-sm">+1 vida extra</p>
241
+ </div>
242
+ <button class="buy-btn bg-green-600 hover:bg-green-700 px-4 py-2 rounded" data-item="shield" data-price="300">
243
+ <i class="fas fa-coins mr-1"></i> 300
244
+ </button>
245
+ </div>
246
+
247
+ <div class="bg-gray-800 p-4 rounded-lg flex justify-between items-center">
248
+ <div>
249
+ <h3 class="text-yellow-400">Recarga Rápida</h3>
250
+ <p class="text-gray-300 text-sm">Recarrega 50% mais rápido</p>
251
+ </div>
252
+ <button class="buy-btn bg-green-600 hover:bg-green-700 px-4 py-2 rounded" data-item="fast-reload" data-price="700">
253
+ <i class="fas fa-coins mr-1"></i> 700
254
+ </button>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="bg-gray-900 p-4 rounded-lg">
259
+ <h3 class="text-yellow-400 mb-2">Suas Moedas</h3>
260
+ <div class="flex items-center">
261
+ <i class="fas fa-coins text-yellow-500 text-2xl mr-2"></i>
262
+ <p id="shop-coins" class="text-2xl">0</p>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="mt-6 text-center">
267
+ <p class="text-gray-400 text-sm">Quer mais moedas? Assista a um anúncio!</p>
268
+ <button id="watch-ad-btn" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg mt-2">
269
+ <i class="fas fa-ad mr-2"></i> Ganhar +50 Moedas
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Leaderboard Modal -->
276
+ <div id="leaderboard-modal" class="modal">
277
+ <div class="modal-content">
278
+ <span class="close-btn">&times;</span>
279
+ <h2 class="text-2xl text-yellow-400 mb-6 text-center">RANKING DOS MELHORES</h2>
280
+
281
+ <div class="overflow-y-auto max-h-96">
282
+ <table class="w-full">
283
+ <thead>
284
+ <tr class="border-b border-gray-700">
285
+ <th class="text-left py-2 px-4">Posição</th>
286
+ <th class="text-left py-2 px-4">Jogador</th>
287
+ <th class="text-right py-2 px-4">Pontos</th>
288
+ </tr>
289
+ </thead>
290
+ <tbody id="leaderboard-body">
291
+ <!-- Filled by JavaScript -->
292
+ </tbody>
293
+ </table>
294
+ </div>
295
+
296
+ <div class="mt-6 text-center">
297
+ <button id="close-leaderboard-btn" class="bg-gray-700 hover:bg-gray-600 px-6 py-2 rounded-lg">
298
+ Fechar
299
+ </button>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Daily Reward Modal -->
305
+ <div id="daily-reward-modal" class="modal">
306
+ <div class="modal-content">
307
+ <span class="close-btn">&times;</span>
308
+ <h2 class="text-2xl text-yellow-400 mb-6 text-center">RECOMPENSA DIÁRIA</h2>
309
+
310
+ <div class="text-center mb-8">
311
+ <p class="text-xl mb-4">Seu prêmio de hoje:</p>
312
+ <div class="bg-gray-800 p-6 rounded-full inline-block border-4 border-yellow-500">
313
+ <i class="fas fa-coins text-yellow-500 text-5xl"></i>
314
+ </div>
315
+ <p class="text-2xl mt-4 text-yellow-400">100 Moedas</p>
316
+ </div>
317
+
318
+ <div class="progress-bar w-full mb-4">
319
+ <div class="progress-fill" style="width: 60%"></div>
320
+ </div>
321
+
322
+ <p class="text-center text-gray-400 text-sm">
323
+ Volte amanhã para ganhar 150 moedas! (3/7 dias consecutivos)
324
+ </p>
325
+
326
+ <div class="mt-6 text-center">
327
+ <button id="claim-reward-btn" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg text-xl">
328
+ <i class="fas fa-gift mr-2"></i> Resgatar Prêmio
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <script>
335
+ // Game Variables
336
+ let canvas, ctx;
337
+ let gameRunning = false;
338
+ let score = 0;
339
+ let coins = 0;
340
+ let lives = 3;
341
+ let ammo = 100;
342
+ let player = {
343
+ x: 0,
344
+ y: 0,
345
+ width: 50,
346
+ height: 50,
347
+ speed: 5,
348
+ color: '#00ff00'
349
+ };
350
+
351
+ let bullets = [];
352
+ let enemies = [];
353
+ let powerUps = [];
354
+ let keys = {};
355
+ let lastShot = 0;
356
+ let shotDelay = 300; // ms
357
+ let enemySpawnRate = 2000; // ms
358
+ let lastEnemySpawn = 0;
359
+ let gameTime = 0;
360
+ let upgrades = {
361
+ dualGun: false,
362
+ shield: false,
363
+ fastReload: false
364
+ };
365
+
366
+ // DOM Elements
367
+ const startScreen = document.getElementById('start-screen');
368
+ const gameOverScreen = document.getElementById('game-over-screen');
369
+ const scoreDisplay = document.getElementById('score');
370
+ const coinsDisplay = document.getElementById('coins');
371
+ const finalScoreDisplay = document.getElementById('final-score');
372
+ const earnedCoinsDisplay = document.getElementById('earned-coins');
373
+ const ammoBar = document.getElementById('ammo-bar');
374
+ const startBtn = document.getElementById('start-btn');
375
+ const restartBtn = document.getElementById('restart-btn');
376
+ const shareBtn = document.getElementById('share-btn');
377
+ const shopBtn = document.getElementById('shop-btn');
378
+ const shopModal = document.getElementById('shop-modal');
379
+ const shopCoinsDisplay = document.getElementById('shop-coins');
380
+ const watchAdBtn = document.getElementById('watch-ad-btn');
381
+ const leaderboardBtn = document.getElementById('leaderboard-btn');
382
+ const leaderboardModal = document.getElementById('leaderboard-modal');
383
+ const leaderboardBody = document.getElementById('leaderboard-body');
384
+ const dailyRewardModal = document.getElementById('daily-reward-modal');
385
+ const claimRewardBtn = document.getElementById('claim-reward-btn');
386
+
387
+ // Close buttons
388
+ const closeButtons = document.querySelectorAll('.close-btn');
389
+ closeButtons.forEach(btn => {
390
+ btn.addEventListener('click', () => {
391
+ document.querySelectorAll('.modal').forEach(modal => {
392
+ modal.style.display = 'none';
393
+ });
394
+ });
395
+ });
396
+
397
+ // Initialize game
398
+ function init() {
399
+ canvas = document.getElementById('gameCanvas');
400
+ ctx = canvas.getContext('2d');
401
+
402
+ // Set canvas size
403
+ resizeCanvas();
404
+
405
+ // Event listeners
406
+ window.addEventListener('resize', resizeCanvas);
407
+ canvas.addEventListener('click', shoot);
408
+ document.addEventListener('keydown', keyDown);
409
+ document.addEventListener('keyup', keyUp);
410
+
411
+ startBtn.addEventListener('click', startGame);
412
+ restartBtn.addEventListener('click', restartGame);
413
+ shareBtn.addEventListener('click', shareScore);
414
+ shopBtn.addEventListener('click', openShop);
415
+ watchAdBtn.addEventListener('click', watchAd);
416
+ leaderboardBtn.addEventListener('click', openLeaderboard);
417
+ claimRewardBtn.addEventListener('click', claimDailyReward);
418
+
419
+ // Check for daily reward
420
+ checkDailyReward();
421
+
422
+ // Draw start screen
423
+ draw();
424
+ }
425
+
426
+ // Resize canvas to window size
427
+ function resizeCanvas() {
428
+ canvas.width = window.innerWidth;
429
+ canvas.height = window.innerHeight;
430
+
431
+ // Center player
432
+ if (!gameRunning) {
433
+ player.x = canvas.width / 2 - player.width / 2;
434
+ player.y = canvas.height - player.height - 20;
435
+ }
436
+ }
437
+
438
+ // Start game
439
+ function startGame() {
440
+ startScreen.style.display = 'none';
441
+ gameRunning = true;
442
+ score = 0;
443
+ coins = 0;
444
+ lives = 3;
445
+ ammo = 100;
446
+ bullets = [];
447
+ enemies = [];
448
+ powerUps = [];
449
+ gameTime = 0;
450
+
451
+ // Reset upgrades
452
+ upgrades = {
453
+ dualGun: false,
454
+ shield: false,
455
+ fastReload: false
456
+ };
457
+
458
+ // Center player
459
+ player.x = canvas.width / 2 - player.width / 2;
460
+ player.y = canvas.height - player.height - 20;
461
+
462
+ // Start game loop
463
+ requestAnimationFrame(gameLoop);
464
+ }
465
+
466
+ // Game loop
467
+ function gameLoop(timestamp) {
468
+ if (!gameRunning) return;
469
+
470
+ // Calculate delta time
471
+ let deltaTime = timestamp - lastTime || 0;
472
+ lastTime = timestamp;
473
+ gameTime += deltaTime;
474
+
475
+ // Update game state
476
+ update(deltaTime);
477
+
478
+ // Draw everything
479
+ draw();
480
+
481
+ // Continue loop
482
+ requestAnimationFrame(gameLoop);
483
+ }
484
+
485
+ let lastTime = 0;
486
+
487
+ // Update game state
488
+ function update(deltaTime) {
489
+ // Move player
490
+ if (keys['ArrowLeft'] || keys['a']) {
491
+ player.x -= player.speed;
492
+ }
493
+ if (keys['ArrowRight'] || keys['d']) {
494
+ player.x += player.speed;
495
+ }
496
+ if (keys['ArrowUp'] || keys['w']) {
497
+ player.y -= player.speed;
498
+ }
499
+ if (keys['ArrowDown'] || keys['s']) {
500
+ player.y += player.speed;
501
+ }
502
+
503
+ // Keep player in bounds
504
+ player.x = Math.max(0, Math.min(canvas.width - player.width, player.x));
505
+ player.y = Math.max(0, Math.min(canvas.height - player.height, player.y));
506
+
507
+ // Spawn enemies
508
+ if (gameTime - lastEnemySpawn > enemySpawnRate) {
509
+ spawnEnemy();
510
+ lastEnemySpawn = gameTime;
511
+
512
+ // Increase difficulty
513
+ if (score > 0 && score % 500 === 0) {
514
+ enemySpawnRate = Math.max(500, enemySpawnRate - 100);
515
+ }
516
+ }
517
+
518
+ // Spawn power-ups occasionally
519
+ if (Math.random() < 0.002) {
520
+ spawnPowerUp();
521
+ }
522
+
523
+ // Update bullets
524
+ for (let i = bullets.length - 1; i >= 0; i--) {
525
+ bullets[i].y -= bullets[i].speed;
526
+
527
+ // Remove if off screen
528
+ if (bullets[i].y < 0) {
529
+ bullets.splice(i, 1);
530
+ continue;
531
+ }
532
+
533
+ // Check for enemy hits
534
+ for (let j = enemies.length - 1; j >= 0; j--) {
535
+ if (checkCollision(bullets[i], enemies[j])) {
536
+ // Hit enemy
537
+ enemies[j].health -= bullets[i].damage;
538
+
539
+ // Remove bullet
540
+ bullets.splice(i, 1);
541
+
542
+ // Check if enemy is dead
543
+ if (enemies[j].health <= 0) {
544
+ // Add score
545
+ score += enemies[j].points;
546
+ coins += enemies[j].coins;
547
+
548
+ // Remove enemy
549
+ enemies.splice(j, 1);
550
+ }
551
+
552
+ break;
553
+ }
554
+ }
555
+ }
556
+
557
+ // Update enemies
558
+ for (let i = enemies.length - 1; i >= 0; i--) {
559
+ enemies[i].y += enemies[i].speed;
560
+
561
+ // Remove if off screen
562
+ if (enemies[i].y > canvas.height) {
563
+ enemies.splice(i, 1);
564
+ lives--;
565
+ if (lives <= 0) {
566
+ gameOver();
567
+ }
568
+ continue;
569
+ }
570
+
571
+ // Check for player collision
572
+ if (checkCollision(player, enemies[i])) {
573
+ enemies.splice(i, 1);
574
+ lives--;
575
+ if (lives <= 0) {
576
+ gameOver();
577
+ }
578
+ }
579
+ }
580
+
581
+ // Update power-ups
582
+ for (let i = powerUps.length - 1; i >= 0; i--) {
583
+ powerUps[i].y += powerUps[i].speed;
584
+
585
+ // Remove if off screen
586
+ if (powerUps[i].y > canvas.height) {
587
+ powerUps.splice(i, 1);
588
+ continue;
589
+ }
590
+
591
+ // Check for player collision
592
+ if (checkCollision(player, powerUps[i])) {
593
+ applyPowerUp(powerUps[i].type);
594
+ powerUps.splice(i, 1);
595
+ }
596
+ }
597
+
598
+ // Regenerate ammo slowly
599
+ if (ammo < 100 && gameTime % 1000 < 16) { // ~1 ammo per second
600
+ ammo = Math.min(100, ammo + 1);
601
+ updateAmmoBar();
602
+ }
603
+
604
+ // Update UI
605
+ scoreDisplay.textContent = score;
606
+ coinsDisplay.textContent = coins;
607
+ }
608
+
609
+ // Draw everything
610
+ function draw() {
611
+ // Clear canvas
612
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
613
+
614
+ if (!gameRunning) {
615
+ // Draw start screen
616
+ ctx.fillStyle = '#000';
617
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
618
+ return;
619
+ }
620
+
621
+ // Draw background (stars)
622
+ drawBackground();
623
+
624
+ // Draw player
625
+ ctx.fillStyle = player.color;
626
+ ctx.fillRect(player.x, player.y, player.width, player.height);
627
+
628
+ // Draw bullets
629
+ ctx.fillStyle = '#ffff00';
630
+ bullets.forEach(bullet => {
631
+ ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
632
+ });
633
+
634
+ // Draw enemies
635
+ enemies.forEach(enemy => {
636
+ ctx.fillStyle = enemy.color;
637
+ ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
638
+
639
+ // Draw health bar
640
+ if (enemy.health < enemy.maxHealth) {
641
+ const healthWidth = (enemy.width * enemy.health) / enemy.maxHealth;
642
+ ctx.fillStyle = '#ff0000';
643
+ ctx.fillRect(enemy.x, enemy.y - 10, enemy.width, 5);
644
+ ctx.fillStyle = '#00ff00';
645
+ ctx.fillRect(enemy.x, enemy.y - 10, healthWidth, 5);
646
+ }
647
+ });
648
+
649
+ // Draw power-ups
650
+ powerUps.forEach(powerUp => {
651
+ ctx.fillStyle = powerUp.color;
652
+ ctx.beginPath();
653
+ ctx.arc(powerUp.x + powerUp.width/2, powerUp.y + powerUp.height/2, powerUp.width/2, 0, Math.PI * 2);
654
+ ctx.fill();
655
+
656
+ // Draw icon
657
+ ctx.fillStyle = '#fff';
658
+ ctx.font = '16px Arial';
659
+ ctx.textAlign = 'center';
660
+ ctx.textBaseline = 'middle';
661
+ ctx.fillText(powerUp.icon, powerUp.x + powerUp.width/2, powerUp.y + powerUp.height/2);
662
+ });
663
+ }
664
+
665
+ // Draw star background
666
+ function drawBackground() {
667
+ const stars = [];
668
+ const starCount = 100;
669
+
670
+ for (let i = 0; i < starCount; i++) {
671
+ if (!stars[i]) {
672
+ stars[i] = {
673
+ x: Math.random() * canvas.width,
674
+ y: Math.random() * canvas.height,
675
+ size: Math.random() * 2,
676
+ speed: 1 + Math.random() * 3
677
+ };
678
+ }
679
+
680
+ stars[i].y += stars[i].speed;
681
+ if (stars[i].y > canvas.height) {
682
+ stars[i].y = 0;
683
+ stars[i].x = Math.random() * canvas.width;
684
+ }
685
+
686
+ ctx.fillStyle = '#ffffff';
687
+ ctx.fillRect(stars[i].x, stars[i].y, stars[i].size, stars[i].size);
688
+ }
689
+ }
690
+
691
+ // Spawn enemy
692
+ function spawnEnemy() {
693
+ const size = 30 + Math.random() * 20;
694
+ const enemy = {
695
+ x: Math.random() * (canvas.width - size),
696
+ y: -size,
697
+ width: size,
698
+ height: size,
699
+ speed: 1 + Math.random() * 2,
700
+ color: `hsl(${Math.random() * 60}, 100%, 50%)`,
701
+ health: Math.floor(size / 10),
702
+ maxHealth: Math.floor(size / 10),
703
+ points: Math.floor(size),
704
+ coins: Math.floor(size / 5)
705
+ };
706
+
707
+ enemies.push(enemy);
708
+ }
709
+
710
+ // Spawn power-up
711
+ function spawnPowerUp() {
712
+ const types = ['ammo', 'life', 'coin'];
713
+ const type = types[Math.floor(Math.random() * types.length)];
714
+ const size = 20;
715
+
716
+ let color, icon;
717
+ switch (type) {
718
+ case 'ammo':
719
+ color = '#00ffff';
720
+ icon = 'A';
721
+ break;
722
+ case 'life':
723
+ color = '#ff00ff';
724
+ icon = 'L';
725
+ break;
726
+ case 'coin':
727
+ color = '#ffff00';
728
+ icon = 'C';
729
+ break;
730
+ }
731
+
732
+ const powerUp = {
733
+ x: Math.random() * (canvas.width - size),
734
+ y: -size,
735
+ width: size,
736
+ height: size,
737
+ speed: 2,
738
+ color: color,
739
+ type: type,
740
+ icon: icon
741
+ };
742
+
743
+ powerUps.push(powerUp);
744
+ }
745
+
746
+ // Apply power-up effect
747
+ function applyPowerUp(type) {
748
+ switch (type) {
749
+ case 'ammo':
750
+ ammo = Math.min(100, ammo + 30);
751
+ updateAmmoBar();
752
+ break;
753
+ case 'life':
754
+ lives = Math.min(3, lives + 1);
755
+ break;
756
+ case 'coin':
757
+ coins += 50;
758
+ break;
759
+ }
760
+ }
761
+
762
+ // Shoot bullet
763
+ function shoot(e) {
764
+ if (!gameRunning || gameOverScreen.style.display !== 'none') return;
765
+
766
+ const now = Date.now();
767
+ if (now - lastShot < shotDelay || ammo <= 0) return;
768
+
769
+ lastShot = now;
770
+ ammo -= 5;
771
+ updateAmmoBar();
772
+
773
+ if (upgrades.dualGun) {
774
+ // Shoot two bullets slightly apart
775
+ bullets.push({
776
+ x: player.x + player.width/2 - 10,
777
+ y: player.y,
778
+ width: 5,
779
+ height: 15,
780
+ speed: 10,
781
+ damage: 1
782
+ });
783
+
784
+ bullets.push({
785
+ x: player.x + player.width/2 + 5,
786
+ y: player.y,
787
+ width: 5,
788
+ height: 15,
789
+ speed: 10,
790
+ damage: 1
791
+ });
792
+ } else {
793
+ // Shoot single bullet
794
+ bullets.push({
795
+ x: player.x + player.width/2 - 2.5,
796
+ y: player.y,
797
+ width: 5,
798
+ height: 15,
799
+ speed: 10,
800
+ damage: 1
801
+ });
802
+ }
803
+ }
804
+
805
+ // Check collision between two objects
806
+ function checkCollision(obj1, obj2) {
807
+ return obj1.x < obj2.x + obj2.width &&
808
+ obj1.x + obj1.width > obj2.x &&
809
+ obj1.y < obj2.y + obj2.height &&
810
+ obj1.y + obj1.height > obj2.y;
811
+ }
812
+
813
+ // Update ammo bar
814
+ function updateAmmoBar() {
815
+ ammoBar.style.width = `${ammo}%`;
816
+
817
+ if (ammo < 20) {
818
+ ammoBar.style.background = 'linear-gradient(90deg, #ff0000, #ff6600)';
819
+ } else if (ammo < 50) {
820
+ ammoBar.style.background = 'linear-gradient(90deg, #ff6600, #ffcc00)';
821
+ } else {
822
+ ammoBar.style.background = 'linear-gradient(90deg, #00ff00, #00ccff)';
823
+ }
824
+ }
825
+
826
+ // Game over
827
+ function gameOver() {
828
+ gameRunning = false;
829
+ finalScoreDisplay.textContent = score;
830
+ earnedCoinsDisplay.textContent = coins;
831
+ gameOverScreen.style.display = 'flex';
832
+
833
+ // Save high score to localStorage
834
+ const highScores = JSON.parse(localStorage.getItem('spaceWarHighScores') || '[]');
835
+ highScores.push({
836
+ name: 'Jogador',
837
+ score: score,
838
+ date: new Date().toLocaleDateString()
839
+ });
840
+
841
+ // Sort and keep top 10
842
+ highScores.sort((a, b) => b.score - a.score);
843
+ if (highScores.length > 10) {
844
+ highScores.length = 10;
845
+ }
846
+
847
+ localStorage.setItem('spaceWarHighScores', JSON.stringify(highScores));
848
+ }
849
+
850
+ // Restart game
851
+ function restartGame() {
852
+ gameOverScreen.style.display = 'none';
853
+ startGame();
854
+ }
855
+
856
+ // Share score
857
+ function shareScore() {
858
+ if (navigator.share) {
859
+ navigator.share({
860
+ title: 'Guerra Espacial',
861
+ text: `Eu marquei ${score} pontos no Guerra Espacial! Você consegue me vencer?`,
862
+ url: window.location.href
863
+ }).catch(err => {
864
+ console.log('Erro ao compartilhar:', err);
865
+ fallbackShare();
866
+ });
867
+ } else {
868
+ fallbackShare();
869
+ }
870
+ }
871
+
872
+ // Fallback for share
873
+ function fallbackShare() {
874
+ const shareText = `Eu marquei ${score} pontos no Guerra Espacial! Você consegue me vencer? ${window.location.href}`;
875
+ prompt('Copie o texto para compartilhar:', shareText);
876
+ }
877
+
878
+ // Open shop
879
+ function openShop() {
880
+ shopCoinsDisplay.textContent = coins;
881
+ shopModal.style.display = 'block';
882
+
883
+ // Update buy buttons
884
+ document.querySelectorAll('.buy-btn').forEach(btn => {
885
+ const price = parseInt(btn.dataset.price);
886
+ if (coins >= price) {
887
+ btn.disabled = false;
888
+ btn.classList.remove('bg-gray-500');
889
+ btn.classList.add('bg-green-600', 'hover:bg-green-700');
890
+ } else {
891
+ btn.disabled = true;
892
+ btn.classList.remove('bg-green-600', 'hover:bg-green-700');
893
+ btn.classList.add('bg-gray-500');
894
+ }
895
+ });
896
+ }
897
+
898
+ // Buy item
899
+ document.querySelectorAll('.buy-btn').forEach(btn => {
900
+ btn.addEventListener('click', function() {
901
+ const item = this.dataset.item;
902
+ const price = parseInt(this.dataset.price);
903
+
904
+ if (coins >= price) {
905
+ coins -= price;
906
+ coinsDisplay.textContent = coins;
907
+ shopCoinsDisplay.textContent = coins;
908
+
909
+ switch (item) {
910
+ case 'dual-gun':
911
+ upgrades.dualGun = true;
912
+ break;
913
+ case 'shield':
914
+ upgrades.shield = true;
915
+ lives = Math.min(3, lives + 1);
916
+ break;
917
+ case 'fast-reload':
918
+ upgrades.fastReload = true;
919
+ shotDelay = 200; // Faster shooting
920
+ break;
921
+ }
922
+
923
+ // Update UI
924
+ openShop();
925
+ }
926
+ });
927
+ });
928
+
929
+ // Watch ad for coins
930
+ function watchAd() {
931
+ // Simulate watching an ad
932
+ setTimeout(() => {
933
+ coins += 50;
934
+ coinsDisplay.textContent = coins;
935
+ shopCoinsDisplay.textContent = coins;
936
+ openShop();
937
+
938
+ // Show message
939
+ alert('Obrigado por assistir! Você ganhou 50 moedas!');
940
+ }, 1000);
941
+ }
942
+
943
+ // Open leaderboard
944
+ function openLeaderboard() {
945
+ const highScores = JSON.parse(localStorage.getItem('spaceWarHighScores') || '[]');
946
+ leaderboardBody.innerHTML = '';
947
+
948
+ highScores.forEach((score, index) => {
949
+ const row = document.createElement('tr');
950
+ row.className = 'border-b border-gray-700';
951
+
952
+ const posCell = document.createElement('td');
953
+ posCell.className = 'py-2 px-4';
954
+ posCell.textContent = index + 1;
955
+
956
+ const nameCell = document.createElement('td');
957
+ nameCell.className = 'py-2 px-4';
958
+ nameCell.textContent = score.name;
959
+
960
+ const scoreCell = document.createElement('td');
961
+ scoreCell.className = 'py-2 px-4 text-right';
962
+ scoreCell.textContent = score.score;
963
+
964
+ row.appendChild(posCell);
965
+ row.appendChild(nameCell);
966
+ row.appendChild(scoreCell);
967
+
968
+ leaderboardBody.appendChild(row);
969
+ });
970
+
971
+ leaderboardModal.style.display = 'block';
972
+ }
973
+
974
+ // Check for daily reward
975
+ function checkDailyReward() {
976
+ const lastRewardDate = localStorage.getItem('lastRewardDate');
977
+ const today = new Date().toDateString();
978
+
979
+ if (!lastRewardDate || lastRewardDate !== today) {
980
+ // Show reward modal after 2 seconds
981
+ setTimeout(() => {
982
+ dailyRewardModal.style.display = 'block';
983
+ }, 2000);
984
+ }
985
+ }
986
+
987
+ // Claim daily reward
988
+ function claimDailyReward() {
989
+ const today = new Date().toDateString();
990
+ localStorage.setItem('lastRewardDate', today);
991
+
992
+ // Add coins
993
+ coins += 100;
994
+ coinsDisplay.textContent = coins;
995
+
996
+ // Close modal
997
+ dailyRewardModal.style.display = 'none';
998
+
999
+ // Show message
1000
+ alert('Você ganhou 100 moedas! Volte amanhã para mais recompensas!');
1001
+ }
1002
+
1003
+ // Keyboard controls
1004
+ function keyDown(e) {
1005
+ keys[e.key] = true;
1006
+ }
1007
+
1008
+ function keyUp(e) {
1009
+ keys[e.key] = false;
1010
+ }
1011
+
1012
+ // Start the game
1013
+ window.onload = init;
1014
+ </script>
1015
+ <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=Xacodavt/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1016
+ </html>