Hugging Face's logo

Spaces:
ahmadreza13
/
Ping-pong
Running

App Files Community
ahmadreza13 commited on
Commit
8ef7d61
·
verified ·
1 Parent(s): 1e02ade

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +212 -162
index.html CHANGED
@@ -1,165 +1,215 @@
1
- const canvas = document.getElementById('pongCanvas');
2
- const ctx = canvas.getContext('2d');
3
-
4
- // Set canvas dimensions
5
- canvas.width = 800;
6
- canvas.height = 600;
7
-
8
- // Ball properties
9
- const ball = {
10
- x: canvas.width / 2,
11
- y: canvas.height / 2,
12
- radius: 10,
13
- speed: 7,
14
- dx: 4,
15
- dy: -4
16
- };
17
-
18
- // Paddle properties
19
- const paddleWidth = 10;
20
- const paddleHeight = 100;
21
- const leftPaddle = {
22
- x: 0,
23
- y: (canvas.height - paddleHeight) / 2,
24
- width: paddleWidth,
25
- height: paddleHeight,
26
- speed: 8
27
- };
28
- const rightPaddle = {
29
- x: canvas.width - paddleWidth,
30
- y: (canvas.height - paddleHeight) / 2,
31
- width: paddleWidth,
32
- height: paddleHeight,
33
- speed: 8
34
- };
35
-
36
- // Player scores
37
- let leftScore = 0;
38
- let rightScore = 0;
39
-
40
- // Game mode
41
- let isPlayerVsAI = false;
42
-
43
- // Draw functions
44
- function drawBall() {
45
- ctx.beginPath();
46
- ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
47
- ctx.fillStyle = '#fff';
48
- ctx.fill();
49
- ctx.closePath();
50
- }
51
-
52
- function drawPaddle(paddle) {
53
- ctx.beginPath();
54
- ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
55
- ctx.fillStyle = '#fff';
56
- ctx.fill();
57
- ctx.closePath();
58
- }
59
-
60
- function drawScores() {
61
- ctx.font = '30px Arial';
62
- ctx.fillStyle = '#fff';
63
- ctx.fillText(leftScore, canvas.width / 4, 50);
64
- ctx.fillText(rightScore, 3 * canvas.width / 4, 50);
65
- }
66
-
67
- // Update game state
68
- function update() {
69
- // Move ball
70
- ball.x += ball.dx;
71
- ball.y += ball.dy;
72
-
73
- // Bounce ball off top and bottom walls
74
- if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
75
- ball.dy = -ball.dy;
76
- }
77
-
78
- // Bounce ball off paddles
79
- if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
80
- ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) {
81
- ball.dx = -ball.dx;
82
- }
83
- if (ball.x + ball.radius > rightPaddle.x &&
84
- ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) {
85
- ball.dx = -ball.dx;
86
- }
87
-
88
- // Score points
89
- if (ball.x - ball.radius < 0) {
90
- rightScore++;
91
- resetBall();
92
- }
93
- if (ball.x + ball.radius > canvas.width) {
94
- leftScore++;
95
- resetBall();
96
- }
97
-
98
- // Move paddles
99
- if (!isPlayerVsAI) {
100
- if (keys['ArrowUp'] && rightPaddle.y > 0) {
101
- rightPaddle.y -= rightPaddle.speed;
102
  }
103
- if (keys['ArrowDown'] && rightPaddle.y < canvas.height - rightPaddle.height) {
104
- rightPaddle.y += rightPaddle.speed;
105
  }
106
- } else {
107
- // AI logic
108
- if (rightPaddle.y + rightPaddle.height / 2 < ball.y) {
109
- rightPaddle.y += rightPaddle.speed;
110
- } else if (rightPaddle.y + rightPaddle.height / 2 > ball.y) {
111
- rightPaddle.y -= rightPaddle.speed;
112
  }
113
- }
114
-
115
- if (keys['w'] && leftPaddle.y > 0) {
116
- leftPaddle.y -= leftPaddle.speed;
117
- }
118
- if (keys['s'] && leftPaddle.y < canvas.height - leftPaddle.height) {
119
- leftPaddle.y += leftPaddle.speed;
120
- }
121
- }
122
-
123
- // Reset ball position
124
- function resetBall() {
125
- ball.x = canvas.width / 2;
126
- ball.y = canvas.height / 2;
127
- ball.dx = -ball.dx;
128
- }
129
-
130
- // Draw everything
131
- function draw() {
132
- ctx.clearRect(0, 0, canvas.width, canvas.height);
133
- drawBall();
134
- drawPaddle(leftPaddle);
135
- drawPaddle(rightPaddle);
136
- drawScores();
137
- }
138
-
139
- // Game loop
140
- function gameLoop() {
141
- update();
142
- draw();
143
- requestAnimationFrame(gameLoop);
144
- }
145
-
146
- // Key handling
147
- const keys = {};
148
- document.addEventListener('keydown', function(e) {
149
- keys[e.key] = true;
150
- });
151
- document.addEventListener('keyup', function(e) {
152
- delete keys[e.key];
153
- });
154
-
155
- // Button event listeners
156
- document.getElementById('playerVsPlayer').addEventListener('click', function() {
157
- isPlayerVsAI = false;
158
- });
159
-
160
- document.getElementById('playerVsAI').addEventListener('click', function() {
161
- isPlayerVsAI = true;
162
- });
163
-
164
- // Start the game
165
- gameLoop();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Pong Game</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ height: 100vh;
14
+ background-color: #000;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
+ canvas {
17
+ border: 2px solid #fff;
18
  }
