Hugging Face's logo

Spaces:
akhaliq
/
autonomous-pong
Running

App Files Community
akhaliq HF Staff commited on
Commit
f5d2385
·
verified ·
1 Parent(s): 9b60083

Update index.html

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