Make a completely playable game of pong's game

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

No:35944

←

Prev Next

→

Make a completely playable game of pong
Developer User16702｜Date and time 24/1/16 5:11:07
Build time 14.885 sec｜Game capacity 3.895KB｜

Script

Sure! Below is a complete implementation of a playable Pong game using JavaScript, enclosed in script tags within a single HTML file:

This code creates a simple Pong game where the user controls the paddle on the left using mouse movement. The AI controls the paddle on the right. The objective is to bounce the ball back and forth, preventing it from reaching the edges. You can run this code in any web browser and play the Pong game. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Below is a complete implementation of a playable Pong game using JavaScript, enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        canvas {
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>
    <script>
        // Get the canvas element and its context
        const canvas = document.getElementById("pong");
        const context = canvas.getContext("2d");

// Create the user paddle
        const user = {
            x: 0,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            color: "#FFF",
            dy: 12
        };

// Create the AI paddle
        const ai = {
            x: canvas.width - 10,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            color: "#FFF",
            dy: 4
        };

// Create the ball
        const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 10,
            speed: 4,
            dx: 4,
            dy: 4,
            color: "#FFA500"
        };

// Draw the paddles on the canvas
        function drawPaddle(x, y, width, height, color) {
            context.fillStyle = color;
            context.fillRect(x, y, width, height);
        }

// Draw the ball on the canvas
        function drawBall(x, y, radius, color) {
            context.fillStyle = color;
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();
        }

// Move the user paddle
        function movePaddle(event) {
            let rect = canvas.getBoundingClientRect();
            user.y = event.clientY - rect.top - user.height / 2;
        }

// Update the game state
        function update() {
            // Move the user paddle
            document.addEventListener("mousemove", movePaddle);

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

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

if (ball.x - ball.radius < user.x + user.width && ball.y > user.y && ball.y < user.y + user.height) {
                ball.dx *= -1;
            }

if (ball.x + ball.radius > ai.x && ball.y > ai.y && ball.y < ai.y + ai.height) {
                ball.dx *= -1;
            }

// AI paddle movement
            if (ai.y < ball.y - 50) {
                ai.y += ai.dy;
            }

if (ai.y > ball.y + 50) {
                ai.y -= ai.dy;
            }
        }

// Render the game state
        function render() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddles
            drawPaddle(user.x, user.y, user.width, user.height, user.color);
            drawPaddle(ai.x, ai.y, ai.width, ai.height, ai.color);

// Draw the ball
            drawBall(ball.x, ball.y, ball.radius, ball.color);
        }

// Game loop
        function gameLoop() {
            update();
            render();
        }

// Start the game
        setInterval(gameLoop, 1000 / 60); // 60 frames per second
    </script>
</body>
</html>
```

You can run this code in any web browser and play the Pong game. Enjoy!