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:17047

←

Prev Next

→

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

Script

Sure! I've created a simple implementation of Atari Pong with 12 balls using JavaScript. You can play it as a finished game on any device, including smartphones. Here's the code enclosed within the script tags:

To play the game, you can copy and paste the above code into an HTML file. When you open the HTML file, it will display the Pong game. You can control the player's paddle by dragging it with your finger on a smartphone. The computer will automatically move its paddle to hit the balls. Enjoy playing Auto Atari Pong with 12 balls on any device!

←

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 with 12 Balls</title>
    <style>
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>
    
    <script>
        // Getting the canvas and its context
        const canvas = document.getElementById("pong");
        const context = canvas.getContext("2d");

// Create the pong paddle
        const paddleWidth = 10, paddleHeight = 100;
        const player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#FF4747", dy: 8 };
        const computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#7C83FD", dy: 4 };

// Create the balls
        const ballRadius = 10;
        const balls = [];
        for(let i = 0; i < 12; i++) {
            balls[i] = { x: canvas.width / 2, y: canvas.height / 2, radius: ballRadius, speed: 3, dx: Math.random() * 4 - 2, dy: Math.random() * 4 - 2 };
        }

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

// Collision detection function
        function collisionDetection(ball, paddle) {
            ball.top = ball.y - ball.radius;
            ball.bottom = ball.y + ball.radius;
            ball.left = ball.x - ball.radius;
            ball.right = ball.x + ball.radius;

paddle.top = paddle.y;
            paddle.bottom = paddle.y + paddle.height;
            paddle.left = paddle.x;
            paddle.right = paddle.x + paddle.width;

return ball.right > paddle.left && ball.bottom > paddle.top && ball.left < paddle.right && ball.top < paddle.bottom;
        }

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

// Move the paddle
            canvas.addEventListener("mousemove", movePaddle);
           
            // Draw the paddle
            context.fillStyle = player.color;
            context.fillRect(player.x, player.y, player.width, player.height);

// Move the computer paddle towards the ball
            const diff = balls[0].y - computer.y - computer.height / 2;
            computer.y += diff > 0 ? computer.dy : -computer.dy;

// Draw the computer paddle
            context.fillStyle = computer.color;
            context.fillRect(computer.x, computer.y, computer.width, computer.height);

// Move and draw the balls
            balls.forEach(ball => {
                ball.x += ball.dx;
                ball.y += ball.dy;

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

// Paddle collision detection
                if(collisionDetection(ball, player) || collisionDetection(ball, computer)) {
                    ball.dx *= -1;
                }

// Draw the ball
                context.fillStyle = "#00FF00";
                context.beginPath();
                context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                context.closePath();
                context.fill();
            });

// Call update() again on the next frame
            requestAnimationFrame(update);
        }

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