AI game creator

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

No:10872

←

Prev Next

→

Ping pong
Developer User4020｜Date and time 23/8/5 2:54:49
Build time 30.726 sec｜Game capacity 3.748KB｜

Script

Sure! Below is an example of a simple ping pong game implemented as a single HTML file using JavaScript, enclosed in script tags. The game can be played on a smartphone and incorporates pictograms for visual representation.

To play the game, open the HTML file on a smartphone's web browser. The game canvas will be displayed with a ball and a paddle. Drag your finger up or down on the canvas to control the paddle and prevent the ball from hitting the edges. Have fun 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>
    <style>
      #gameCanvas {
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="gameCanvas">
      <canvas id="pongCanvas" width="400" height="400"></canvas>
    </div>

// Define the ball object
      const ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        speed: 4,
        dx: 4,
        dy: -4,
      };

// Define the paddle object
      const paddle = {
        width: 10,
        height: 60,
        x: 0,
        y: canvas.height / 2 - 30,
        dy: 10,
      };

// Draw the ball on the canvas
      function drawBall() {
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        context.fillStyle = "#000";
        context.fill();
        context.closePath();
      }

// Draw the paddle on the canvas
      function drawPaddle() {
        context.beginPath();
        context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
        context.fillStyle = "#000";
        context.fill();
        context.closePath();
      }

// Update the canvas
      function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
        drawPaddle();

// Move the ball
        ball.x += ball.dx;
        ball.y += ball.dy;

// Check collision with canvas edges
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
          ball.dy *= -1;
        }

// Check collision with paddle
        if (
          ball.x - ball.radius < paddle.x + paddle.width &&
          ball.y + ball.radius > paddle.y &&
          ball.y - ball.radius < paddle.y + paddle.height
        ) {
          ball.dx *= -1;
        }

// Move the paddle
        paddle.y += paddle.dy;

// Prevent the paddle from moving outside the canvas
        if (paddle.y + paddle.height > canvas.height) {
          paddle.y = canvas.height - paddle.height;
        } else if (paddle.y < 0) {
          paddle.y = 0;
        }

// Call the update function again
        requestAnimationFrame(update);
      }

// Handle touch events on the canvas
      canvas.addEventListener("touchstart", function (e) {
        if (e.targetTouches.length === 1) {
          var touch = e.targetTouches[0];
          if (touch.pageY < paddle.y) {
            paddle.dy = -10;
          } else {
            paddle.dy = 10;
          }
        }
      });

canvas.addEventListener("touchmove", function (e) {
        e.preventDefault();
        if (e.targetTouches.length === 1) {
          var touch = e.targetTouches[0];
          if (touch.pageY < paddle.y) {
            paddle.dy = -10;
          } else {
            paddle.dy = 10;
          }
        }
      });

// Start the game
      update();
    </script>
  </body>
</html>
```