Auto Atari Pong with a 3 balls and for all devices's game

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

No:17032

110

←

Prev Next

→

Auto Atari Pong with a 3 balls and for all devices
Developer User7570｜Date and time 23/9/22 6:42:53
Build time 34.219 sec｜Game capacity 4.121KB｜

Script

Sure, I can help you with that! Below is an example of a single HTML file that implements a simplified version of Atari Pong with three balls. The game can be played on all devices, including smartphones. I have used emojis as pictograms for simplicity, but you can replace them with any other pictograms as per your preference.

You can copy and save the above code into a single HTML file with a `.html` extension and open it in a web browser to play the game. The game canvas will adapt to the size of the browser window, making it suitable for all devices, including smartphones. Enjoy!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Auto Atari Pong</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>
  <script>
    // Game variables
    const canvas = document.getElementById("pong");
    const context = canvas.getContext("2d");

const paddleWidth = 10;
    const paddleHeight = 100;

const player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "white", dy: 8 };
    const opponent = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "white", dy: 4 };

const ballRadius = 10;
    const balls = [
      { x: canvas.width / 2, y: canvas.height / 2, radius: ballRadius, speed: 4, dx: 4, dy: 4 },
      { x: canvas.width / 2, y: canvas.height / 2, radius: ballRadius, speed: 4, dx: -4, dy: -4 },
      { x: canvas.width / 2, y: canvas.height / 2, radius: ballRadius, speed: 4, dx: 4, dy: -4 }
    ];

let playerScore = 0;
    let opponentScore = 0;

// Move the paddles
    function movePaddle(event) {
      const rect = canvas.getBoundingClientRect();
      player.y = event.clientY - rect.top - player.height / 2;
    }

canvas.addEventListener("mousemove", movePaddle);

// Move the balls
    function moveBalls() {
      balls.forEach(ball => {
        ball.x += ball.dx;
        ball.y += ball.dy;

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

// Ball collision with paddles
        if (ball.x - ball.radius < player.x + player.width && ball.y > player.y && ball.y < player.y + player.height) {
          ball.dx *= -1;
        } else if (ball.x + ball.radius > opponent.x && ball.y > opponent.y && ball.y < opponent.y + opponent.height) {
          ball.dx *= -1;
        }

// Reset ball position if it goes out of bounds
        if (ball.x + ball.radius < 0) {
          opponentScore++;
          resetBall(ball);
        } else if (ball.x - ball.radius > canvas.width) {
          playerScore++;
          resetBall(ball);
        }
      });
    }

// Reset ball position
    function resetBall(ball) {
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
      ball.dx *= Math.random() > 0.5 ? 1 : -1;
      ball.dy *= Math.random() > 0.5 ? 1 : -1;
    }

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

// Draw paddles
      context.fillStyle = player.color;
      context.fillRect(player.x, player.y, player.width, player.height);

context.fillStyle = opponent.color;
      context.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);

// Draw balls
      balls.forEach(ball => {
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
        context.fillStyle = "white";
        context.fill();
        context.closePath();
      });

// Draw scores
      context.font = "32px Arial";
      context.fillStyle = "white";
      context.fillText(playerScore, canvas.width / 4, canvas.height / 6);
      context.fillText(opponentScore, 3 * canvas.width / 4, canvas.height / 6);

// Move paddles and balls
      moveBalls();

requestAnimationFrame(update);
    }

update();
  </script>
</body>
</html>
```