AI game creator

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

No:26957

←

Prev Next

→

Pong
Developer User13333｜Date and time 23/12/3 14:25:58
Build time 53.431 sec｜Game capacity 5.42KB｜

Script

Sure! Here's a simple implementation of the classic game Pong, designed for smartphone operation and using pictograms for visuals. The game will be contained within a single HTML file and written in JavaScript. Just copy and paste the code into an HTML file, and you'll have a playable Pong game.

This code sets up the game environment, allows the user to control the paddles by touch, and handles the game logic for movement, collisions, and scoring. The game loop continuously updates and renders the game objects on the canvas, providing a smooth gameplay experience. Feel free to customize the code as per your requirements and add additional features if needed. Enjoy playing Pong!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        
        #canvas {
            background: #000;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Game configuration
        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");
        const width = window.innerWidth;
        const height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
        const paddleWidth = 20;
        const paddleHeight = 120;
        const ballSize = 20;
        const paddleSpeed = 8;
        const ballSpeed = 6;
        
        // Paddle initial positions and velocities
        const leftPaddle = {
            x: 20,
            y: height / 2 - paddleHeight / 2,
            dy: 0
        };
        const rightPaddle = {
            x: width - paddleWidth - 20,
            y: height / 2 - paddleHeight / 2,
            dy: 0
        };
        
        // Ball initial position and velocity
        const ball = {
            x: width / 2 - ballSize / 2,
            y: height / 2 - ballSize / 2,
            dx: ballSpeed,
            dy: ballSpeed
        };
        
        // Event listeners for paddle control
        document.addEventListener("touchstart", handleTouchStart, false);
        document.addEventListener("touchmove", handleTouchMove, false);
        
        function handleTouchStart(event) {
            if (event.touches[0].clientX < width / 2) {
                leftPaddle.dy = -paddleSpeed;
            } else {
                leftPaddle.dy = paddleSpeed;
            }
            event.preventDefault();
        }
        
        function handleTouchMove(event) {
            if (event.touches[0].clientX < width / 2) {
                leftPaddle.dy = -paddleSpeed;
            } else {
                leftPaddle.dy = paddleSpeed;
            }
            event.preventDefault();
        }
        
        // Update game objects
        function update() {
            // Move paddles
            leftPaddle.y += leftPaddle.dy;
            rightPaddle.y += rightPaddle.dy;
            
            // Check paddle boundaries
            if (leftPaddle.y < 0) {
                leftPaddle.y = 0;
            } else if (leftPaddle.y + paddleHeight > height) {
                leftPaddle.y = height - paddleHeight;
            }
            
            if (rightPaddle.y < 0) {
                rightPaddle.y = 0;
            } else if (rightPaddle.y + paddleHeight > height) {
                rightPaddle.y = height - paddleHeight;
            }
            
            // Update ball position
            ball.x += ball.dx;
            ball.y += ball.dy;
            
            // Check ball boundaries
            if (ball.y < 0 || ball.y + ballSize > height) {
                ball.dy *= -1;
            }
            
            // Check paddle collisions
            if (
                (ball.x < leftPaddle.x + paddleWidth && ball.y + ballSize > leftPaddle.y && ball.y < leftPaddle.y + paddleHeight) ||
                (ball.x + ballSize > rightPaddle.x && ball.y + ballSize > rightPaddle.y && ball.y < rightPaddle.y + paddleHeight)
            ) {
                ball.dx *= -1;
            }
            
            // Check ball out of bounds
            if (ball.x < -ballSize || ball.x > width) {
                // Reset ball position
                ball.x = width / 2 - ballSize / 2;
                ball.y = height / 2 - ballSize / 2;
                // Reset ball direction
                ball.dx = Math.sign(ball.dx) * ballSpeed;
                ball.dy = Math.sign(ball.dy) * ballSpeed;
            }
        }
        
        // Render game objects
        function render() {
            // Clear canvas
            context.clearRect(0, 0, width, height);
            
            // Draw paddles
            context.fillStyle = "#FFF";
            context.fillRect(leftPaddle.x, leftPaddle.y, paddleWidth, paddleHeight);
            context.fillRect(rightPaddle.x, rightPaddle.y, paddleWidth, paddleHeight);
            
            // Draw ball
            context.fillRect(ball.x, ball.y, ballSize, ballSize);
        }
        
        // Game loop
        function gameLoop() {
            update();
            render();
            requestAnimationFrame(gameLoop);
        }
        
        // Start the game
        gameLoop();
    </script>
</body>
</html>
```

Feel free to customize the code as per your requirements and add additional features if needed. Enjoy playing Pong!