Hugging Face's logo

Spaces:
akhaliq
/
grok-pong
Running

App Files Community
akhaliq HF Staff commited on
Commit
f79607d
·
verified ·
1 Parent(s): 3a4f99d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +136 -18
index.html CHANGED
@@ -1,19 +1,137 @@
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>
3
+ <head>
4
+ <title>Autonomous Pong</title>
5
+ <style>
6
+ canvas {
7
+ border: 1px solid white;
8
+ background: black;
9
+ margin: 20px auto;
10
+ display: block;
11
+ }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <canvas id="gameCanvas" width="800" height="400"></canvas>
16
+
17
+ <script>
18
+ const canvas = document.getElementById('gameCanvas');
19
+ const ctx = canvas.getContext('2d');
20
+
21
+ // Game objects
22
+ const ball = {
23
+ x: canvas.width / 2,
24
+ y: canvas.height / 2,
25
+ radius: 10,
26
+ speedX: 5,
27
+ speedY: 5
28
+ };
29
+
30
+ const paddleWidth = 10;
31
+ const paddleHeight = 60;
32
+
33
+ const leftPaddle = {
34
+ x: 50,
35
+ y: canvas.height / 2 - paddleHeight / 2,
36
+ speed: 4
37
+ };
38
+
39
+ const rightPaddle = {
40
+ x: canvas.width - 50 - paddleWidth,
41
+ y: canvas.height / 2 - paddleHeight / 2,
42
+ speed: 4
43
+ };
44
+
45
+ // Game loop
46
+ function gameLoop() {
47
+ update();
48
+ draw();
49
+ requestAnimationFrame(gameLoop);
50
+ }
51
+
52
+ // Update game state
53
+ function update() {
54
+ // Move ball
55
+ ball.x += ball.speedX;
56
+ ball.y += ball.speedY;
57
+
58
+ // Ball collision with top and bottom
59
+ if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
60
+ ball.speedY = -ball.speedY;
61
+ }
62
+
63
+ // Autonomous paddle movement
64
+ // Left paddle follows ball
65
+ if (ball.y > leftPaddle.y + paddleHeight / 2) {
66
+ leftPaddle.y += leftPaddle.speed;
67
+ } else {
68
+ leftPaddle.y -= leftPaddle.speed;
69
+ }
70
+
71
+ // Right paddle follows ball
72
+ if (ball.y > rightPaddle.y + paddleHeight / 2) {
73
+ rightPaddle.y += rightPaddle.speed;
74
+ } else {
75
+ rightPaddle.y -= rightPaddle.speed;
76
+ }
77
+
78
+ // Keep paddles within canvas
79
+ leftPaddle.y = Math.max(0, Math.min(canvas.height - paddleHeight, leftPaddle.y));
80
+ rightPaddle.y = Math.max(0, Math.min(canvas.height - paddleHeight, rightPaddle.y));
81
+
82
+ // Ball collision with paddles
83
+ if (
84
+ (ball.x - ball.radius < leftPaddle.x + paddleWidth &&
85
+ ball.y > leftPaddle.y &&
86
+ ball.y < leftPaddle.y + paddleHeight) ||
87
+ (ball.x + ball.radius > rightPaddle.x &&
88
+ ball.y > rightPaddle.y &&
89
+ ball.y < rightPaddle.y + paddleHeight)
90
+ ) {
91
+ ball.speedX = -ball.speedX;
92
+ // Add some randomness to ball direction
93
+ ball.speedY += (Math.random() - 0.5) * 2;
94
+ }
95
+
96
+ // Reset ball if it goes past paddles
97
+ if (ball.x < 0 || ball.x > canvas.width) {
98
+ ball.x = canvas.width / 2;
99
+ ball.y = canvas.height / 2;
100
+ ball.speedX = -ball.speedX;
101
+ ball.speedY = (Math.random() - 0.5) * 10;
102
+ }
103
+ }
104
+
105
+ // Draw game elements
106
+ function draw() {
107
+ // Clear canvas
108
+ ctx.fillStyle = 'black';
109
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
110
+
111
+ // Draw ball
112
+ ctx.beginPath();
113
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
114
+ ctx.fillStyle = 'white';
115
+ ctx.fill();
116
+ ctx.closePath();
117
+
118
+ // Draw paddles
119
+ ctx.fillStyle = 'white';
120
+ ctx.fillRect(leftPaddle.x, leftPaddle.y, paddleWidth, paddleHeight);
121
+ ctx.fillRect(rightPaddle.x, rightPaddle.y, paddleWidth, paddleHeight);
122
+
123
+ // Draw center line
124
+ ctx.beginPath();
125
+ ctx.setLineDash([5, 15]);
126
+ ctx.moveTo(canvas.width / 2, 0);
127
+ ctx.lineTo(canvas.width / 2, canvas.height);
128
+ ctx.strokeStyle = 'white';
129
+ ctx.stroke();
130
+ ctx.setLineDash([]);
131
+ }
132
+
133
+ // Start the game
134
+ gameLoop();
135
+ </script>
136
+ </body>
137
+ </html>