AI game creator

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

No:20583

←

Prev Next

→

Pong game
Developer User9091｜Date and time 23/10/10 6:30:56
Build time 11.499 sec｜Game capacity 2.86KB｜

Script

Sure! Here's an example of a simple Pong game implemented as a single HTML file using JavaScript. This code snippet can be saved as an HTML file and opened in a web browser:

This code sets up a simple Pong game where the player controls a paddle using touch events on a smartphone. The game elements, such as the paddles and ball, are drawn on a HTML canvas element using JavaScript. The ball moves and bounces off the paddles and walls, creating a basic Pong game experience.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Pong game implemented as a single HTML file using JavaScript. This code snippet can be saved as an HTML file and opened in a web browser:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>

// Initial paddle and ball positions
        let paddlePositionY = 160;
        let ballPositionX = 400;
        let ballPositionY = 200;
        let ballSpeedX = 2;
        let ballSpeedY = 2;

// Pong canvas and context
        const canvas = document.getElementById("pong");
        const context = canvas.getContext("2d");

// Draw function to create game elements
        function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles
            context.fillStyle = "black";
            context.fillRect(10, paddlePositionY, paddleWidth, paddleHeight);

// Draw ball
            context.beginPath();
            context.arc(ballPositionX, ballPositionY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "black";
            context.fill();
            context.closePath();

// Move ball
            ballPositionX += ballSpeedX;
            ballPositionY += ballSpeedY;

// Ball collision with paddles
            if (ballPositionY + ballRadius > paddlePositionY && ballPositionY - ballRadius < paddlePositionY + paddleHeight && ballPositionX - ballRadius < paddleWidth) {
                ballSpeedX = -ballSpeedX;
            }

// Ball collision with walls (top and bottom)
            if (ballPositionY + ballRadius > canvas.height || ballPositionY - ballRadius < 0) {
                ballSpeedY = -ballSpeedY;
            }
            
            // Game loop
            requestAnimationFrame(draw);
        }

// Handle paddle movement based on touch events
        canvas.addEventListener("touchmove", (event) => {
            const touchY = event.touches[0].clientY;
            paddlePositionY = Math.min(canvas.height - paddleHeight, Math.max(touchY - paddleHeight/2, 0));
        });

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