Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Dodger</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { text-align: center; font-family: Arial, sans-serif; background: #222; color: white; }
        canvas { background: black; display: block; margin: auto; border: 2px solid white; }
        h1 { margin: 20px 0; }
    </style>
</head>
<body>

    <h1>Block Dodger</h1>
    <canvas id="gameCanvas"></canvas>
    <p>Use ← and → to move. Avoid the falling blocks!</p>

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

        let player = { x: 180, y: 450, width: 40, height: 40, speed: 5 };
        let obstacles = [];
        let gameOver = false;
        let score = 0;

        function drawPlayer() {
            ctx.fillStyle = "lime";
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

        function createObstacle() {
            let width = Math.random() * 60 + 20;
            let x = Math.random() * (canvas.width - width);
            obstacles.push({ x: x, y: 0, width: width, height: 20, speed: 3 + Math.random() * 2 });
        }

        function moveObstacles() {
            for (let i = 0; i < obstacles.length; i++) {
                obstacles[i].y += obstacles[i].speed;
                if (obstacles[i].y > canvas.height) {
                    obstacles.splice(i, 1);
                    score++;
                }
            }
        }

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

        function checkCollision() {
            for (let obs of obstacles) {
                if (
                    player.x < obs.x + obs.width &&
                    player.x + player.width > obs.x &&
                    player.y < obs.y + obs.height &&
                    player.y + player.height > obs.y
                ) {
                    gameOver = true;
                }
            }
        }

        function gameLoop() {
            if (gameOver) {
                ctx.fillStyle = "white";
                ctx.font = "24px Arial";
                ctx.fillText("Game Over! Score: " + score, 100, 250);
                return;
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawObstacles();
            moveObstacles();
            checkCollision();
            requestAnimationFrame(gameLoop);
        }

        document.addEventListener("keydown", (event) => {
            if (event.key === "ArrowLeft" && player.x > 0) {
                player.x -= player.speed;
            } else if (event.key === "ArrowRight" && player.x + player.width < canvas.width) {
                player.x += player.speed;
            }
        });

        setInterval(createObstacle, 1000);
        gameLoop();
    </script>

</body>
</html>
Editor is loading...