pong

229 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcade Pong Game</title>
    <style>
        body {
            margin: 0;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Courier New', Courier, monospace;
            color: white;
            overflow: hidden;
        }
        #gameContainer {
            text-align: center;
        }
        canvas {
            background-color: #000;
            border: 4px solid #fff;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }
        h1 {
            margin-bottom: 10px;
            font-size: 24px;
            letter-spacing: 2px;
        }
        .controls {
            margin-top: 10px;
            font-size: 14px;
            color: #888;
        }
    </style>
</head>
<body>

<div id="gameContainer">
    <h1>PONG</h1>
    <canvas id="pongCanvas" width="800" height="500"></canvas>
    <div class="controls">
        Left: W / S | Right: Up / Down Arrow
    </div>
</div>

// Game Variables
    const paddleWidth = 10;
    const paddleHeight = 80;
    const ballRadius = 8;
    
    let leftScore = 0;
    let rightScore = 0;

// Game Objects
    const playerLeft = {
        x: 20,
        y: canvas.height / 2 - paddleHeight / 2,
        score: 0
    };

const playerRight = {
        x: canvas.width - 20 - paddleWidth,
        y: canvas.height / 2 - paddleHeight / 2,
        score: 0
    };

const ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        speedX: 5,
        speedY: 5
    };

// Keyboard Input State
    const keys = {};

window.addEventListener('keydown', e => keys[e.key] = true);
    window.addEventListener('keyup', e => keys[e.key] = false);

// Reset ball to center
    function resetBall() {
        ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
        ball.speedX = -ball.speedX; // Send to the winner of the last point
        ball.speedY = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 3); 
    }

// Move everything
    function update() {
        // Paddle movement (Left Player: W/S)
        if (keys['w'] || keys['W']) playerLeft.y = Math.max(0, playerLeft.y - 7);
        if (keys['s'] || keys['S']) playerLeft.y = Math.min(canvas.height - paddleHeight, playerLeft.y + 7);

// Paddle movement (Right Player: Arrows)
        if (keys['ArrowUp']) playerRight.y = Math.max(0, playerRight.y - 7);
        if (keys['ArrowDown']) playerRight.y = Math.min(canvas.height - paddleHeight, playerRight.y + 7);

// Ball movement
        ball.x += ball.speedX;
        ball.y += ball.speedY;

// Wall collision (Top and Bottom)
        if (ball.y - ballRadius < 0 || ball.y + ballRadius > canvas.height) {
            ball.speedY = -ball.speedY;
        }

// Left Paddle Collision
        if (ball.x - ballRadius < playerLeft.x + paddleWidth && 
            ball.y > playerLeft.y && 
            ball.y < playerLeft.y + paddleHeight) {
            
            // Reverse direction and calculate angle based on where it hits the paddle
            ball.speedX = -ball.speedX;
            let deltaY = ball.y - (playerLeft.y + paddleHeight / 2);
            ball.speedY = deltaY * 0.2;
        }

// Right Paddle Collision
        if (ball.x + ballRadius > playerRight.x && 
            ball.y > playerRight.y && 
            ball.y < playerRight.y + paddleHeight) {
            
            ball.speedX = -ball.speedX;
            let deltaY = ball.y - (playerRight.y + paddleHeight / 2);
            ball.speedY = deltaY * 0.2;
        }

// Scoring
        if (ball.x - ballRadius < 0) {
            rightScore++;
            resetBall();
        } else if (ball.x + ballRadius > canvas.width) {
            leftScore++;
            resetBall();
        }
    }

// Draw everything
    function draw() {
        // Clear canvas
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw middle net line
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
        ctx.setLineDash([10, 10]);
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width / 2, canvas.height);
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash

// Draw Paddles
        ctx.fillStyle = '#fff';
        ctx.fillRect(playerLeft.x, playerLeft.y, paddleWidth, paddleHeight);
        ctx.fillRect(playerRight.x, playerRight.y, paddleWidth, paddleHeight);

// Draw Ball
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
        ctx.fill();

// Draw Scores
        ctx.font = '50px "Courier New"';
        ctx.fillText(leftScore, canvas.width / 4, 70);
        ctx.fillText(rightScore, (canvas.width / 4) * 3 - 30, 70);
    }

// The Main Game Loop
    function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
    }

// Start the game
    gameLoop();
</script>

</body>
</html>

CSS

Comments 0

…

pong

Recommended

Comments 0