Atari Pong with a tornado for all devices's game

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

No:17144

133

←

Prev Next

→

Atari Pong with a tornado for all devices
Developer User7570｜Date and time 23/9/22 9:19:44
Build time 31.244 sec｜Game capacity 4.114KB｜

Script

Sure! Here's an example of an Atari Pong game implemented in a single HTML file using JavaScript:

This game features two paddles controlled by mouse movement and a ball that bounces off the paddles and the walls. The player's objective is to prevent the ball from hitting their wall and gain points whenever the opponent fails to return the ball. Feel free to modify and customize the game as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of an Atari Pong game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid #000;
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="800" height="400"></canvas>

const paddleWidth = 10;
        const paddleHeight = 100;
        let paddle1Y = canvas.height / 2 - paddleHeight / 2; // Left paddle position
        let paddle2Y = canvas.height / 2 - paddleHeight / 2; // Right paddle position

const ballSize = 10;
        let ballX = canvas.width / 2 - ballSize / 2; // Ball position horizontally
        let ballY = canvas.height / 2 - ballSize / 2; // Ball position vertically
        let ballSpeedX = 5; // Ball speed horizontally
        let ballSpeedY = 5; // Ball speed vertically

let score1 = 0; // Player 1 score
        let score2 = 0; // Player 2 score

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

// Move the left paddle with mouse movement
        function movePaddle(event) {
            let rect = canvas.getBoundingClientRect();
            let mouseY = event.clientY - rect.top - paddleHeight / 2;
            paddle1Y = Math.min(Math.max(mouseY, 0), canvas.height - paddleHeight);
        }

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

// Update game state
        function update() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Ball collision with paddles
            if (ballX < paddleWidth && ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
                ballSpeedX = -ballSpeedX;
            } else if (ballX > canvas.width - paddleWidth - ballSize && ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
                ballSpeedX = -ballSpeedX;
            }

// Ball collision with the upper and lower walls
            if (ballY < 0 || ballY > canvas.height - ballSize) {
                ballSpeedY = -ballSpeedY;
            }

// Score update
            if (ballX < 0) {
                score2++;
                reset();
            } else if (ballX > canvas.width - ballSize) {
                score1++;
                reset();
            }
        }

// Rendering the game
        function render() {
            // Clear canvas
            context.fillStyle = "#000";
            context.fillRect(0, 0, canvas.width, canvas.height);

// Draw paddles
            context.fillStyle = "#fff";
            context.fillRect(0, paddle1Y, paddleWidth, paddleHeight);
            context.fillRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);

// Draw ball
            context.fillRect(ballX, ballY, ballSize, ballSize);

// Draw scores
            context.fillStyle = "#fff";
            context.fillText("Player 1: " + score1, 100, 50);
            context.fillText("Player 2: " + score2, canvas.width - 150, 50);
        }

// Reset ball position and speed
        function reset() {
            ballX = canvas.width / 2 - ballSize / 2;
            ballY = canvas.height / 2 - ballSize / 2;
            ballSpeedX = -ballSpeedX; // Reverse ball direction horizontally
            ballSpeedY = Math.random() < 0.5 ? -5 : 5; // Randomize ball direction vertically
        }

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

Feel free to modify and customize the game as per your requirements.