Gioco di ping pong JavaScript con round speciali

355 iroger7

Apri nell'Editor Video Pubblica il Tuo Codice

Gioco di ping pong JavaScript con round speciali

Consigliato

21 September 2024

Cursore di viaggio rotatorio

18 June 2025

Modello di modulo di accesso HTML

19 September 2025

Esempi di menu a discesa CSS animati

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>

Consigliato

Cursore di viaggio rotatorio

Modello di modulo di accesso HTML

Esempi di menu a discesa CSS animati

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS