Hugging Face's logo

Spaces:
Xie
/
Grok3-made_UI
Running

App Files Community
Xie commited on
Commit
c917b9c
·
verified ·
1 Parent(s): a05d567

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +602 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Arkanoid
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: pink
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: deepsite-arkanoid
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,602 @@
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>Castlevania Arkanoid</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
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=MedievalSharp&display=swap');
11
+
12
+ body {
13
+ font-family: 'Cinzel Decorative', cursive;
14
+ background-color: #000;
15
+ overflow: hidden;
16
+ touch-action: none;
17
+ user-select: none;
18
+ }
19
+
20
+ #gameCanvas {
21
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect width="400" height="400" fill="%23000"/><path d="M0,0 L400,400 M400,0 L0,400" stroke="%231a0a0a" stroke-width="1"/></svg>');
22
+ box-shadow: 0 0 30px rgba(186, 0, 0, 0.5);
23
+ border: 8px solid #3a1a1a;
24
+ border-image: linear-gradient(45deg, #3a1a1a, #5a2a2a, #3a1a1a) 1;
25
+ }
26
+
27
+ .gothic-text {
28
+ font-family: 'MedievalSharp', cursive;
29
+ text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
30
+ }
31
+
32
+ .blood-red {
33
+ background: linear-gradient(135deg, #5a0000, #3a0000);
34
+ }
35
+
36
+ .vampire-button {
37
+ background: linear-gradient(135deg, #5a0000, #3a0000);
38
+ border: 2px solid #8a0000;
39
+ box-shadow: 0 0 15px rgba(186, 0, 0, 0.7);
40
+ transition: all 0.3s;
41
+ }
42
+
43
+ .vampire-button:hover {
44
+ background: linear-gradient(135deg, #7a0000, #5a0000);
45
+ box-shadow: 0 0 25px rgba(255, 0, 0, 0.9);
46
+ transform: translateY(-2px);
47
+ }
48
+
49
+ .candle-flicker {
50
+ animation: flicker 3s infinite alternate;
51
+ }
52
+
53
+ @keyframes flicker {
54
+ 0%, 100% { opacity: 0.8; }
55
+ 25% { opacity: 1; }
56
+ 50% { opacity: 0.7; }
57
+ 75% { opacity: 0.9; }
58
+ }
59
+
60
+ .gothic-border {
61
+ border: 4px solid transparent;
62
+ border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M0,0 L12,0 L12,12 L0,12 Z" fill="none" stroke="%238a0000" stroke-width="2" stroke-dasharray="4,2"/></svg>') 1;
63
+ }
64
+
65
+ .skull-icon {
66
+ filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="flex flex-col items-center justify-center min-h-screen bg-black text-red-600">
71
+ <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none" style="background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><path d=\"M20,20 L80,20 L80,80 L20,80 Z M30,30 L70,30 L70,70 L30,70 Z\" fill=\"none\" stroke=\"%238a0000\" stroke-width=\"1\"/></svg>');"></div>
72
+
73
+ <h1 class="text-5xl md:text-6xl font-bold mb-4 gothic-text candle-flicker">
74
+ <i class="fas fa-skull skull-icon mr-2"></i> CASTLEVANIA ARKANOID
75
+ </h1>
76
+
77
+ <div class="relative mb-8">
78
+ <canvas id="gameCanvas" width="800" height="600" class="rounded-lg"></canvas>
79
+
80
+ <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 rounded-lg">
81
+ <div class="text-center p-8 gothic-border bg-black bg-opacity-90 max-w-md">
82
+ <h2 class="text-3xl font-bold mb-6 gothic-text candle-flicker">THE NIGHT WALKER'S CHALLENGE</h2>
83
+ <p class="mb-6 text-gray-300">Break the cursed bricks before the night creatures overwhelm you!</p>
84
+ <button id="startButton" class="px-8 py-3 rounded-lg text-xl font-bold gothic-text vampire-button">
85
+ <i class="fas fa-play mr-2"></i> BEGIN THE HUNT
86
+ </button>
87
+ </div>
88
+ </div>
89
+
90
+ <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80 rounded-lg">
91
+ <div class="text-center p-8 gothic-border bg-black bg-opacity-90 max-w-md">
92
+ <h2 class="text-4xl font-bold mb-6 gothic-text text-red-500">YOU HAVE DIED</h2>
93
+ <p id="finalScore" class="text-2xl mb-6">Score: 0</p>
94
+ <button id="restartButton" class="px-8 py-3 rounded-lg text-xl font-bold gothic-text vampire-button">
95
+ <i class="fas fa-redo mr-2"></i> TRY AGAIN
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="flex justify-between w-full max-w-2xl px-4 mb-8">
102
+ <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
103
+ <h3 class="text-xl gothic-text mb-1">SCORE</h3>
104
+ <p id="scoreDisplay" class="text-3xl font-bold">0</p>
105
+ </div>
106
+ <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
107
+ <h3 class="text-xl gothic-text mb-1">LIVES</h3>
108
+ <p id="livesDisplay" class="text-3xl font-bold">3</p>
109
+ </div>
110
+ <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
111
+ <h3 class="text-xl gothic-text mb-1">LEVEL</h3>
112
+ <p id="levelDisplay" class="text-3xl font-bold">1</p>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="absolute bottom-4 right-4 text-xs text-gray-600">
117
+ <p>Beware the creatures of the night...</p>
118
+ </div>
119
+
120
+ <script>
121
+ document.addEventListener('DOMContentLoaded', () => {
122
+ const canvas = document.getElementById('gameCanvas');
123
+ const ctx = canvas.getContext('2d');
124
+ const startScreen = document.getElementById('startScreen');
125
+ const gameOverScreen = document.getElementById('gameOverScreen');
126
+ const startButton = document.getElementById('startButton');
127
+ const restartButton = document.getElementById('restartButton');
128
+ const scoreDisplay = document.getElementById('scoreDisplay');
129
+ const livesDisplay = document.getElementById('livesDisplay');
130
+ const levelDisplay = document.getElementById('levelDisplay');
131
+ const finalScore = document.getElementById('finalScore');
132
+
133
+ // Game variables
134
+ let gameRunning = false;
135
+ let score = 0;
136
+ let lives = 3;
137
+ let level = 1;
138
+ let bricks = [];
139
+ let brickRowCount = 5;
140
+ let brickColumnCount = 10;
141
+ let brickWidth = 75;
142
+ let brickHeight = 20;
143
+ let brickPadding = 10;
144
+ let brickOffsetTop = 60;
145
+ let brickOffsetLeft = 30;
146
+
147
+ // Ball variables
148
+ let ballRadius = 10;
149
+ let x = canvas.width / 2;
150
+ let y = canvas.height - 30;
151
+ let dx = 4;
152
+ let dy = -4;
153
+
154
+ // Paddle variables
155
+ let paddleHeight = 15;
156
+ let paddleWidth = 100;
157
+ let paddleX = (canvas.width - paddleWidth) / 2;
158
+ let rightPressed = false;
159
+ let leftPressed = false;
160
+
161
+ // Special effects
162
+ let particles = [];
163
+ let lastTime = 0;
164
+
165
+ // Initialize bricks
166
+ function initBricks() {
167
+ bricks = [];
168
+ for (let c = 0; c < brickColumnCount; c++) {
169
+ bricks[c] = [];
170
+ for (let r = 0; r < brickRowCount; r++) {
171
+ const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
172
+ const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
173
+ const brickHealth = Math.floor(Math.random() * 3) + 1; // 1-3 hits to break
174
+
175
+ // Different colors based on health
176
+ let brickColor;
177
+ if (brickHealth === 1) brickColor = '#5a0000'; // Dark red
178
+ else if (brickHealth === 2) brickColor = '#8a0000'; // Medium red
179
+ else brickColor = '#ba0000'; // Bright red
180
+
181
+ bricks[c][r] = { x: brickX, y: brickY, health: brickHealth, color: brickColor, visible: true };
182
+ }
183
+ }
184
+ }
185
+
186
+ // Draw bricks
187
+ function drawBricks() {
188
+ for (let c = 0; c < brickColumnCount; c++) {
189
+ for (let r = 0; r < brickRowCount; r++) {
190
+ if (bricks[c][r].visible) {
191
+ const brick = bricks[c][r];
192
+
193
+ // Draw brick with gothic style
194
+ ctx.beginPath();
195
+ ctx.rect(brick.x, brick.y, brickWidth, brickHeight);
196
+ ctx.fillStyle = brick.color;
197
+ ctx.fill();
198
+ ctx.lineWidth = 2;
199
+ ctx.strokeStyle = '#3a0000';
200
+ ctx.stroke();
201
+
202
+ // Add gothic cross pattern
203
+ ctx.beginPath();
204
+ ctx.moveTo(brick.x + 5, brick.y + 5);
205
+ ctx.lineTo(brick.x + brickWidth - 5, brick.y + brickHeight - 5);
206
+ ctx.moveTo(brick.x + brickWidth - 5, brick.y + 5);
207
+ ctx.lineTo(brick.x + 5, brick.y + brickHeight - 5);
208
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
209
+ ctx.stroke();
210
+
211
+ // Add health indicator (skull icons)
212
+ if (brick.health > 1) {
213
+ const skulls = brick.health;
214
+ const spacing = brickWidth / (skulls + 1);
215
+ for (let i = 1; i <= skulls; i++) {
216
+ const skullX = brick.x + (spacing * i) - 4;
217
+ const skullY = brick.y + brickHeight / 2 - 4;
218
+
219
+ ctx.beginPath();
220
+ ctx.arc(skullX + 4, skullY + 4, 3, 0, Math.PI * 2);
221
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
222
+ ctx.fill();
223
+
224
+ ctx.beginPath();
225
+ ctx.arc(skullX + 4, skullY + 4, 5, 0, Math.PI, false);
226
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
227
+ ctx.stroke();
228
+ }
229
+ }
230
+ }
231
+ }
232
+ }
233
+ }
234
+
235
+ // Draw ball
236
+ function drawBall() {
237
+ ctx.beginPath();
238
+ ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
239
+
240
+ // Create a glowing red ball effect
241
+ const gradient = ctx.createRadialGradient(
242
+ x, y, ballRadius / 2,
243
+ x, y, ballRadius
244
+ );
245
+ gradient.addColorStop(0, '#ff0000');
246
+ gradient.addColorStop(1, '#8a0000');
247
+
248
+ ctx.fillStyle = gradient;
249
+ ctx.fill();
250
+
251
+ // Add inner glow
252
+ ctx.beginPath();
253
+ ctx.arc(x, y, ballRadius / 2, 0, Math.PI * 2);
254
+ ctx.fillStyle = 'rgba(255, 150, 150, 0.5)';
255
+ ctx.fill();
256
+
257
+ // Add outer glow
258
+ ctx.beginPath();
259
+ ctx.arc(x, y, ballRadius + 3, 0, Math.PI * 2);
260
+ const glowGradient = ctx.createRadialGradient(
261
+ x, y, ballRadius,
262
+ x, y, ballRadius + 3
263
+ );
264
+ glowGradient.addColorStop(0, 'rgba(255, 0, 0, 0.7)');
265
+ glowGradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
266
+ ctx.fillStyle = glowGradient;
267
+ ctx.fill();
268
+ }
269
+
270
+ // Draw paddle
271
+ function drawPaddle() {
272
+ // Main paddle
273
+ ctx.beginPath();
274
+ ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
275
+
276
+ // Gradient for paddle
277
+ const gradient = ctx.createLinearGradient(
278
+ paddleX, canvas.height - paddleHeight,
279
+ paddleX, canvas.height
280
+ );
281
+ gradient.addColorStop(0, '#3a1a1a');
282
+ gradient.addColorStop(1, '#5a2a2a');
283
+
284
+ ctx.fillStyle = gradient;
285
+ ctx.fill();
286
+ ctx.strokeStyle = '#8a0000';
287
+ ctx.lineWidth = 2;
288
+ ctx.stroke();
289
+
290
+ // Add gothic details
291
+ const segmentWidth = paddleWidth / 5;
292
+ for (let i = 1; i < 5; i++) {
293
+ ctx.beginPath();
294
+ ctx.moveTo(paddleX + (segmentWidth * i), canvas.height - paddleHeight);
295
+ ctx.lineTo(paddleX + (segmentWidth * i), canvas.height);
296
+ ctx.strokeStyle = 'rgba(186, 0, 0, 0.5)';
297
+ ctx.stroke();
298
+ }
299
+
300
+ // Add spikes at the ends
301
+ ctx.beginPath();
302
+ ctx.moveTo(paddleX, canvas.height - paddleHeight);
303
+ ctx.lineTo(paddleX - 5, canvas.height - paddleHeight - 10);
304
+ ctx.lineTo(paddleX + 5, canvas.height - paddleHeight - 10);
305
+ ctx.closePath();
306
+ ctx.fillStyle = '#8a0000';
307
+ ctx.fill();
308
+
309
+ ctx.beginPath();
310
+ ctx.moveTo(paddleX + paddleWidth, canvas.height - paddleHeight);
311
+ ctx.lineTo(paddleX + paddleWidth + 5, canvas.height - paddleHeight - 10);
312
+ ctx.lineTo(paddleX + paddleWidth - 5, canvas.height - paddleHeight - 10);
313
+ ctx.closePath();
314
+ ctx.fillStyle = '#8a0000';
315
+ ctx.fill();
316
+ }
317
+
318
+ // Draw particles
319
+ function drawParticles() {
320
+ for (let i = 0; i < particles.length; i++) {
321
+ const p = particles[i];
322
+
323
+ ctx.beginPath();
324
+ ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
325
+
326
+ const alpha = p.lifetime / 100;
327
+ ctx.fillStyle = `rgba(255, ${Math.floor(100 + Math.random() * 155)}, 0, ${alpha})`;
328
+ ctx.fill();
329
+
330
+ p.x += p.vx;
331
+ p.y += p.vy;
332
+ p.lifetime--;
333
+
334
+ if (p.lifetime <= 0) {
335
+ particles.splice(i, 1);
336
+ i--;
337
+ }
338
+ }
339
+ }
340
+
341
+ // Create particles
342
+ function createParticles(x, y, count) {
343
+ for (let i = 0; i < count; i++) {
344
+ particles.push({
345
+ x: x,
346
+ y: y,
347
+ radius: Math.random() * 3 + 1,
348
+ vx: (Math.random() - 0.5) * 5,
349
+ vy: (Math.random() - 0.5) * 5,
350
+ lifetime: Math.floor(Math.random() * 30) + 20
351
+ });
352
+ }
353
+ }
354
+
355
+ // Collision detection
356
+ function collisionDetection() {
357
+ for (let c = 0; c < brickColumnCount; c++) {
358
+ for (let r = 0; r < brickRowCount; r++) {
359
+ const brick = bricks[c][r];
360
+ if (brick.visible) {
361
+ if (
362
+ x > brick.x &&
363
+ x < brick.x + brickWidth &&
364
+ y > brick.y &&
365
+ y < brick.y + brickHeight
366
+ ) {
367
+ dy = -dy;
368
+ brick.health--;
369
+
370
+ // Create particles on hit
371
+ createParticles(
372
+ brick.x + brickWidth / 2,
373
+ brick.y + brickHeight / 2,
374
+ 10
375
+ );
376
+
377
+ if (brick.health <= 0) {
378
+ brick.visible = false;
379
+ score += 10 * level;
380
+ scoreDisplay.textContent = score;
381
+
382
+ // Check if all bricks are cleared
383
+ if (checkLevelComplete()) {
384
+ levelUp();
385
+ }
386
+ }
387
+ }
388
+ }
389
+ }
390
+ }
391
+ }
392
+
393
+ // Check if level is complete
394
+ function checkLevelComplete() {
395
+ for (let c = 0; c < brickColumnCount; c++) {
396
+ for (let r = 0; r < brickRowCount; r++) {
397
+ if (bricks[c][r].visible) {
398
+ return false;
399
+ }
400
+ }
401
+ }
402
+ return true;
403
+ }
404
+
405
+ // Level up
406
+ function levelUp() {
407
+ level++;
408
+ levelDisplay.textContent = level;
409
+
410
+ // Increase difficulty
411
+ brickRowCount = Math.min(8, brickRowCount + 1);
412
+ dx *= 1.1;
413
+ dy *= 1.1;
414
+
415
+ // Reset ball position
416
+ x = canvas.width / 2;
417
+ y = canvas.height - 30;
418
+
419
+ // Create new bricks
420
+ initBricks();
421
+
422
+ // Show level up message
423
+ const levelUpDiv = document.createElement('div');
424
+ levelUpDiv.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold gothic-text text-red-500 bg-black bg-opacity-80 px-8 py-4 rounded-lg';
425
+ levelUpDiv.textContent = `LEVEL ${level}`;
426
+ document.body.appendChild(levelUpDiv);
427
+
428
+ setTimeout(() => {
429
+ levelUpDiv.style.opacity = '0';
430
+ setTimeout(() => {
431
+ document.body.removeChild(levelUpDiv);
432
+ }, 500);
433
+ }, 1500);
434
+ }
435
+
436
+ // Game over
437
+ function gameOver() {
438
+ gameRunning = false;
439
+ finalScore.textContent = `Score: ${score}`;
440
+ gameOverScreen.classList.remove('hidden');
441
+ gameOverScreen.classList.add('flex');
442
+ }
443
+
444
+ // Reset game
445
+ function resetGame() {
446
+ score = 0;
447
+ lives = 3;
448
+ level = 1;
449
+ scoreDisplay.textContent = score;
450
+ livesDisplay.textContent = lives;
451
+ levelDisplay.textContent = level;
452
+
453
+ x = canvas.width / 2;
454
+ y = canvas.height - 30;
455
+ dx = 4;
456
+ dy = -4;
457
+ paddleX = (canvas.width - paddleWidth) / 2;
458
+
459
+ brickRowCount = 5;
460
+ initBricks();
461
+
462
+ gameOverScreen.classList.add('hidden');
463
+ gameOverScreen.classList.remove('flex');
464
+ }
465
+
466
+ // Main draw function
467
+ function draw() {
468
+ if (!gameRunning) return;
469
+
470
+ // Clear canvas with dark translucent overlay for motion blur effect
471
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
472
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
473
+
474
+ // Draw game elements
475
+ drawBricks();
476
+ drawBall();
477
+ drawPaddle();
478
+ drawParticles();
479
+
480
+ // Collision detection
481
+ collisionDetection();
482
+
483
+ // Wall collision
484
+ if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
485
+ dx = -dx;
486
+ createParticles(x, y, 5);
487
+ }
488
+
489
+ if (y + dy < ballRadius) {
490
+ dy = -dy;
491
+ createParticles(x, y, 5);
492
+ } else if (y + dy > canvas.height - ballRadius) {
493
+ // Paddle collision
494
+ if (x > paddleX && x < paddleX + paddleWidth) {
495
+ // Calculate angle based on where ball hits paddle
496
+ const hitPosition = (x - paddleX) / paddleWidth;
497
+ const angle = (hitPosition - 0.5) * Math.PI / 3; // -30 to 30 degrees
498
+
499
+ // Calculate new direction
500
+ const speed = Math.sqrt(dx * dx + dy * dy) * 1.05; // Slightly increase speed
501
+ dy = -Math.abs(Math.cos(angle) * speed);
502
+ dx = Math.sin(angle) * speed;
503
+
504
+ createParticles(x, y, 10);
505
+ } else {
506
+ // Ball missed paddle
507
+ lives--;
508
+ livesDisplay.textContent = lives;
509
+
510
+ if (lives <= 0) {
511
+ gameOver();
512
+ } else {
513
+ // Reset ball position
514
+ x = canvas.width / 2;
515
+ y = canvas.height - 30;
516
+ dx = 4;
517
+ dy = -4;
518
+ paddleX = (canvas.width - paddleWidth) / 2;
519
+ }
520
+ }
521
+ }
522
+
523
+ // Paddle movement
524
+ if (rightPressed && paddleX < canvas.width - paddleWidth) {
525
+ paddleX += 7;
526
+ } else if (leftPressed && paddleX > 0) {
527
+ paddleX -= 7;
528
+ }
529
+
530
+ // Move ball
531
+ x += dx;
532
+ y += dy;
533
+
534
+ requestAnimationFrame(draw);
535
+ }
536
+
537
+ // Event listeners
538
+ document.addEventListener('keydown', keyDownHandler);
539
+ document.addEventListener('keyup', keyUpHandler);
540
+ canvas.addEventListener('mousemove', mouseMoveHandler);
541
+ canvas.addEventListener('touchmove', touchMoveHandler, { passive: false });
542
+
543
+ function keyDownHandler(e) {
544
+ if (e.key === 'Right' || e.key === 'ArrowRight') {
545
+ rightPressed = true;
546
+ } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
547
+ leftPressed = true;
548
+ }
549
+ }
550
+
551
+ function keyUpHandler(e) {
552
+ if (e.key === 'Right' || e.key === 'ArrowRight') {
553
+ rightPressed = false;
554
+ } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
555
+ leftPressed = false;
556
+ }
557
+ }
558
+
559
+ function mouseMoveHandler(e) {
560
+ const relativeX = e.clientX - canvas.offsetLeft;
561
+ if (relativeX > 0 && relativeX < canvas.width) {
562
+ paddleX = relativeX - paddleWidth / 2;
563
+ }
564
+ }
565
+
566
+ function touchMoveHandler(e) {
567
+ e.preventDefault();
568
+ const touch = e.touches[0];
569
+ const relativeX = touch.clientX - canvas.offsetLeft;
570
+ if (relativeX > 0 && relativeX < canvas.width) {
571
+ paddleX = relativeX - paddleWidth / 2;
572
+ }
573
+ }
574
+
575
+ // Button event listeners
576
+ startButton.addEventListener('click', () => {
577
+ startScreen.classList.add('hidden');
578
+ gameRunning = true;
579
+ resetGame();
580
+ draw();
581
+ });
582
+
583
+ restartButton.addEventListener('click', () => {
584
+ resetGame();
585
+ gameRunning = true;
586
+ draw();
587
+ });
588
+
589
+ // Initialize game
590
+ initBricks();
591
+
592
+ // Add ambient candle flicker effect
593
+ setInterval(() => {
594
+ const flickerElements = document.querySelectorAll('.candle-flicker');
595
+ flickerElements.forEach(el => {
596
+ el.style.opacity = 0.7 + Math.random() * 0.3;
597
+ });
598
+ }, 100);
599
+ });
600
+ </script>
601
+ <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=Xie/deepsite-arkanoid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
602
+ </html>
prompts.txt ADDED
File without changes