AI game creator

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

No:48229

←

Prev Next

→

Make ping pong
Developer User20718｜Date and time 24/3/1 20:03:13
Build time 11.9 sec｜Game capacity 2.798KB｜

Script

Enjoy playing the ping pong game!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ping Pong Game</title>
</head>
<body>
  <canvas id="canvas" width="800" height="400"></canvas>

let ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      dx: 5,
      dy: 5,
      size: 10,
    };

let paddle1 = {
      x: 20,
      y: canvas.height / 2 - 50,
      width: 10,
      height: 100,
      score: 0,
    };

let paddle2 = {
      x: canvas.width - 30,
      y: canvas.height / 2 - 50,
      width: 10,
      height: 100,
      score: 0,
    };

function drawBall() {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
      ctx.fillStyle = "#FFFFFF";
      ctx.fill();
      ctx.closePath();
    }

function drawPaddle(paddle) {
      ctx.fillStyle = "#FFFFFF";
      ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
    }

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

drawBall();
      drawPaddle(paddle1);
      drawPaddle(paddle2);
      drawScore();

ball.x += ball.dx;
      ball.y += ball.dy;

if (ball.y + ball.size >= canvas.height || ball.y - ball.size <= 0) ball.dy *= -1;

if (ball.x - ball.size <= paddle1.x + paddle1.width && ball.y + ball.size >= paddle1.y && ball.y - ball.size <= paddle1.y + paddle1.height) {
        ball.dx *= -1;
      }

if (ball.x + ball.size >= paddle2.x && ball.y + ball.size >= paddle2.y && ball.y - ball.size <= paddle2.y + paddle2.height) {
        ball.dx *= -1;
      }

if (ball.x + ball.size < 0) {
        paddle2.score++;
        resetBall();
      }

if (ball.x - ball.size > canvas.width) {
        paddle1.score++;
        resetBall();
      }

if (paddle1.score === 5 || paddle2.score === 5) {
        alert(`Game over! ${paddle1.score} : ${paddle2.score}`);
        paddle1.score = 0;
        paddle2.score = 0;
      }
    }

function resetBall() {
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
      ball.dx *= -1;
    }

function movePaddle(evt) {
      let rect = canvas.getBoundingClientRect();

if (evt.clientX - rect.left > canvas.width / 2) {
        paddle2.y = evt.clientY - rect.top - paddle2.height / 2;
      } else {
        paddle1.y = evt.clientY - rect.top - paddle1.height / 2;
      }
    }

canvas.addEventListener('mousemove', movePaddle);

setInterval(update, 1000 / 60);
  </script>
</body>
</html>
```

Enjoy playing the ping pong game!