Classic Pong Game with HTML5 Canvas and JavaScript

60 0 Games k2007531 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Classic Pong Game with HTML5 Canvas and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic Pong Game</title>
    <style>
        /* CSS Styling */
        html, body {
            height: 100%;
            margin: 0;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Courier New', Courier, monospace;
            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);
        }

.instructions {
            color: #aaa;
            margin-top: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>

// Game Configuration Objects
        const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 10,
            velocityX: 5,
            velocityY: 5,
            speed: 7,
            color: "#FFF"
        };

const user = {
            x: 10,
            y: (canvas.height - 100) / 2,
            width: 10,
            height: 100,
            score: 0,
            color: "#FFF"
        };

const ai = {
            x: canvas.width - 20,
            y: (canvas.height - 100) / 2,
            width: 10,
            height: 100,
            score: 0,
            color: "#FFF"
        };

const net = {
            x: (canvas.width - 2) / 2,
            y: 0,
            width: 2,
            height: 10,
            color: "#FFF"
        };

// Draw Functions
        function drawRect(x, y, w, h, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, w, h);
        }

function drawArc(x, y, r, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }

function drawNet() {
            for (let i = 0; i <= canvas.height; i += 15) {
                drawRect(net.x, net.y + i, net.width, net.height, net.color);
            }
        }

function drawText(text, x, y, color) {
            ctx.fillStyle = color;
            ctx.font = "60px 'Courier New'";
            ctx.fillText(text, x, y);
        }

// Control variables
        let upPressed = false;
        let downPressed = false;

// Event Listeners for Player Movement
        window.addEventListener("keydown", (e) => {
            if (e.key === "w" || e.key === "W") upPressed = true;
            if (e.key === "s" || e.key === "S") downPressed = true;
        });

window.addEventListener("keyup", (e) => {
            if (e.key === "w" || e.key === "W") upPressed = false;
            if (e.key === "s" || e.key === "S") downPressed = false;
        });

// Collision Detection
        function collision(b, p) {
            p.top = p.y;
            p.bottom = p.y + p.height;
            p.left = p.x;
            p.right = p.x + p.width;

b.top = b.y - b.radius;
            b.bottom = b.y + b.radius;
            b.left = b.x - b.radius;
            b.right = b.x + b.width;

return b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom;
        }

// Reset Ball Position after Scoring
        function resetBall() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.velocityX = -ball.velocityX; // Send to the winner
            ball.speed = 7;
        }

// Main State Updates
        function update() {
            // Player Paddle Movement (Cap limits inside canvas borders)
            if (upPressed && user.y > 0) {
                user.y -= 8;
            } else if (downPressed && user.y < canvas.height - user.height) {
                user.y += 8;
            }

// Simple AI Logic for Right Paddle (Tracks ball center with slight delay)
            let aiLevel = 0.1; 
            ai.y += (ball.y - (ai.y + ai.height / 2)) * aiLevel;

// Ball Position Updates
            ball.x += ball.velocityX;
            ball.y += ball.velocityY;

// Wall Bounce Detection (Top & Bottom borders)
            if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
                ball.velocityY = -ball.velocityY;
            }

// Check which paddle the ball is moving towards
            let player = (ball.x + ball.radius < canvas.width / 2) ? user : ai;

if (collision(ball, player)) {
                // Determine contact point variance to alter exit angle
                let collidePoint = (ball.y - (player.y + player.height / 2));
                collidePoint = collidePoint / (player.height / 2);

let angleRad = (Math.PI / 4) * collidePoint;

// Adjust Direction X coordinate
                let direction = (ball.x + ball.radius < canvas.width / 2) ? 1 : -1;
                ball.velocityX = direction * ball.speed * Math.cos(angleRad);
                ball.velocityY = ball.speed * Math.sin(angleRad);

// Increment velocity speed on successive returns
                ball.speed += 0.5;
            }

// Score Tracking & Reset
            if (ball.x - ball.radius < 0) {
                ai.score++;
                resetBall();
            } else if (ball.x + ball.radius > canvas.width) {
                user.score++;
                resetBall();
            }
        }

// Render Everything onto Canvas Screen
        function render() {
            // Clear Screen Frame
            drawRect(0, 0, canvas.width, canvas.height, "#000");

// Draw Score Counter text elements
            drawText(user.score, canvas.width / 4, canvas.height / 5, "#FFF");
            drawText(ai.score, 3 * canvas.width / 4, canvas.height / 5, "#FFF");

// Draw Structures & Assets
            drawNet();
            drawRect(user.x, user.y, user.width, user.height, user.color);
            drawRect(ai.x, ai.y, ai.width, ai.height, ai.color);
            drawArc(ball.x, ball.y, ball.radius, ball.color);
        }

// Game Loop Thread Setup
        function game() {
            update();
            render();
        }

// Set target Frame Rate to 60 FPS
        const framePerSecond = 60;
        setInterval(game, 1000 / framePerSecond);
    </script>
</body>
</html>

CSS

Comments 0

…

Classic Pong Game with HTML5 Canvas and JavaScript

Recommended

Comments 0