Gioco di ping pong JavaScript con round speciali

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

22 August 2025

Commento segnaposto codice HTML

11 July 2025

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

Gioco di ping pong JavaScript con round speciali

Consigliato

Commento segnaposto codice HTML

Un codice di Mete

Un codice di Mete

HTML

CSS

JS

Consigliato

Commento segnaposto codice HTML

Un codice di Mete

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS