AI game creator

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

No:20582

←

Prev Next

→

Piong
Developer User9091｜Date and time 23/10/10 6:29:28
Build time 13.018 sec｜Game capacity 3.198KB｜

Script

Sure, here's a simple implementation of the game Pong in a single HTML file using JavaScript:

To play the game on a smartphone, open the HTML file in a web browser on your smartphone, and use the on-screen touch controls for moving the paddle up and down. The goal is to prevent the ball from hitting the top or bottom walls by bouncing it off the paddle.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure, here's a simple implementation of the game Pong in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Pong Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="pong" width="800" height="400"></canvas>

// Create the pong paddle
      const paddleWidth = 10, paddleHeight = 70;
      const player = {
        x: 0,
        y: canvas.height / 2 - paddleHeight / 2,
        width: paddleWidth,
        height: paddleHeight,
        color: "#FFFFFF",
        dy: 10
      };

// Create the pong ball
      const ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        speed: 4,
        dx: 4,
        dy: 4,
        color: "#FFFFFF"
      };

// Draw the paddle on the canvas
      function drawPaddle(x, y, width, height, color) {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
      }

// Move the paddle
      function movePaddle() {
        document.addEventListener("keydown", function(event) {
          if (event.key === "ArrowUp" && player.y > 0) {
            player.y -= player.dy;
          } else if (event.key === "ArrowDown" && player.y + player.height < canvas.height) {
            player.y += player.dy;
          }
        });
      }

// Draw the ball on the canvas
      function drawBall(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 ball
      function moveBall() {
        ball.x += ball.dx;
        ball.y += ball.dy;

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

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

// Clear the canvas and redraw the game elements
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle(player.x, player.y, player.width, player.height, player.color);
        drawBall(ball.x, ball.y, ball.radius, ball.color);
      }

// Game loop
      function gameLoop() {
        movePaddle();
        moveBall();
        draw();
        requestAnimationFrame(gameLoop);
      }

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