Jeu de ping-pong rétro en JavaScript dans HTML5 Canvas

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

15 June 2025

Modèle de site Web de portfolio holographique

15 December 2023

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

Jeu de ping-pong rétro en JavaScript dans HTML5 Canvas

Recommandé

Police de caractères dansante

Modèle de site Web de portfolio holographique

Jeu de pile JavaScript

HTML

CSS

JS

Recommandé

Police de caractères dansante

Modèle de site Web de portfolio holographique

Jeu de pile JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS