Gioco di ping pong retrò in JavaScript in HTML5 Canvas

10 iroger7

Apri nell'Editor Pubblica il Tuo Codice

Gioco di ping pong retrò in JavaScript in HTML5 Canvas

Consigliato

10 December 2025

Esempio di gioco di fisica Ragdoll di Matter.js

10 April 2025

Sito web del blog di Daniel

27 December 2024

Una home page creata con directory

HTML

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

Consigliato

Esempio di gioco di fisica Ragdoll di Matter.js

Sito web del blog di Daniel

Una home page creata con directory

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS