AI game creator

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

No:33026

←

Prev Next

→

Make me a pong game
Developer User15589｜Date and time 24/1/2 4:20:02
Build time 18.185 sec｜Game capacity 3.434KB｜

Script

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

This code sets up a basic Pong game where you can control the left paddle using touch movements on a smartphone. The game updates the positions of the paddles and the ball, and handles collisions with the paddles and edges of the canvas. The `gameLoop` function continuously updates and renders the game, creating a smooth gameplay experience.

←

Prev　Next

→ 　

Back　

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

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        #pongCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="500" height="300"></canvas>

// Setting initial positions and sizes
        const paddleWidth = 10;
        const paddleHeight = 50;
        const ballSize = 8;

let paddle1Y = canvas.height / 2 - paddleHeight / 2;
        let paddle2Y = canvas.height / 2 - paddleHeight / 2;

let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballSpeedX = 3;
        let ballSpeedY = 3;

// Function to draw the paddles and ball
        function draw() {
            // Clearing the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Drawing left paddle
            context.fillStyle = "black";
            context.fillRect(0, paddle1Y, paddleWidth, paddleHeight);

// Drawing right paddle
            context.fillStyle = "black";
            context.fillRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);

// Drawing the ball
            context.beginPath();
            context.arc(ballX, ballY, ballSize, 0, Math.PI * 2);
            context.fillStyle = "black";
            context.fill();
        }

// Function to update positions and handle collisions
        function update() {
            // Moving the paddles
            canvas.addEventListener("touchmove", function (event) {
                let rect = canvas.getBoundingClientRect();
                paddle1Y = event.touches[0].clientY - rect.top - paddleHeight / 2;
            });

// Updating the ball position
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Checks for paddle2Y in time with the ball hitting
            if (ballX >= canvas.width - paddleWidth - ballSize) {
                if (ballY + ballSize >= paddle2Y && ballY <= paddle2Y + paddleHeight) {
                    ballSpeedX *= -1;
                }
            }

// Checks for paddle1Y in time with the ball hitting
            if (ballX <= paddleWidth + ballSize) {
                if (ballY + ballSize >= paddle1Y && ballY <= paddle1Y + paddleHeight) {
                    ballSpeedX *= -1;
                }
            }

// Handling ball collision with top and bottom edges
            if (ballY + ballSize >= canvas.height || ballY - ballSize <= 0) {
                ballSpeedY *= -1;
            }
        }

// Function to run the game
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

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