<!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:7559

1466

←

Prev Next

→

<!DOCTYPE html> <html> <head> ..ALL
Developer User4054｜Date and time 23/7/8 18:59:03
Build time 12.989 sec｜Game capacity 3.108KB｜

Script

will automatically move up and down to try and block the ball. Your objective is to hit the ball past the computer's paddle and score as many points as possible. 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 block the ball. Your objective is to hit the ball past the computer's paddle and score as many points as possible. Good luck!</pre>   <script>     // Create canvas context     const canvas = document.getElementById("pong");     const ctx = canvas.getContext("2d");     // Create the pong paddle     const paddleWidth = 10, paddleHeight = 100;     const player = {       x : 0,       y : canvas.height/2 - paddleHeight/2,       width : paddleWidth,       height : paddleHeight,       color : "#FF0000",       dy : 10     };     const computer = {       x : canvas.width - paddleWidth,       y : canvas.height/2 - paddleHeight/2,       width : paddleWidth,       height : paddleHeight,       color : "#0000FF",       dy : 5     };     // Create the pong ball     const ball = {       x : canvas.width/2,       y : canvas.height/2,       radius : 10,       speed : 5,       dx : 5,       dy : 5,       color : "#000000"     };     // Draw the pong paddle     function drawPaddle(x, y, width, height, color) {       ctx.fillStyle = color;       ctx.fillRect(x, y, width, height);     }     // Draw the pong ball     function drawBall(x, y, radius, color) {       ctx.fillStyle = color;       ctx.beginPath();       ctx.arc(x, y, radius, 0, Math.PI*2, false);       ctx.closePath();       ctx.fill();     }     // Draw the pong net     function drawNet() {       ctx.fillStyle = "#000000";       ctx.fillRect(canvas.width/2 - 1, 0, 2, canvas.height);     }     // Draw the game     function draw() {       // Clear the canvas       ctx.clearRect(0, 0, canvas.width, canvas.height);       // Draw the pong paddle       drawPaddle(player.x, player.y, player.width, player.height, player.color);       drawPaddle(computer.x, computer.y, computer.width, computer.height, computer.color);       // Draw the pong ball       drawBall(ball.x, ball.y, ball.radius, ball.color);       // Draw the pong net       drawNet();     }     // Update the game     function update() {       // Move the player's paddle       document.addEventListener("mousemove", movePaddle);       function movePaddle(event) {         let rect = canvas.getBoundingClientRect();         player.y = event.clientY - rect.top - player.height/2;       }       // Move the ball       ball.x += ball.dx;       ball.y += ball.dy;       // Check for collision with walls       if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {         ball.dy *= -1;       }       // Check for collision with paddles       if(ball.y + ball.radius > player.y && ball.y - ball.radius < player.y + player.height && ball.dx < 0) {         if(ball.x - ball.radius < player.x + player.width) {           ball.dx *= -1;         }       }       if(ball.y + ball.radius > computer.y && ball.y - ball.radius < computer.y + computer.height && ball.dx > 0) {         if(ball.x + ball.radius > computer.x) {           ball.dx *= -1;         }       }     }     // Game loop     function gameLoop() {       update();       draw();       requestAnimationFrame(gameLoop);     }     gameLoop();   </script> </body> </html>