JavaScript Ping Pong Game with Special Rounds

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Retro Ping Pong: 9 Special Rounds!</title>
    <style>
        body {
            background: #111;
            color: #0f0;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #gameCanvas {
            display: block;
            margin: 40px auto 0 auto;
            background: #222;
            border: 5px solid #0f0;
            box-shadow: 0 0 40px #0f08;
        }
        h1 {
            font-size: 2rem;
            margin-top: 20px;
            letter-spacing: 4px;
            color: #0f0;
            text-shadow: 0 0 8px #0f0;
        }
        #roundInfo {
            margin-top: 10px;
            font-size: 1.2rem;
        }
        #instructions {
            margin-top: 12px;
            font-size: 1rem;
            color: #8f8;
        }
    </style>
</head>
<body>
    <h1>RETRO PING PONG</h1>
    <div id="roundInfo">Round 1: Classic Pong</div>
    <div id="instructions">W/S: Left Paddle   |   Up/Down: Right Paddle</div>
    <canvas id="gameCanvas" width="800" height="500"></canvas>
    <script>
        // --- Game constants ---
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const W = canvas.width;
        const H = canvas.height;

// --- Game state ---
        let leftScore = 0, rightScore = 0, winningScore = 5;
        let round = 1, roundNames = [
            "Classic Pong",
            "Speed Ball (Ball gets faster!)",
            "Invisible Ball (Ball disappears randomly!)",
            "Tiny Paddles",
            "Big Ball",
            "Gravity Ball (Ball falls downward!)",
            "Multi-Ball Mayhem (3 balls!)",
            "Wall Bouncer (Top & bottom bounce the ball!)",
            "Reverse Controls",
            "Portal Walls (Ball teleports at sides!)"
        ];
        let roundActive = false, roundTimer = 0;

// --- Paddle & Ball ---
        const paddleW = 12, paddleH = 80, ballR = 12;
        let leftPaddle = { x: 15, y: H/2 - paddleH/2, vy: 0, h: paddleH };
        let rightPaddle = { x: W-15-paddleW, y: H/2 - paddleH/2, vy: 0, h: paddleH };
        let paddles = [leftPaddle, rightPaddle];
        let balls = [];

function resetPaddles() {
            leftPaddle.y = H/2 - leftPaddle.h/2;
            rightPaddle.y = H/2 - rightPaddle.h/2;
        }

function newBall(vx = null, vy = null, radius = ballR) {
            let dir = Math.random() > 0.5 ? 1 : -1;
            let speed = 6 + Math.random()*2;
            return {
                x: W/2, y: H/2,
                vx: vx !== null ? vx : dir*speed,
                vy: vy !== null ? vy : (Math.random()-0.5)*6,
                r: radius,
                color: "#0f0",
                visible: true
            };
        }

function resetBall() {
            balls = [newBall()];
        }

// --- Controls ---
        let keys = {};
        document.addEventListener('keydown', (e) => { keys[e.key.toLowerCase()] = true; });
        document.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; });

// --- Special Rounds Logic ---
        function applyRoundFeatures(round) {
            // Reset paddles/balls to default
            leftPaddle.h = paddleH;
            rightPaddle.h = paddleH;
            balls = [newBall()];
            balls[0].r = ballR;
            balls[0].vy = (Math.random()-0.5)*6;
            balls[0].color = "#0f0";
            gravity = 0;
            reverse = false;
            portalWalls = false;
            wallBounce = false;
        }

let gravity = 0;
        let reverse = false;
        let portalWalls = false;
        let wallBounce = false;

function startRound(n) {
            applyRoundFeatures(n);
            switch(n) {
                case 2: // Speed Ball
                    balls[0].vx *= 1.7;
                    balls[0].vy *= 1.5;
                    break;
                case 3: // Invisible Ball
                    break;
                case 4: // Tiny Paddles
                    leftPaddle.h = rightPaddle.h = paddleH/2.5;
                    break;
                case 5: // Big Ball
                    balls[0].r = ballR*2;
                    balls[0].color = "#ff0";
                    break;
                case 6: // Gravity Ball
                    gravity = 0.22;
                    break;
                case 7: // Multi-Ball
                    balls = [newBall(), newBall(-7, -2, ballR), newBall(7, 2, ballR)];
                    balls.forEach(b => b.color = "#0ff");
                    break;
                case 8: // Wall bounce
                    wallBounce = true;
                    break;
                case 9: // Reverse controls
                    reverse = true;
                    break;
                case 10: // Portal Walls
                    portalWalls = true;
                    break;
                default:
                    break;
            }
            document.getElementById("roundInfo").textContent = "Round " + n + ": " + roundNames[n-1];
            resetPaddles();
        }

