Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ping Pong Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #3e2723; /* brown color for monkey background */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        canvas {
            border: 2px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="pingPong" width="800" height="600"></canvas>

    <script>
        const canvas = document.getElementById("pingPong");
        const ctx = canvas.getContext("2d");

        // Game settings
        const paddleWidth = 15;
        const paddleHeight = 100;
        const ballRadius = 15;

        let leftPaddleY = canvas.height / 2 - paddleHeight / 2;
        let rightPaddleY = canvas.height / 2 - paddleHeight / 2;
        let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballSpeedX = 7 * (Math.random() < 0.5 ? 1 : -1);
        let ballSpeedY = 7 * (Math.random() < 0.5 ? 1 : -1);
        const paddleSpeed = 10;

        // Controls
        let upPressed = false;
        let downPressed = false;
        let upArrowPressed = false;
        let downArrowPressed = false;

        // Event listeners for controls
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

        function keyDownHandler(e) {
            if (e.key === "w") upPressed = true;
            if (e.key === "s") downPressed = true;
            if (e.key === "ArrowUp") upArrowPressed = true;
            if (e.key === "ArrowDown") downArrowPressed = true;
        }

        function keyUpHandler(e) {
            if (e.key === "w") upPressed = false;
            if (e.key === "s") downPressed = false;
            if (e.key === "ArrowUp") upArrowPressed = false;
            if (e.key === "ArrowDown") downArrowPressed = false;
        }

        // Function to draw the game elements
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw paddles
            ctx.fillStyle = "#fff";
            ctx.fillRect(30, leftPaddleY, paddleWidth, paddleHeight);  // Left paddle
            ctx.fillRect(canvas.width - 30 - paddleWidth, rightPaddleY, paddleWidth, paddleHeight);  // Right paddle

            // Draw ball
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#fff";
            ctx.fill();
            ctx.closePath();

            // Update paddles' movement
            if (upPressed && leftPaddleY > 0) leftPaddleY -= paddleSpeed;
            if (downPressed && leftPaddleY < canvas.height - paddleHeight) leftPaddleY += paddleSpeed;
            if (upArrowPressed && rightPaddleY > 0) rightPaddleY -= paddleSpeed;
            if (downArrowPressed && rightPaddleY < canvas.height - paddleHeight) rightPaddleY += paddleSpeed;

            // Ball movement
            ballX += ballSpeedX;
            ballY += ballSpeedY;

            // Ball collision with top and bottom
            if (ballY - ballRadius <= 0 || ballY + ballRadius >= canvas.height) {
                ballSpeedY = -ballSpeedY;
            }

            // Ball collision with paddles
            if (ballX - ballRadius <= 30 + paddleWidth && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight ||
                ballX + ballRadius >= canvas.width - 30 - paddleWidth && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight) {
                ballSpeedX = -ballSpeedX;
            }

            // Ball reset if it goes out of bounds
            if (ballX - ballRadius <= 0 || ballX + ballRadius >= canvas.width) {
                ballX = canvas.width / 2;
                ballY = canvas.height / 2;
                ballSpeedX = 7 * (Math.random() < 0.5 ? 1 : -1);
                ballSpeedY = 7 * (Math.random() < 0.5 ? 1 : -1);
            }

            requestAnimationFrame(draw); // Keep the game loop running
        }

        // Start drawing
        draw();
    </script>
</body>
</html>
Editor is loading...