Fait un jeu ou une bille traverse l'écran, et où le joueur contrôle une barre pour renvoyer la balle. L'autre barre sera contrôle par le programme qui essaiera de gagner's game

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

No:50213

←

Prev Next

→

Fait un jeu ou une bille traverse l'écran, et où l..ALL
Developer User21268｜Date and time 24/3/8 3:24:51
Build time 9.13 sec｜Game capacity 2.494KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>Pong Game</title>
   <style>
      #canvas {
         background-color: black;
         display: block;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300"></canvas>
   <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

const ball = {
         x: canvas.width / 2,
         y: canvas.height / 2,
         dx: 2,
         dy: 2,
         radius: 10,
      };

const player = {
         x: canvas.width / 2 - 50,
         y: canvas.height - 10,
         width: 100,
         height: 10
      };

const opponent = {
         x: canvas.width / 2 - 50,
         y: 0,
         width: 100,
         height: 10
      };

function draw() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw ball
         ctx.beginPath();
         ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
         ctx.fillStyle = 'white';
         ctx.fill();
         ctx.closePath();

// Draw player bar
         ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw opponent bar
         ctx.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);
      }

function update() {
         ball.x += ball.dx;
         ball.y += ball.dy;

// Ball collisions
         if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.dx = -ball.dx;
         }
         if (ball.y - ball.radius < 0) {
            ball.dy = -ball.dy;
         }
         if (ball.y + ball.radius > canvas.height) {
            // Game over condition
            alert('Game Over!');
            document.location.reload();
         }

// Player bar collisions
         if (ball.y + ball.radius > player.y && ball.x > player.x && ball.x < player.x + player.width) {
            ball.dy = -ball.dy;
         }

// Opponent bar movements
         opponent.x = ball.x - opponent.width / 2;

draw();
      }

function gameLoop() {
         update();
         requestAnimationFrame(gameLoop);
      }

canvas.addEventListener('mousemove', function(e) {
         let rect = canvas.getBoundingClientRect();
         player.x = e.clientX - rect.left - player.width / 2;
      });

gameLoop();
   </script>
</body>
</html>