JavaScript Ping Pong Game with Special Rounds

586 iroger7

<!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>

CSS

JavaScript Ping Pong Game with Special Rounds

Recommended