Atari Pong and 4 Balls for all devices's game

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

No:17061

←

Prev Next

→

Atari Pong and 4 Balls for all devices
Developer User7570｜Date and time 23/9/22 7:26:43
Build time 29.747 sec｜Game capacity 3.869KB｜

Script

Sure! Here's an example of how you can implement a simple game resembling Atari Pong with 4 balls using HTML, JavaScript, and pictograms. This code can be saved in a single HTML file for easy use on all devices:

You can copy this code into a single HTML file and open it in any web browser to play the game. The game simulates Atari Pong where you control the left paddle using your mouse or touch gestures on a smartphone. The goal is to prevent the balls from passing your paddle. Have fun!

←

Prev　Next

→ 　

Back　

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

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

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

// Game variables
        const canvas = document.getElementById("pong");
        const context = canvas.getContext("2d");
        const paddleWidth = 10;
        const paddleHeight = 100;
        const ballRadius = 10;

// Paddle positions and initial speeds
        let paddle1Y = canvas.height / 2 - paddleHeight / 2;
        let paddle2Y = paddle1Y;
        let paddleSpeed = 7;

// Ball positions and initial speeds
        let balls = [
            { x: canvas.width / 2, y: canvas.height / 2, dx: 3, dy: 3 },
            { x: canvas.width / 2, y: canvas.height / 2, dx: -3, dy: -3 },
            { x: canvas.width / 2, y: canvas.height / 2, dx: 3, dy: -3 },
            { x: canvas.width / 2, y: canvas.height / 2, dx: -3, dy: 3 }
        ];

// Event listeners for paddle movement
        canvas.addEventListener("mousemove", movePaddle);

function movePaddle(event) {
            let rect = canvas.getBoundingClientRect();
            let mouseY = event.clientY - rect.top - paddleHeight / 2;
            paddle1Y = mouseY;
        }

// Game loop
        function gameLoop() {
            // Clear canvas
            context.fillStyle = "#000";
            context.fillRect(0, 0, canvas.width, canvas.height);

// Move paddles
            paddle2Y += (balls[0].y - (paddle2Y + paddleHeight / 2)) * 0.03;

// Draw paddles
            context.fillStyle = "#fff";
            context.fillText(paddlePictogram, paddleWidth, paddle1Y + paddleHeight / 2);
            context.fillText(paddlePictogram, canvas.width - paddleWidth * 2, paddle2Y + paddleHeight / 2);

// Move and draw balls
            for (let i = 0; i < balls.length; i++) {
                balls[i].x += balls[i].dx;
                balls[i].y += balls[i].dy;

// Ball collision detection with paddles
                if (
                    balls[i].x - ballRadius < paddleWidth * 2 &&
                    balls[i].y + ballRadius > paddle1Y &&
                    balls[i].y - ballRadius < paddle1Y + paddleHeight
                ) {
                    balls[i].dx *= -1;
                }
                if (
                    balls[i].x + ballRadius > canvas.width - paddleWidth &&
                    balls[i].y + ballRadius > paddle2Y &&
                    balls[i].y - ballRadius < paddle2Y + paddleHeight
                ) {
                    balls[i].dx *= -1;
                }

// Ball collision detection with walls
                if (balls[i].y + ballRadius > canvas.height || balls[i].y - ballRadius < 0) {
                    balls[i].dy *= -1;
                }

context.fillStyle = "#fff";
                context.fillText(ballPictogram, balls[i].x, balls[i].y);
            }

requestAnimationFrame(gameLoop);
        }

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