AI game creator

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

No:17062

111

←

Prev Next

→

Atari Pong
Developer User7570｜Date and time 23/9/22 7:27:38
Build time 25.066 sec｜Game capacity 3.227KB｜

Script

This is a simple implementation of Atari Pong as a single HTML file using JavaScript. The game can be played on a smartphone by moving the paddle vertically using touch input. The paddle tries to prevent the ball from going off the screen while trying to bounce it back towards the opponent. The game starts automatically as soon as the page loads. The ball moves with a specific speed and bounces off the walls and the paddle. If the ball goes beyond the opponent's paddle, it's considered a game over and an alert is displayed. The game can be restarted by closing the alert and the ball and paddle positions are reset. The game's visuals are minimalistic, using a black canvas and white paddle and ball.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```
<!DOCTYPE html>
<html>
<head>
<style>
    #pongCanvas {
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
<canvas id="pongCanvas" width="800px" height="400px"></canvas>

// Ball object
    const ball = {
        x: 0,
        y: 0,
        radius: 10,
        speed: 4,
        dx: 4,
        dy: 4
    };

// Canvas and context variables
    const canvas = document.getElementById("pongCanvas");
    const ctx = canvas.getContext("2d");

// Set initial paddle and ball position
    function setup() {
        paddle.x = canvas.width - paddle.width;
        paddle.y = (canvas.height - paddle.height) / 2;

ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
    }

// Draw the paddle
    function drawPaddle() {
        ctx.fillStyle = "white";
        ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
    }

// Draw the ball
    function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.closePath();
    }

// Move the paddle based on touch movement
    function movePaddle(event) {
        let touchY = event.touches[0].clientY;
        
        if (touchY < canvas.height - paddle.height && touchY > 0) {
            paddle.y = touchY;
        }
    }

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

drawPaddle();
        drawBall();

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

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

if (ball.x + ball.radius > canvas.width - paddle.width) {
            if (ball.y > paddle.y && ball.y < paddle.y + paddle.height) {
                ball.dx *= -1;
            } else {
                // Game over
                alert("Game over!");
                setup();
            }
        }

requestAnimationFrame(update);
    }

// Setup and start the game
    setup();
    update();

// Event listener for touch movement
    canvas.addEventListener("touchmove", movePaddle, false);
</script>
</body>
</html>
```

The game starts automatically as soon as the page loads. The ball moves with a specific speed and bounces off the walls and the paddle. If the ball goes beyond the opponent's paddle, it's considered a game over and an alert is displayed. The game can be restarted by closing the alert and the ball and paddle positions are reset.

The game's visuals are minimalistic, using a black canvas and white paddle and ball.