स्पेशल राउंड्स वाला जावास्क्रिप्ट पिंग पोंग गेम

358 iroger7

संपादक में खोलें Video अपना कोड प्रकाशित करें

स्पेशल राउंड्स वाला जावास्क्रिप्ट पिंग पोंग गेम

अनुशंसित

16 January 2026

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

10 December 2025

परफेक्ट सर्कल गेम: ड्रा और स्कोर एचटीएमएल कैनवास

21 January 2026

पिंग पोंग कैओस गेम: यूनिटी लोडर एचटीएमएल स्निपेट

HTML

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

स्पेशल राउंड्स वाला जावास्क्रिप्ट पिंग पोंग गेम

अनुशंसित

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

परफेक्ट सर्कल गेम: ड्रा और स्कोर एचटीएमएल कैनवास

पिंग पोंग कैओस गेम: यूनिटी लोडर एचटीएमएल स्निपेट

HTML

CSS

JS

अनुशंसित

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

परफेक्ट सर्कल गेम: ड्रा और स्कोर एचटीएमएल कैनवास

पिंग पोंग कैओस गेम: यूनिटी लोडर एचटीएमएल स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS