<!DOCTYPE html> <html> <head> <title>Table Tennis Game</title> <style> canvas { border: 1px solid black; background-color: #f2f2f2; } </style> </head> <body> <canvas id="pong" width="350" height="400"></canvas> <pre> To play the game, simply copy and paste the code into a text editor and save it with a .html extension. Then open the file in a web browser. You can move the player's paddle by moving your mouse inside the browser window. The computer-controlled paddle's game

Click here for free DL of the app version that can save data.

No:7560

1669

←

Prev Next

→

<!DOCTYPE html> <html> <head> ..ALL
Developer User4054｜Date and time 23/7/8 19:13:06
Build time 19.355 sec｜Game capacity 3.08KB｜

Script

will automatically move up and down to try and hit the ball. Your goal is to keep the ball from hitting the edges of the canvas and make it past the computer’s paddle. Good luck!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

will automatically move up and down to try and hit the ball. Your goal is to keep the ball from hitting the edges of the canvas and make it past the computer’s paddle. Good luck!   </pre>   <script>     const canvas = document.getElementById("pong");     const context = canvas.getContext("2d");          // Create the user paddle (player)     const user = {       x: 0,       y: canvas.height / 2 - 50,       width: 10,       height: 100,       color: "#FF8C00",       dy: 8     };          // Create the computer paddle (opponent)     const computer = {       x: canvas.width - 10,       y: canvas.height / 2 - 50,       width: 10,       height: 100,       color: "#FF8C00",       dy: 6     };          // Create the ball     const ball = {       x: canvas.width / 2,       y: canvas.height / 2,       radius: 10,       speed: 4,       dx: 4,       dy: 4,       color: "#8A2BE2"     };          // Draw a rectangle on the canvas     function drawRect(x, y, width, height, color) {       context.fillStyle = color;       context.fillRect(x, y, width, height);     }          // Create the net in the middle of the canvas     function drawNet() {       for (let i = 0; i <= canvas.height; i += 15) {         drawRect(canvas.width / 2 - 1, i, 2, 10, "#FFD700");       }     }          // Draw the ball on the canvas     function drawCircle(x, y, radius, color) {       context.fillStyle = color;       context.beginPath();       context.arc(x, y, radius, 0, Math.PI * 2, false);       context.closePath();       context.fill();     }          // Move the player paddle up or down     function movePaddle(e) {       let rect = canvas.getBoundingClientRect();       user.y = e.clientY - rect.top - user.height / 2;     }          canvas.addEventListener("mousemove", movePaddle);          // Move the ball on the canvas     function moveBall() {       ball.x += ball.dx;       ball.y += ball.dy;              // Check if the ball hits the top or bottom of the canvas       if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {         ball.dy *= -1;       }              // Check if the ball hits the player or computer paddle       if (ball.x - ball.radius < user.x + user.width && ball.y - ball.radius < user.y + user.height && ball.y + ball.radius > user.y) {         ball.dx *= -1;       } else if (ball.x + ball.radius > computer.x && ball.y - ball.radius < computer.y + computer.height && ball.y + ball.radius > computer.y) {         ball.dx *= -1;       }     }          // Update the canvas, including the paddles and ball     function update() {       context.clearRect(0, 0, canvas.width, canvas.height);       drawNet();       drawRect(user.x, user.y, user.width, user.height, user.color);       drawRect(computer.x, computer.y, computer.width, computer.height, computer.color);       drawCircle(ball.x, ball.y, ball.radius, ball.color);     }          // Call the update function repeatedly to create the animation     function gameLoop() {       update();       moveBall();     }          setInterval(gameLoop, 1000 / 60);   </script> </body> </html>