19
+ .controls {
20
+ margin-top: 20px;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
 
24
  }
25
+ .speed-control {
26
+ margin-top: 10px;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <canvas id="pongCanvas"></canvas>
32
+ <div class="controls">
33
+ <button id="playerVsPlayer">Player vs Player</button>
34
+ <button id="playerVsAI">Player vs AI</button>
35
+ <div class="speed-control">
36
+ <label for="ballSpeed">Ball Speed:</label>
37
+ <input type="range" id="ballSpeed" min="1" max="10" value="7" oninput="updateBallSpeed(this.value)">
38
+ </div>
39
+ </div>
40
+ <script>
41
+ const canvas = document.getElementById('pongCanvas');
42
+ const ctx = canvas.getContext('2d');
43
+
44
+ // Set canvas dimensions
45
+ canvas.width = 800;
46
+ canvas.height = 600;
47
+
48
+ // Ball properties
49
+ const ball = {
50
+ x: canvas.width / 2,
51
+ y: canvas.height / 2,
52
+ radius: 10,
53
+ speed: 7,
54
+ dx: 4,
55
+ dy: -4
56
+ };
57
+
58
+ // Paddle properties
59
+ const paddleWidth = 10;
60
+ const paddleHeight = 100;
61
+ const leftPaddle = {
62
+ x: 0,
63
+ y: (canvas.height - paddleHeight) / 2,
64
+ width: paddleWidth,
65
+ height: paddleHeight,
66
+ speed: 8
67
+ };
68
+ const rightPaddle = {
69
+ x: canvas.width - paddleWidth,
70
+ y: (canvas.height - paddleHeight) / 2,
71
+ width: paddleWidth,
72
+ height: paddleHeight,
73
+ speed: 8
74
+ };
75
+
76
+ // Player scores
77
+ let leftScore = 0;
78
+ let rightScore = 0;
79
+
80
+ // Game mode
81
+ let isPlayerVsAI = false;
82
+
83
+ // Update ball speed
84
+ function updateBallSpeed(newSpeed) {
85
+ ball.speed = newSpeed;
86
+ ball.dx = Math.sign(ball.dx) * newSpeed;
87
+ ball.dy = Math.sign(ball.dy) * newSpeed;
88
+ }
89
+
90
+ // Draw functions
91
+ function drawBall() {
92
+ ctx.beginPath();
93
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
94
+ ctx.fillStyle = '#fff';
95
+ ctx.fill();
96
+ ctx.closePath();
97
+ }
98
+
99
+ function drawPaddle(paddle) {
100
+ ctx.beginPath();
101
+ ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
102
+ ctx.fillStyle = '#fff';
103
+ ctx.fill();
104
+ ctx.closePath();
105
+ }
106
+
107
+ function drawScores() {
108
+ ctx.font = '30px Arial';
109
+ ctx.fillStyle = '#fff';
110
+ ctx.fillText(leftScore, canvas.width / 4, 50);
111
+ ctx.fillText(rightScore, 3 * canvas.width / 4, 50);
112
+ }
113
+
114
+ // Update game state
115
+ function update() {
116
+ // Move ball
117
+ ball.x += ball.dx;
118
+ ball.y += ball.dy;
119
+
120
+ // Bounce ball off top and bottom walls
121
+ if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
122
+ ball.dy = -ball.dy;
123
+ }
124
+
125
+ // Bounce ball off paddles
126
+ if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
127
+ ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) {
128
+ ball.dx = -ball.dx;
129
+ }
130
+ if (ball.x + ball.radius > rightPaddle.x &&
131
+ ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) {
132
+ ball.dx = -ball.dx;
133
+ }
134
+
135
+ // Score points
136
+ if (ball.x - ball.radius < 0) {
137
+ rightScore++;
138
+ resetBall();
139
+ }
140
+ if (ball.x + ball.radius > canvas.width) {
141
+ leftScore++;
142
+ resetBall();
143
+ }
144
+
145
+ // Move paddles
146
+ if (!isPlayerVsAI) {
147
+ if (keys['ArrowUp'] && rightPaddle.y > 0) {
148
+ rightPaddle.y -= rightPaddle.speed;
149
+ }
150
+ if (keys['ArrowDown'] && rightPaddle.y < canvas.height - rightPaddle.height) {
151
+ rightPaddle.y += rightPaddle.speed;
152
+ }
153
+ } else {
154
+ // AI logic
155
+ if (rightPaddle.y + rightPaddle.height / 2 < ball.y) {
156
+ rightPaddle.y += rightPaddle.speed;
157
+ } else if (rightPaddle.y + rightPaddle.height / 2 > ball.y) {
158
+ rightPaddle.y -= rightPaddle.speed;
159
+ }
160
+ }
161
+
162
+ if (keys['w'] && leftPaddle.y > 0) {
163
+ leftPaddle.y -= leftPaddle.speed;
164
+ }
165
+ if (keys['s'] && leftPaddle.y < canvas.height - leftPaddle.height) {
166
+ leftPaddle.y += leftPaddle.speed;
167
+ }
168
+ }
169
+
170
+ // Reset ball position
171
+ function resetBall() {
172
+ ball.x = canvas.width / 2;
173
+ ball.y = canvas.height / 2;
174
+ ball.dx = -ball.dx;
175
+ }
176
+
177
+ // Draw everything
178
+ function draw() {
179
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
180
+ drawBall();
181
+ drawPaddle(leftPaddle);
182
+ drawPaddle(rightPaddle);
183
+ drawScores();
184
+ }
185
+
186
+ // Game loop
187
+ function gameLoop() {
188
+ update();
189
+ draw();
190
+ requestAnimationFrame(gameLoop);
191
+ }
192
+
193
+ // Key handling
194
+ const keys = {};
195
+ document.addEventListener('keydown', function(e) {
196
+ keys[e.key] = true;
197
+ });
198
+ document.addEventListener('keyup', function(e) {
199
+ delete keys[e.key];
200
+ });
201
+
202
+ // Button event listeners
203
+ document.getElementById('playerVsPlayer').addEventListener('click', function() {
204
+ isPlayerVsAI = false;
205
+ });
206
+
207
+ document.getElementById('playerVsAI').addEventListener('click', function() {
208
+ isPlayerVsAI = true;
209
+ });
210
+
211
+ // Start the game
212
+ gameLoop();
213
+ </script>
214
+ </body>
215
+ </html>