Auto Atari Pong with 12 balls for all devices's game

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

No:17046

102

←

Prev Next

→

Auto Atari Pong with 12 balls for all devices
Developer User7570｜Date and time 23/9/22 7:08:06
Build time 41.561 sec｜Game capacity 5.48KB｜

Script

Sure! Here's an example of an Auto Atari Pong game implemented as a single HTML file using JavaScript. Note that since Assistants do not have the capability to run interactive games, you'll need to copy this code into a separate HTML file and open it in a browser to play the game.

To play the game, save the above code into a file with a `.html` extension (e.g., `pong.html`). Then, open the file in a web browser on your smartphone or any other device. You'll be able to control the player paddle using the arrow keys or the up/down keys. The goal is to bounce the ball off your paddle and prevent it from passing your side. Each time the ball passes your paddle, the computer scores a point. And each time the ball passes the computer's paddle, you score a point. The scores are displayed on the screen. Enjoy playing Auto Atari Pong!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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="pongCanvas" width="800" height="400"></canvas>

// Game objects
      const paddleWidth = 10;
      const paddleHeight = 80;
      const paddleSpeed = 5;

const player = {
        x: 0,
        y: canvas.height / 2 - paddleHeight / 2,
        width: paddleWidth,
        height: paddleHeight,
        color: "#00ff00",
        dy: 0,
        score: 0
      };

const computer = {
        x: canvas.width - paddleWidth,
        y: canvas.height / 2 - paddleHeight / 2,
        width: paddleWidth,
        height: paddleHeight,
        color: "#ff0000",
        dy: 2,
        score: 0
      };

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

// Keyboard Event Listeners
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(event) {
        if (event.key === "ArrowUp" || event.key === "Up") {
          player.dy = -paddleSpeed;
        } else if (event.key === "ArrowDown" || event.key === "Down") {
          player.dy = paddleSpeed;
        }
      }

function keyUpHandler(event) {
        if (event.key === "ArrowUp" || event.key === "Up") {
          player.dy = 0;
        } else if (event.key === "ArrowDown" || event.key === "Down") {
          player.dy = 0;
        }
      }

// Update game objects
      function update() {
        // Move the paddles
        player.y += player.dy;
        computer.y += computer.dy;

// Ensure the paddles stay within the canvas bounds
        if (player.y < 0) {
          player.y = 0;
        } else if (player.y + player.height > canvas.height) {
          player.y = canvas.height - player.height;
        }

if (computer.y < 0) {
          computer.y = 0;
        } else if (computer.y + computer.height > canvas.height) {
          computer.y = canvas.height - computer.height;
        }

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

// Check 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 > computer.x &&
          ball.y > computer.y &&
          ball.y < computer.y + computer.height
        ) {
          ball.dx *= -1;
        }

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

// Computer AI
        if (computer.y + computer.height / 2 < ball.y) {
          computer.dy = 2;
        } else {
          computer.dy = -2;
        }

// Keep score
        if (ball.x - ball.radius < player.x + player.width) {
          computer.score++;
          resetBall();
        } else if (ball.x + ball.radius > computer.x) {
          player.score++;
          resetBall();
        }
      }

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

// Render game objects
      function render() {
        // Clear canvas
        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 = computer.color;
        context.fillRect(computer.x, computer.y, computer.width, computer.height);

// Draw ball
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
        context.fillStyle = ball.color;
        context.fill();

// Draw scores
        context.font = "24px Arial";
        context.fillText("Player: " + player.score, 10, 24);
        context.fillText("Computer: " + computer.score, canvas.width - 150, 24);
      }

// Game loop
      function gameLoop() {
        update();
        render();

requestAnimationFrame(gameLoop);
      }

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