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

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

No:17027

109

←

Prev Next

→

Auto Atari Pong with a 3 balls for all devices
Developer User7570｜Date and time 23/9/22 6:38:51
Build time 46.864 sec｜Game capacity 5.544KB｜

Script

Sure, here's the code for an Auto Atari Pong game with three balls that can be played on all devices using pictograms:

To play the game, you can paste the above code into an HTML file and open it in a web browser. Use the up and down arrow keys to control the player paddle, and the W and S keys to control the computer paddle. The game will adjust based on the device screen size for a better experience. Enjoy the Auto Atari Pong game with three balls!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here's the code for an Auto Atari Pong game with three balls that can be played on all devices using pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Auto Atari Pong</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>

// Create the pong paddles
        const paddleWidth = 10, paddleHeight = 70;
        const player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#23c52a", dy: 8 };
        const computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#c93840", dy: 6 };

// Create the pong balls
        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 }]

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

// Draw the balls
        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 paddles
        function movePaddle(paddle, upKey, downKey) {
            document.addEventListener("keydown", function(event) {
                switch (event.keyCode) {
                    case upKey:
                        paddle.y -= paddle.dy;
                        break;
                    case downKey:
                        paddle.y += paddle.dy;
                        break;
                }
            });
        }

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

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

// Handle collision with paddles
            if (ball.x - ball.radius < player.x + player.width && ball.y > player.y && ball.y < player.y + player.height) {
                ball.dx = Math.abs(ball.dx);
            }
            else if (ball.x + ball.radius > computer.x && ball.y > computer.y && ball.y < computer.y + computer.height) {
                ball.dx = -Math.abs(ball.dx);
            }

// Handle scoring
            if (ball.x - ball.radius < 0) {
                resetBall(ball);
            }
            else if (ball.x + ball.radius > canvas.width) {
                resetBall(ball);
            }
        }

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

// Update the game
        function update() {
            moveBall(balls[0]);
            moveBall(balls[1]);
            moveBall(balls[2]);

// Move the player paddle
            if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
            }
            else if (player.y < 0) {
                player.y = 0;
            }

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

// Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddles and balls
            drawPaddle(player.x, player.y, player.width, player.height, player.color);
            drawPaddle(computer.x, computer.y, computer.width, computer.height, computer.color);
            drawBall(balls[0].x, balls[0].y, balls[0].radius, "#fff");
            drawBall(balls[1].x, balls[1].y, balls[1].radius, "#fff");
            drawBall(balls[2].x, balls[2].y, balls[2].radius, "#fff");

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

// Start the game
        function startGame() {
            update();
        }

// Initialize the game
        function init() {
            canvas.style.display = "block";
            canvas.style.margin = "0 auto";
            document.body.appendChild(canvas);

movePaddle(player, 38, 40); // up arrow, down arrow
            movePaddle(computer, 87, 83); // w key, s key

startGame();
        }

// Call the initialization function
        init();
    </script>
</body>
</html>
```