Hugging Face's logo

Spaces:
offerpk3
/
j10cvsrafeel
Running

App Files Community
offerpk3 commited on
Commit
8227dee
·
verified ·
1 Parent(s): 14a5362

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +677 -19
index.html CHANGED
@@ -1,19 +1,677 @@
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>J-10C vs Rafale Combat</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ padding: 0;
11
+ background: linear-gradient(135deg, #000428 0%, #004e92 100%);
12
+ font-family: 'Courier New', monospace;
13
+ color: white;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ min-height: 100vh;
18
+ }
19
+
20
+ .game-container {
21
+ display: flex;
22
+ gap: 20px;
23
+ align-items: center;
24
+ }
25
+
26
+ .game-info {
27
+ background: rgba(0, 0, 0, 0.8);
28
+ padding: 20px;
29
+ border-radius: 15px;
30
+ border: 2px solid #00ffff;
31
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
32
+ min-width: 200px;
33
+ }
34
+
35
+ #gameCanvas {
36
+ background: radial-gradient(ellipse at center, #001122 0%, #000000 100%);
37
+ border: 3px solid #00ffff;
38
+ box-shadow: 0 0 30px #00ffff;
39
+ border-radius: 10px;
40
+ }
41
+
42
+ .aircraft-count {
43
+ color: #00ff00;
44
+ font-size: 18px;
45
+ font-weight: bold;
46
+ margin: 10px 0;
47
+ }
48
+
49
+ .health-display {
50
+ margin: 15px 0;
51
+ padding: 10px;
52
+ background: rgba(255, 255, 255, 0.1);
53
+ border-radius: 8px;
54
+ }
55
+
56
+ .player-info {
57
+ color: #00ff00;
58
+ }
59
+
60
+ .enemy-info {
61
+ color: #ff4444;
62
+ }
63
+
64
+ .controls {
65
+ margin-top: 20px;
66
+ padding: 15px;
67
+ background: rgba(255, 255, 255, 0.1);
68
+ border-radius: 8px;
69
+ font-size: 12px;
70
+ }
71
+
72
+ #gameOver {
73
+ position: fixed;
74
+ top: 50%;
75
+ left: 50%;
76
+ transform: translate(-50%, -50%);
77
+ background: rgba(0, 0, 0, 0.95);
78
+ padding: 40px;
79
+ border-radius: 20px;
80
+ border: 3px solid #00ffff;
81
+ text-align: center;
82
+ display: none;
83
+ z-index: 1000;
84
+ }
85
+
86
+ button {
87
+ background: linear-gradient(45deg, #00ffff, #0088ff);
88
+ color: #000;
89
+ border: none;
90
+ padding: 12px 25px;
91
+ border-radius: 8px;
92
+ cursor: pointer;
93
+ font-weight: bold;
94
+ margin-top: 15px;
95
+ transition: all 0.3s;
96
+ }
97
+
98
+ button:hover {
99
+ transform: scale(1.05);
100
+ box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <div class="game-container">
106
+ <div class="game-info">
107
+ <div class="aircraft-count">
108
+ گرے ہوئے طیارے: <span id="destroyedCount">0</span>
109
+ </div>
110
+
111
+ <div class="health-display player-info">
112
+ <div><strong>🇵🇰 J-10C (پاکستان)</strong></div>
113
+ <div>صحت: <span id="playerHealth">100</span>/100</div>
114
+ </div>
115
+
116
+ <div class="health-display enemy-info">
117
+ <div><strong>🇫🇷🇮🇳 Rafale (فرانس/بھارت)</strong></div>
118
+ <div>صحت: <span id="enemyHealth">100</span>/100</div>
119
+ </div>
120
+
121
+ <div class="controls">
122
+ <div><strong>کنٹرولز:</strong></div>
123
+ <div>↑↓← → تمام سمتیں</div>
124
+ <div>SPACE: دستی فائر</div>
125
+ <div>خودکار نشانہ: فعال</div>
126
+ </div>
127
+ </div>
128
+
129
+ <canvas id="gameCanvas" width="900" height="700"></canvas>
130
+
131
+ <div class="game-info">
132
+ <div style="text-align: center; font-size: 16px; color: #00ffff;">
133
+ <div><strong>🎯 جنگی میدان</strong></div>
134
+ <div style="margin: 15px 0; font-size: 14px;">
135
+ پاکستانی J-10C برابر
136
+ <br>
137
+ فرانسیسی-بھارتی Rafale
138
+ </div>
139
+ <div style="color: #ffff00; font-size: 12px;">
140
+ * خودکار فائر ہر 333ms میں
141
+ <br>
142
+ * قریب ترین دشمن کو نشانہ
143
+ <br>
144
+ * مکمل 3D حرکت
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div id="gameOver">
151
+ <h2 id="gameResult"></h2>
152
+ <p>تباہ شدہ طیارے: <span id="finalDestroyed"></span></p>
153
+ <button onclick="restartGame()">دوبارہ جنگ شروع کریں</button>
154
+ </div>
155
+
156
+ <script>
157
+ const canvas = document.getElementById('gameCanvas');
158
+ const ctx = canvas.getContext('2d');
159
+
160
+ // Game state
161
+ let gameRunning = true;
162
+ let destroyedAircraft = 0;
163
+ let lastAutoFire = 0;
164
+ const autoFireRate = 333; // 3 fires per second
165
+
166
+ // Player (J-10C with Pakistani flag)
167
+ const player = {
168
+ x: canvas.width / 2,
169
+ y: canvas.height - 100,
170
+ width: 80,
171
+ height: 50,
172
+ speed: 6,
173
+ health: 100,
174
+ maxHealth: 100,
175
+ animOffset: 0
176
+ };
177
+
178
+ // Enemy (Rafale with French-Indian flags)
179
+ const enemy = {
180
+ x: canvas.width / 2,
181
+ y: 80,
182
+ width: 80,
183
+ height: 50,
184
+ speed: 3,
185
+ health: 100,
186
+ maxHealth: 100,
187
+ direction: 1,
188
+ verticalDirection: 1,
189
+ animOffset: 0
190
+ };
191
+
192
+ // Bullets and particles
193
+ let playerBullets = [];
194
+ let enemyBullets = [];
195
+ let explosions = [];
196
+
197
+ // Stars for background
198
+ let stars = [];
199
+ for (let i = 0; i < 150; i++) {
200
+ stars.push({
201
+ x: Math.random() * canvas.width,
202
+ y: Math.random() * canvas.height,
203
+ size: Math.random() * 3,
204
+ twinkle: Math.random() * 100
205
+ });
206
+ }
207
+
208
+ // Input handling
209
+ const keys = {};
210
+ document.addEventListener('keydown', (e) => {
211
+ keys[e.code] = true;
212
+ });
213
+
214
+ document.addEventListener('keyup', (e) => {
215
+ keys[e.code] = false;
216
+ });
217
+
218
+ // Draw functions
219
+ function drawStars() {
220
+ stars.forEach(star => {
221
+ star.twinkle += 2;
222
+ const alpha = (Math.sin(star.twinkle * 0.05) + 1) * 0.5;
223
+ ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
224
+ ctx.beginPath();
225
+ ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
226
+ ctx.fill();
227
+ });
228
+ }
229
+
230
+ function drawPakistaniFlag(x, y, size) {
231
+ // Pakistani flag on J-10C
232
+ const flagWidth = size * 0.8;
233
+ const flagHeight = size * 0.5;
234
+
235
+ // Green background
236
+ ctx.fillStyle = '#01411C';
237
+ ctx.fillRect(x - flagWidth/2, y - flagHeight/2, flagWidth, flagHeight);
238
+
239
+ // White stripe
240
+ ctx.fillStyle = 'white';
241
+ ctx.fillRect(x - flagWidth/2, y - flagHeight/2, flagWidth * 0.25, flagHeight);
242
+
243
+ // Crescent and star (simplified)
244
+ ctx.fillStyle = 'white';
245
+ ctx.beginPath();
246
+ ctx.arc(x + flagWidth * 0.1, y, size * 0.15, 0, Math.PI * 2);
247
+ ctx.fill();
248
+
249
+ // Star
250
+ ctx.beginPath();
251
+ ctx.arc(x + flagWidth * 0.25, y - size * 0.05, size * 0.1, 0, Math.PI * 2);
252
+ ctx.fill();
253
+ }
254
+
255
+ function drawFrenchFlag(x, y, size) {
256
+ const flagWidth = size * 0.6;
257
+ const flagHeight = size * 0.4;
258
+
259
+ // Blue
260
+ ctx.fillStyle = '#002395';
261
+ ctx.fillRect(x - flagWidth/2, y - flagHeight/2, flagWidth/3, flagHeight);
262
+
263
+ // White
264
+ ctx.fillStyle = 'white';
265
+ ctx.fillRect(x - flagWidth/6, y - flagHeight/2, flagWidth/3, flagHeight);
266
+
267
+ // Red
268
+ ctx.fillStyle = '#ED2939';
269
+ ctx.fillRect(x + flagWidth/6, y - flagHeight/2, flagWidth/3, flagHeight);
270
+ }
271
+
272
+ function drawIndianFlag(x, y, size) {
273
+ const flagWidth = size * 0.6;
274
+ const flagHeight = size * 0.4;
275
+
276
+ // Orange
277
+ ctx.fillStyle = '#FF9933';
278
+ ctx.fillRect(x - flagWidth/2, y - flagHeight/2, flagWidth, flagHeight/3);
279
+
280
+ // White
281
+ ctx.fillStyle = 'white';
282
+ ctx.fillRect(x - flagWidth/2, y - flagHeight/6, flagWidth, flagHeight/3);
283
+
284
+ // Green
285
+ ctx.fillStyle = '#138808';
286
+ ctx.fillRect(x - flagWidth/2, y + flagHeight/6, flagWidth, flagHeight/3);
287
+
288
+ // Chakra (simplified)
289
+ ctx.strokeStyle = '#000080';
290
+ ctx.lineWidth = 2;
291
+ ctx.beginPath();
292
+ ctx.arc(x, y, size * 0.1, 0, Math.PI * 2);
293
+ ctx.stroke();
294
+ }
295
+
296
+ function drawJ10C(x, y, animOffset) {
297
+ ctx.save();
298
+
299
+ // Animation bobbing
300
+ const bobY = y + Math.sin(animOffset * 0.1) * 2;
301
+
302
+ // Main fuselage (Pakistani J-10C)
303
+ ctx.fillStyle = '#2C5F2D';
304
+ ctx.beginPath();
305
+ ctx.ellipse(x, bobY, 40, 15, 0, 0, Math.PI * 2);
306
+ ctx.fill();
307
+
308
+ // Nose cone
309
+ ctx.fillStyle = '#1A4B1C';
310
+ ctx.beginPath();
311
+ ctx.ellipse(x, bobY - 20, 12, 8, 0, 0, Math.PI * 2);
312
+ ctx.fill();
313
+
314
+ // Wings (delta wing design)
315
+ ctx.fillStyle = '#397D3C';
316
+ ctx.beginPath();
317
+ ctx.moveTo(x - 45, bobY + 10);
318
+ ctx.lineTo(x - 15, bobY - 5);
319
+ ctx.lineTo(x + 15, bobY - 5);
320
+ ctx.lineTo(x + 45, bobY + 10);
321
+ ctx.lineTo(x + 25, bobY + 20);
322
+ ctx.lineTo(x - 25, bobY + 20);
323
+ ctx.closePath();
324
+ ctx.fill();
325
+
326
+ // Canard wings
327
+ ctx.fillStyle = '#2C5F2D';
328
+ ctx.beginPath();
329
+ ctx.ellipse(x, bobY - 10, 25, 5, 0, 0, Math.PI * 2);
330
+ ctx.fill();
331
+
332
+ // Cockpit
333
+ ctx.fillStyle = '#4A90E2';
334
+ ctx.beginPath();
335
+ ctx.ellipse(x, bobY - 8, 8, 6, 0, 0, Math.PI * 2);
336
+ ctx.fill();
337
+
338
+ // Engine exhaust
339
+ ctx.fillStyle = '#FF6B35';
340
+ ctx.beginPath();
341
+ ctx.ellipse(x, bobY + 25, 10, 6, 0, 0, Math.PI * 2);
342
+ ctx.fill();
343
+
344
+ // Afterburner glow
345
+ if (Math.random() > 0.7) {
346
+ ctx.fillStyle = '#FFD700';
347
+ ctx.beginPath();
348
+ ctx.ellipse(x, bobY + 30, 15, 4, 0, 0, Math.PI * 2);
349
+ ctx.fill();
350
+ }
351
+
352
+ // Pakistani flag
353
+ drawPakistaniFlag(x - 30, bobY - 5, 20);
354
+
355
+ ctx.restore();
356
+ }
357
+
358
+ function drawRafale(x, y, animOffset) {
359
+ ctx.save();
360
+
361
+ // Animation movement
362
+ const bobY = y + Math.sin(animOffset * 0.08) * 3;
363
+ const bobX = x + Math.cos(animOffset * 0.06) * 1;
364
+
365
+ // Main fuselage (Rafale)
366
+ ctx.fillStyle = '#4A4A4A';
367
+ ctx.beginPath();
368
+ ctx.ellipse(bobX, bobY, 38, 14, 0, 0, Math.PI * 2);
369
+ ctx.fill();
370
+
371
+ // Nose cone
372
+ ctx.fillStyle = '#333333';
373
+ ctx.beginPath();
374
+ ctx.ellipse(bobX, bobY - 18, 10, 7, 0, 0, Math.PI * 2);
375
+ ctx.fill();
376
+
377
+ // Delta wings
378
+ ctx.fillStyle = '#5C5C5C';
379
+ ctx.beginPath();
380
+ ctx.moveTo(bobX - 42, bobY + 8);
381
+ ctx.lineTo(bobX - 18, bobY - 8);
382
+ ctx.lineTo(bobX + 18, bobY - 8);
383
+ ctx.lineTo(bobX + 42, bobY + 8);
384
+ ctx.lineTo(bobX + 22, bobY + 18);
385
+ ctx.lineTo(bobX - 22, bobY + 18);
386
+ ctx.closePath();
387
+ ctx.fill();
388
+
389
+ // Canard wings
390
+ ctx.fillStyle = '#4A4A4A';
391
+ ctx.beginPath();
392
+ ctx.ellipse(bobX, bobY - 12, 22, 4, 0, 0, Math.PI * 2);
393
+ ctx.fill();
394
+
395
+ // Cockpit
396
+ ctx.fillStyle = '#87CEEB';
397
+ ctx.beginPath();
398
+ ctx.ellipse(bobX, bobY - 6, 7, 5, 0, 0, Math.PI * 2);
399
+ ctx.fill();
400
+
401
+ // Twin engines
402
+ ctx.fillStyle = '#FF4500';
403
+ ctx.beginPath();
404
+ ctx.ellipse(bobX - 8, bobY + 22, 6, 4, 0, 0, Math.PI * 2);
405
+ ctx.fill();
406
+ ctx.beginPath();
407
+ ctx.ellipse(bobX + 8, bobY + 22, 6, 4, 0, 0, Math.PI * 2);
408
+ ctx.fill();
409
+
410
+ // Afterburner effects
411
+ if (Math.random() > 0.6) {
412
+ ctx.fillStyle = '#FF69B4';
413
+ ctx.beginPath();
414
+ ctx.ellipse(bobX - 8, bobY + 28, 8, 3, 0, 0, Math.PI * 2);
415
+ ctx.fill();
416
+ ctx.beginPath();
417
+ ctx.ellipse(bobX + 8, bobY + 28, 8, 3, 0, 0, Math.PI * 2);
418
+ ctx.fill();
419
+ }
420
+
421
+ // French flag
422
+ drawFrenchFlag(bobX - 25, bobY - 3, 15);
423
+
424
+ // Indian flag
425
+ drawIndianFlag(bobX + 25, bobY - 3, 15);
426
+
427
+ ctx.restore();
428
+ }
429
+
430
+ function drawBullet(x, y, color, size = 4) {
431
+ ctx.save();
432
+ ctx.shadowColor = color;
433
+ ctx.shadowBlur = 10;
434
+
435
+ ctx.fillStyle = color;
436
+ ctx.beginPath();
437
+ ctx.arc(x, y, size, 0, Math.PI * 2);
438
+ ctx.fill();
439
+
440
+ // Bullet trail
441
+ ctx.fillStyle = color + '50';
442
+ ctx.beginPath();
443
+ ctx.arc(x, y + 10, size * 0.5, 0, Math.PI * 2);
444
+ ctx.fill();
445
+
446
+ ctx.restore();
447
+ }
448
+
449
+ function drawExplosion(explosion) {
450
+ ctx.save();
451
+ ctx.translate(explosion.x, explosion.y);
452
+
453
+ for (let i = 0; i < explosion.particles.length; i++) {
454
+ const p = explosion.particles[i];
455
+ ctx.fillStyle = p.color;
456
+ ctx.globalAlpha = p.life;
457
+ ctx.beginPath();
458
+ ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
459
+ ctx.fill();
460
+ }
461
+
462
+ ctx.restore();
463
+ }
464
+
465
+ function createExplosion(x, y) {
466
+ const explosion = {
467
+ x: x,
468
+ y: y,
469
+ particles: [],
470
+ life: 60
471
+ };
472
+
473
+ for (let i = 0; i < 20; i++) {
474
+ explosion.particles.push({
475
+ x: 0,
476
+ y: 0,
477
+ vx: (Math.random() - 0.5) * 10,
478
+ vy: (Math.random() - 0.5) * 10,
479
+ size: Math.random() * 5 + 2,
480
+ color: ['#FF4500', '#FF6B35', '#FFD700', '#FF0000'][Math.floor(Math.random() * 4)],
481
+ life: 1
482
+ });
483
+ }
484
+
485
+ explosions.push(explosion);
486
+ }
487
+
488
+ // Game logic
489
+ function updatePlayer() {
490
+ if (keys['ArrowLeft'] && player.x > 40) {
491
+ player.x -= player.speed;
492
+ }
493
+ if (keys['ArrowRight'] && player.x < canvas.width - 40) {
494
+ player.x += player.speed;
495
+ }
496
+ if (keys['ArrowUp'] && player.y > 40) {
497
+ player.y -= player.speed;
498
+ }
499
+ if (keys['ArrowDown'] && player.y < canvas.height - 40) {
500
+ player.y += player.speed;
501
+ }
502
+
503
+ player.animOffset++;
504
+
505
+ // Manual fire
506
+ if (keys['Space']) {
507
+ keys['Space'] = false;
508
+ playerBullets.push({
509
+ x: player.x,
510
+ y: player.y - 25,
511
+ speed: 10
512
+ });
513
+ }
514
+ }
515
+
516
+ function updateEnemy() {
517
+ // Advanced enemy movement with full animation
518
+ enemy.x += enemy.speed * enemy.direction;
519
+ enemy.y += enemy.speed * 0.5 * enemy.verticalDirection;
520
+
521
+ if (enemy.x <= 40 || enemy.x >= canvas.width - 40) {
522
+ enemy.direction *= -1;
523
+ }
524
+ if (enemy.y <= 40 || enemy.y >= canvas.height / 2) {
525
+ enemy.verticalDirection *= -1;
526
+ }
527
+
528
+ enemy.animOffset++;
529
+
530
+ // Enemy shooting
531
+ if (Math.random() < 0.025) {
532
+ enemyBullets.push({
533
+ x: enemy.x,
534
+ y: enemy.y + 25,
535
+ speed: 6
536
+ });
537
+ }
538
+ }
539
+
540
+ function updateAutoFire() {
541
+ const now = Date.now();
542
+ if (now - lastAutoFire > autoFireRate) {
543
+ const distance = Math.sqrt(Math.pow(enemy.x - player.x, 2) + Math.pow(enemy.y - player.y, 2));
544
+ if (distance < 500) {
545
+ playerBullets.push({
546
+ x: player.x,
547
+ y: player.y - 25,
548
+ speed: 10
549
+ });
550
+ lastAutoFire = now;
551
+ }
552
+ }
553
+ }
554
+
555
+ function updateBullets() {
556
+ // Update player bullets
557
+ playerBullets = playerBullets.filter(bullet => {
558
+ bullet.y -= bullet.speed;
559
+
560
+ // Check collision with enemy
561
+ if (bullet.x > enemy.x - 40 && bullet.x < enemy.x + 40 &&
562
+ bullet.y > enemy.y - 25 && bullet.y < enemy.y + 25) {
563
+ enemy.health -= 12;
564
+ createExplosion(bullet.x, bullet.y);
565
+ return false;
566
+ }
567
+
568
+ return bullet.y > 0;
569
+ });
570
+
571
+ // Update enemy bullets
572
+ enemyBullets = enemyBullets.filter(bullet => {
573
+ bullet.y += bullet.speed;
574
+
575
+ // Check collision with player
576
+ if (bullet.x > player.x - 40 && bullet.x < player.x + 40 &&
577
+ bullet.y > player.y - 25 && bullet.y < player.y + 25) {
578
+ player.health -= 10;
579
+ createExplosion(bullet.x, bullet.y);
580
+ return false;
581
+ }
582
+
583
+ return bullet.y < canvas.height;
584
+ });
585
+ }
586
+
587
+ function updateExplosions() {
588
+ explosions = explosions.filter(explosion => {
589
+ explosion.life--;
590
+ explosion.particles.forEach(p => {
591
+ p.x += p.vx;
592
+ p.y += p.vy;
593
+ p.life -= 0.02;
594
+ p.vx *= 0.98;
595
+ p.vy *= 0.98;
596
+ });
597
+ return explosion.life > 0;
598
+ });
599
+ }
600
+
601
+ function checkGameOver() {
602
+ if (player.health <= 0) {
603
+ gameRunning = false;
604
+ document.getElementById('gameResult').textContent = 'شکست! Rafale نے جیت لی';
605
+ document.getElementById('finalDestroyed').textContent = destroyedAircraft;
606
+ document.getElementById('gameOver').style.display = 'block';
607
+ } else if (enemy.health <= 0) {
608
+ // Enemy destroyed - reset for continuous play
609
+ destroyedAircraft++;
610
+ createExplosion(enemy.x, enemy.y);
611
+ enemy.health = enemy.maxHealth;
612
+ enemy.x = Math.random() * (canvas.width - 80) + 40;
613
+ enemy.y = Math.random() * (canvas.height / 3) + 40;
614
+ enemy.speed += 0.5; // Increase difficulty
615
+ }
616
+ }
617
+
618
+ function updateUI() {
619
+ document.getElementById('playerHealth').textContent = Math.max(0, player.health);
620
+ document.getElementById('enemyHealth').textContent = Math.max(0, enemy.health);
621
+ document.getElementById('destroyedCount').textContent = destroyedAircraft;
622
+ }
623
+
624
+ function draw() {
625
+ // Clear canvas
626
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
627
+
628
+ // Draw background
629
+ drawStars();
630
+
631
+ // Draw fighters with full animation
632
+ drawJ10C(player.x, player.y, player.animOffset);
633
+ drawRafale(enemy.x, enemy.y, enemy.animOffset);
634
+
635
+ // Draw bullets
636
+ playerBullets.forEach(bullet => drawBullet(bullet.x, bullet.y, '#00FFFF', 5));
637
+ enemyBullets.forEach(bullet => drawBullet(bullet.x, bullet.y, '#FF4500', 4));
638
+
639
+ // Draw explosions
640
+ explosions.forEach(drawExplosion);
641
+ }
642
+
643
+ function gameLoop() {
644
+ if (gameRunning) {
645
+ updatePlayer();
646
+ updateEnemy();
647
+ updateAutoFire();
648
+ updateBullets();
649
+ updateExplosions();
650
+ checkGameOver();
651
+ updateUI();
652
+ draw();
653
+ }
654
+ requestAnimationFrame(gameLoop);
655
+ }
656
+
657
+ function restartGame() {
658
+ gameRunning = true;
659
+ destroyedAircraft = 0;
660
+ player.health = player.maxHealth;
661
+ enemy.health = enemy.maxHealth;
662
+ player.x = canvas.width / 2;
663
+ player.y = canvas.height - 100;
664
+ enemy.x = canvas.width / 2;
665
+ enemy.y = 80;
666
+ enemy.speed = 3;
667
+ playerBullets = [];
668
+ enemyBullets = [];
669
+ explosions = [];
670
+ document.getElementById('gameOver').style.display = 'none';
671
+ }
672
+
673
+ // Start game
674
+ gameLoop();
675
+ </script>
676
+ </body>
677
+ </html>