Retro JavaScript Ping Pong Game in HTML5 Canvas

Open In Editor Video Publish Your Code

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

Retro JavaScript Ping Pong Game in HTML5 Canvas

Recommended

Dizinler ile oluşmuş bir matrix giriş sayfası

CSS Loading Animation Snippet

Mete'nin bir kodu

HTML

CSS

JS

Recommended

Dizinler ile oluşmuş bir matrix giriş sayfası

CSS Loading Animation Snippet

Mete'nin bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS