can you add a pause button to this code <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slope Game</title>
    <style>
        body { margin: 0; overflow: hidden; background: black; font-family: Arial, sans-serif; }
        canvas { display: block; }
        .home-button, .respawn-button {
            position: absolute;
            top: 10px;
            padding: 10px 20px;
            background: #ffcc00;
            color: black;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;
            transition: 0.3s;
            display: none;
        }
        .home-button { left: 10px; display: block; }
        .respawn-button { left: 50%; transform: translateX(-50%); top: 50%; display: none; }
        .respawn-button:hover, .home-button:hover { background: #e6b800; }
        .score, .level, .high-score {
            position: absolute;
            top: 10px;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        .score { right: 20px; }
        .level { left: 20px; }
        .high-score { left: 50%; transform: translateX(-50%); }
        .level-screen {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            font-weight: bold;
            display: none;
        }
    </style>
</head>
<body>
    <a href="index.html" class="home-button">Home</a>
    <div class="score">Score: 0</div>
    <div class="level">Level: 1</div>
    <div class="high-score">High Score: 0</div>
    <button class="respawn-button" onclick="respawn()">Respawn</button>
    <div class="level-screen" id="levelScreen"></div>
    <canvas id="gameCanvas"></canvas>

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

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let ball, obstacles, powerUps, keys, score, gameOver, enemySpeed, invincible, level, highScore, gamePaused;
        let floorY = canvas.height - 50;

        function resetGame() {
            ball = { x: canvas.width / 2, y: floorY - 15, radius: 15, speedX: 0, speedY: 0, gravity: 0.3, friction: 0.02 };
            obstacles = [];
            powerUps = [];
            keys = {};
            score = 0;
            gameOver = false;
            enemySpeed = 2; 
            invincible = false;
            level = 1;
            gamePaused = false;

            highScore = localStorage.getItem("highScore") || 0;
            document.querySelector(".score").textContent = "Score: 0";
            document.querySelector(".level").textContent = "Level: 1";
            document.querySelector(".high-score").textContent = "High Score: " + highScore;
            document.querySelector(".respawn-button").style.display = "none";
            document.querySelector(".level-screen").style.display = "none";
        }

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

        function createObstacles() {
            for (let i = 0; i < 5; i++) {
                obstacles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height / 2, width: 50, height: 50 });
            }
        }

        function createPowerUps() {
            powerUps = [];
            for (let i = 0; i < 5; i++) {
                powerUps.push({ x: Math.random() * canvas.width, y: -50, radius: 15, type: "invincible" });
            }
        }

        function update() {
            if (gameOver || gamePaused) return;

            if (keys["ArrowLeft"]) ball.speedX -= 0.5;
            if (keys["ArrowRight"]) ball.speedX += 0.5;

            ball.speedX *= (1 - ball.friction);
            ball.x += ball.speedX;
            ball.speedY += ball.gravity;
            ball.y += ball.speedY;

            if (ball.y + ball.radius > floorY) {
                ball.y = floorY - ball.radius;
                ball.speedY = 0;
            }

            if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
                ball.speedX = -ball.speedX;
            }

            for (let i = obstacles.length - 1; i >= 0; i--) {
                let obs = obstacles[i];
                obs.y += enemySpeed;

                if (obs.y > floorY) {
                    obstacles.splice(i, 1);
                    score += 10;
                    document.querySelector(".score").textContent = "Score: " + score;
                }

                if (!invincible && ball.x + ball.radius > obs.x && ball.x - ball.radius < obs.x + obs.width &&
                    ball.y + ball.radius > obs.y && ball.y - ball.radius < obs.y + obs.height) {
                    gameOver = true;
                    document.querySelector(".respawn-button").style.display = "block";
                    if (score > highScore) {
                        highScore = score;
                        localStorage.setItem("highScore", highScore);
                        document.querySelector(".high-score").textContent = "High Score: " + highScore;
                    }
                }
            }

            for (let i = powerUps.length - 1; i >= 0; i--) {
                let p = powerUps[i];
                p.y += 2;

                if (p.y > floorY) {
                    powerUps.splice(i, 1);
                }

                if (ball.x + ball.radius > p.x - p.radius && ball.x - ball.radius < p.x + p.radius &&
                    ball.y + ball.radius > p.y - p.radius && ball.y - ball.radius < p.y + p.radius) {
                    invincible = true;
                    setTimeout(() => invincible = false, 4000);
                    powerUps.splice(i, 1);
                }
            }

            if (Math.random() < 0.02) {
                obstacles.push({ x: Math.random() * canvas.width, y: -50, width: 50, height: 50 });
            }

            if (score >= level * 100) {
                level++;
                gamePaused = true;
                document.querySelector(".level").textContent = "Level: " + level;
                showLevelScreen(level);
                setTimeout(() => {
                    gamePaused = false;
                    if (level <= 4) {
                        enemySpeed *= 1.5;
                    } else {
                        enemySpeed += 0.5;
                    }
                    createPowerUps();
                }, 2000);
            }
        }

        function showLevelScreen(level) {
            let levelScreen = document.getElementById("levelScreen");
            levelScreen.innerHTML = `Level ${level}`;
            levelScreen.style.display = "flex";
            setTimeout(() => { levelScreen.style.display = "none"; }, 2000);
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = invincible ? "blue" : "white";
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = "red";
            for (let obs of obstacles) {
                ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
            }
        }
        
        
        
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        function respawn() {
            resetGame();
            gameLoop();
        }
        

        resetGame();
        createObstacles();
        gameLoop();
    </script>
</body>
</html>