// --- Game draw ---
        function draw() {
            ctx.fillStyle = "#222";
            ctx.fillRect(0, 0, W, H);

// Center dashed line
            ctx.strokeStyle = "#0f0";
            ctx.setLineDash([15, 15]);
            ctx.beginPath();
            ctx.moveTo(W/2, 0);
            ctx.lineTo(W/2, H);
            ctx.stroke();
            ctx.setLineDash([]);

// Scores
            ctx.font = "bold 48px Courier New";
            ctx.fillStyle = "#0f0";
            ctx.fillText(leftScore, W/2-80, 70);
            ctx.fillText(rightScore, W/2+40, 70);

// Paddles
            ctx.fillStyle = "#0f0";
            ctx.fillRect(leftPaddle.x, leftPaddle.y, paddleW, leftPaddle.h);
            ctx.fillRect(rightPaddle.x, rightPaddle.y, paddleW, rightPaddle.h);

// Balls
            balls.forEach(ball => {
                if (ball.visible !== false) {
                    ctx.beginPath();
                    ctx.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
                    ctx.fillStyle = ball.color;
                    ctx.shadowColor = ball.color;
                    ctx.shadowBlur = 10;
                    ctx.fill();
                    ctx.shadowBlur = 0;
                }
            });

// If game over
            if (leftScore >= winningScore || rightScore >= winningScore) {
                ctx.font = "bold 38px Courier New";
                ctx.fillStyle = "#ff0";
                ctx.fillText(
                    (leftScore > rightScore ? "Left" : "Right") + " Wins!",
                    W/2-150, H/2
                );
                ctx.font = "bold 24px Courier New";
                ctx.fillStyle = "#fff";
                ctx.fillText("Refresh page to play again.", W/2-180, H/2+40);
            }
        }

// --- Game mechanics ---
        function update() {
            // Move paddles
            let lUp = reverse ? keys['s'] : keys['w'];
            let lDown = reverse ? keys['w'] : keys['s'];
            let rUp = reverse ? keys['arrowdown'] : keys['arrowup'];
            let rDown = reverse ? keys['arrowup'] : keys['arrowdown'];

if (lUp) leftPaddle.y -= 9;
            if (lDown) leftPaddle.y += 9;
            if (rUp) rightPaddle.y -= 9;
            if (rDown) rightPaddle.y += 9;

leftPaddle.y = Math.max(0, Math.min(H-leftPaddle.h, leftPaddle.y));
            rightPaddle.y = Math.max(0, Math.min(H-rightPaddle.h, rightPaddle.y));

// Move balls
            balls.forEach(ball => {
                // Round 3: Invisible Ball
                if (round === 3) {
                    ball.visible = Math.random() > 0.12;
                }

// Gravity
                if (gravity) {
                    ball.vy += gravity;
                }

ball.x += ball.vx;
                ball.y += ball.vy;

// Wall collision
                if (ball.y - ball.r < 0) {
                    if (wallBounce) {
                        ball.y = ball.r;
                        ball.vy *= -1;
                    } else {
                        ball.y = ball.r;
                        ball.vy *= -1;
                    }
                }
                if (ball.y + ball.r > H) {
                    if (wallBounce) {
                        ball.y = H - ball.r;
                        ball.vy *= -1;
                    } else {
                        ball.y = H - ball.r;
                        ball.vy *= -1;
                    }
                }

// Paddle collision
                // Left
                if (
                    ball.x - ball.r < leftPaddle.x + paddleW &&
                    ball.x - ball.r > leftPaddle.x &&
                    ball.y > leftPaddle.y &&
                    ball.y < leftPaddle.y + leftPaddle.h &&
                    ball.vx < 0
                ) {
                    ball.x = leftPaddle.x + paddleW + ball.r;
                    ball.vx *= -1.1;
                    ball.vy += (Math.random()-0.5)*4;
                }
                // Right
                if (
                    ball.x + ball.r > rightPaddle.x &&
                    ball.x + ball.r < rightPaddle.x + paddleW &&
                    ball.y > rightPaddle.y &&
                    ball.y < rightPaddle.y + rightPaddle.h &&
                    ball.vx > 0
                ) {
                    ball.x = rightPaddle.x - ball.r;
                    ball.vx *= -1.1;
                    ball.vy += (Math.random()-0.5)*4;
                }

// Scoring
                if (ball.x + ball.r < 0) {
                    if (portalWalls) {
                        ball.x = W-ball.r-1;
                    } else {
                        rightScore++;
                        resetPaddles();
                        resetBall();
                        roundActive = false;
                    }
                }
                if (ball.x - ball.r > W) {
                    if (portalWalls) {
                        ball.x = ball.r+1;
                    } else {
                        leftScore++;
                        resetPaddles();
                        resetBall();
                        roundActive = false;
                    }
                }
            });
        }

// --- Main game loop ---
        function loop() {
            if (leftScore < winningScore && rightScore < winningScore) {
                if (!roundActive) {
                    roundTimer++;
                    if (roundTimer > 60) { // 1s delay
                        roundActive = true;
                        if (round <= 10) startRound(round);
                        round++;
                        roundTimer = 0;
                    }
                } else {
                    update();
                }
                draw();
            } else {
                draw();
            }
            requestAnimationFrame(loop);
        }

// --- Start game ---
        startRound(round);
        roundActive = true;
        loop();
    </script>
</body>
</html>

JavaScript Ping Pong Game with Special Rounds

Recommended

Shooter Game HTML5 Canvas with Leaderboard

Snake Game HTML CSS

Unity WebGL Loader with ZIP, URL Rewrite, and Ads

HTML

CSS

JS

Recommended

Shooter Game HTML5 Canvas with Leaderboard

Snake Game HTML CSS

Unity WebGL Loader with ZIP, URL Rewrite, and Ads

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS