AI game creator

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

No:42237

←

Prev Next

→

Pong
Developer User18846｜Date and time 24/2/11 7:14:07
Build time 9.482 sec｜Game capacity 3.373KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="800" height="400"></canvas>
    <script>
        // Initial game settings
        const canvas = document.getElementById("pongCanvas");
        const context = canvas.getContext("2d");

// Paddle and ball variables
        const paddleWidth = 10, paddleHeight = 80;
        let paddleYPosition = canvas.height / 2 - paddleHeight / 2;
        
        const ballSize = 10;
        let ballXPosition = canvas.width / 2 - ballSize / 2;
        let ballYPosition = canvas.height / 2 - ballSize / 2;
        let ballXSpeed = 2, ballYSpeed = 2;

// Player controls
        let upKeyPressed = false, downKeyPressed = false;
        const upKeyCode = 38, downKeyCode = 40;

// Move the player paddle
        function movePaddle() {
            document.addEventListener('keydown', function(event) {
                if (event.keyCode === upKeyCode)
                    upKeyPressed = true;
                else if (event.keyCode === downKeyCode)
                    downKeyPressed = true;
            });

document.addEventListener('keyup', function(event) {
                if (event.keyCode === upKeyCode)
                    upKeyPressed = false;
                else if (event.keyCode === downKeyCode)
                    downKeyPressed = false;
            });

if (upKeyPressed && paddleYPosition > 0)
                paddleYPosition -= 5;
            
            if (downKeyPressed && paddleYPosition + paddleHeight < canvas.height)
                paddleYPosition += 5;
        }

// Reset the ball's position
        function resetBall() {
            ballXPosition = canvas.width / 2 - ballSize / 2;
            ballYPosition = canvas.height / 2 - ballSize / 2;
            ballYSpeed = -ballYSpeed;
        }

// Update game state
        function update() {
            movePaddle();

// Move the ball
            ballXPosition += ballXSpeed;
            ballYPosition += ballYSpeed;

// Bounce the ball off the walls
            if (ballYPosition < 0 || ballYPosition + ballSize > canvas.height)
                ballYSpeed = -ballYSpeed;

// Bounce the ball off the paddle
            if (ballXPosition <= paddleWidth && ballYPosition + ballSize >= paddleYPosition && ballYPosition <= paddleYPosition + paddleHeight)
                ballXSpeed = -ballXSpeed;

// Reset ball position if it goes beyond the paddle
            if (ballXPosition + ballSize > canvas.width)
                resetBall();

// Render everything on the canvas
            context.fillStyle = "#000000"; // Set canvas background color
            context.fillRect(0, 0, canvas.width, canvas.height); // Clear canvas

context.fillStyle = "#ffffff"; // Set paddle and ball color
            context.fillRect(0, paddleYPosition, paddleWidth, paddleHeight); // Draw the paddle
            context.fillRect(ballXPosition, ballYPosition, ballSize, ballSize); // Draw the ball
            
            // Request animation frame for smooth gameplay
            requestAnimationFrame(update);
        }

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