Gioco di ping pong retrò in JavaScript in HTML5 Canvas

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

22 July 2025

Pagina di destinazione del Samsung Galaxy S24 Ultra

22 November 2025

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Retro Ping Pong Game</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
      
    <style>  
        body {  
            background: #222;  
            color: #fff;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: flex-start;  
            min-height: 100vh;  
            font-family: 'Courier New', Courier, monospace;  
        }  
        h1 {  
            margin: 1rem 0 0.5rem 0;  
            letter-spacing: 2px;  
        }  
        #gameContainer {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
        }  
        canvas {  
            background: #000;  
            display: block;  
            margin: 0 auto;  
            border: 4px solid #fff;  
            border-radius: 8px;  
            box-shadow: 0 0 20px #fff7;  
        }  
        .instructions {  
            margin: 0.5rem 0 1rem 0;  
            font-size: 1.1rem;  
            color: #eee;  
        }  
    </style>  
</head>  
<body>  
      
    <h1>Retro Ping Pong</h1>  
    <div class="instructions">  
        Controls: <strong>W</strong> = Up, <strong>S</strong> = Down  
    </div>  
    <div id="gameContainer">  
          
        <canvas id="pong" width="640" height="400" aria-label="Ping Pong Game" tabindex="0"></canvas>  
    </div>  
      
    <script>  
        // --- Configuration ---  
        const canvas = document.getElementById('pong');  
        const context = canvas.getContext('2d');

// Paddle settings  
        const paddleWidth = 12, paddleHeight = 80;  
        const playerX = 10, cpuX = canvas.width - paddleWidth - 10;  
        let playerY = (canvas.height - paddleHeight) / 2;  
        let cpuY = (canvas.height - paddleHeight) / 2;  
        const paddleSpeed = 6;

// Ball settings  
        let ballX = canvas.width / 2, ballY = canvas.height / 2;  
        let ballRadius = 8;  
        let ballSpeedX = 5 * (Math.random() < 0.5 ? 1 : -1);  
        let ballSpeedY = 4 * (Math.random() < 0.5 ? 1 : -1);

// Scores  
        let playerScore = 0, cpuScore = 0;

// Controls  
        let upPressed = false, downPressed = false;

// --- Draw Functions ---  
        function drawRect(x, y, w, h, color) {  
            context.fillStyle = color;  
            context.fillRect(x, y, w, h);  
        }

function drawCircle(x, y, r, color) {  
            context.fillStyle = color;  
            context.beginPath();  
            context.arc(x, y, r, 0, Math.PI * 2, false);  
            context.closePath();  
            context.fill();  
        }

function drawText(text, x, y, color) {  
            context.fillStyle = color;  
            context.font = "32px Courier New, monospace";  
            context.fillText(text, x, y);  
        }

function drawNet() {  
            context.strokeStyle = "#fff";  
            context.setLineDash([8, 8]);  
            context.beginPath();  
            context.moveTo(canvas.width/2, 0);  
            context.lineTo(canvas.width/2, canvas.height);  
            context.stroke();  
            context.setLineDash([]);  
        }

// --- Main Draw ---  
        function draw() {  
            // Background  
            drawRect(0, 0, canvas.width, canvas.height, "#000");  
            drawNet();

// Player paddle (left)  
            drawRect(playerX, playerY, paddleWidth, paddleHeight, "#fff");  
            // CPU paddle (right)  
            drawRect(cpuX, cpuY, paddleWidth, paddleHeight, "#fff");

// Ball  
            drawCircle(ballX, ballY, ballRadius, "#fff");

// Scores  
            drawText(playerScore, canvas.width / 4, 40, "#fff");  
            drawText(cpuScore, canvas.width * 3 / 4, 40, "#fff");  
        }

// --- Game Update Logic ---  
        function update() {  
            // Player movement  
            if (upPressed && playerY > 0) playerY -= paddleSpeed;  
            if (downPressed && playerY < canvas.height - paddleHeight) playerY += paddleSpeed;

// CPU AI: tracks the ball  
            if (ballY < cpuY + paddleHeight / 2 && cpuY > 0) cpuY -= paddleSpeed * 0.85;  
            else if (ballY > cpuY + paddleHeight / 2 && cpuY < canvas.height - paddleHeight) cpuY += paddleSpeed * 0.85;

// Move ball  
            ballX += ballSpeedX;  
            ballY += ballSpeedY;

// Top and bottom wall collision  
            if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) {  
                ballSpeedY *= -1;  
            }

// Left paddle collision (Player)  
            if (  
                ballX - ballRadius < playerX + paddleWidth &&  
                ballY > playerY &&  
                ballY < playerY + paddleHeight  
            ) {  
                ballX = playerX + paddleWidth + ballRadius; // prevent sticking  
                ballSpeedX *= -1.05; // bounce and speed up  
                // Add a bit of "spin" based on where it hits the paddle  
                let collidePoint = ballY - (playerY + paddleHeight/2);  
                ballSpeedY = collidePoint * 0.2;  
            }

// Right paddle collision (CPU)  
            if (  
                ballX + ballRadius > cpuX &&  
                ballY > cpuY &&  
                ballY < cpuY + paddleHeight  
            ) {  
                ballX = cpuX - ballRadius; // prevent sticking  
                ballSpeedX *= -1.05;  
                let collidePoint = ballY - (cpuY + paddleHeight/2);  
                ballSpeedY = collidePoint * 0.2;  
            }

// Left and Right wall (score)  
            if (ballX - ballRadius < 0) {  
                cpuScore += 1;  
                resetBall();  
            } else if (ballX + ballRadius > canvas.width) {  
                playerScore += 1;  
                resetBall();  
            }  
        }

// --- Reset Ball to Center ---  
        function resetBall() {  
            ballX = canvas.width / 2;  
            ballY = canvas.height / 2;  
            ballSpeedX = 5 * (Math.random() < 0.5 ? 1 : -1);  
            ballSpeedY = 4 * (Math.random() < 0.5 ? 1 : -1);  
        }

// --- Game Loop ---  
        function game() {  
            update();  
            draw();  
            requestAnimationFrame(game);  
        }

// --- Keyboard Input ---  
        document.addEventListener('keydown', function(e) {  
            if (e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') upPressed = true;  
            if (e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') downPressed = true;  
        });  
        document.addEventListener('keyup', function(e) {  
            if (e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') upPressed = false;  
            if (e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') downPressed = false;  
        });

// Accessibility: focus the canvas for keyboard input  
        canvas.focus();

// --- Start Game ---  
        game();  
    </script>  
</body>  
</html>

Gioco di ping pong retrò in JavaScript in HTML5 Canvas

Consigliato

Pagina di destinazione del Samsung Galaxy S24 Ultra

Codice HTML del gioco Snake

SITO WEB DI APPLE

HTML

CSS

JS

Consigliato

Pagina di destinazione del Samsung Galaxy S24 Ultra

Codice HTML del gioco Snake

SITO WEB DI APPLE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS