Jogo retrô de pingue-pongue em JavaScript no Canvas HTML5

464 iroger7

Abrir no Editor Video Publique Seu Código

Jogo retrô de pingue-pongue em JavaScript no Canvas HTML5

Recomendado

9 September 2025

Trecho de animação de carregamento CSS

23 August 2025

Modelo de página de login HTML CSS do SEAT Leon

18 December 2025

Jogo do Mario em HTML5 jogável online

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>

Recomendado

Trecho de animação de carregamento CSS

Modelo de página de login HTML CSS do SEAT Leon

Jogo do Mario em HTML5 jogável online

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS