Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodge Pro: Chaos Edition</title>
    <style>
        body { margin: 0; overflow: hidden; background: #ffffff; font-family: sans-serif; }
        canvas { display: block; cursor: none; }
        #ui { position: absolute; top: 20px; left: 20px; pointer-events: none; user-select: none; }
        .stat { font-size: 18px; font-weight: bold; color: #444; }
        #shield-timer { color: #4caf50; font-size: 14px; display: none; }
    </style>
</head>
<body>
    <div id="ui">
        <div class="stat">Score: <span id="scoreVal">0</span></div>
        <div class="stat">Level: <span id="levelVal">1</span></div>
        <div class="stat" style="color: #ff9800;">Best: <span id="bestVal">0</span></div>
        <div id="shield-timer">SHIELD ACTIVE!</div>
    </div>
    <canvas id="gameCanvas"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreEl = document.getElementById('scoreVal');
        const levelEl = document.getElementById('levelVal');
        const bestEl = document.getElementById('bestVal');
        const shieldEl = document.getElementById('shield-timer');

        let score = 0, level = 1, gameOver = false;
        let shieldActive = false, shieldTime = 0;
        let savedBest = localStorage.getItem('dodgeHighScore') || 0;
        bestEl.innerText = Math.floor(savedBest);

        const player = { x: 0, y: 0, size: 12 };
        let obstacles = [];
        let powerups = [];
        let baseSpeed = 4;

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        window.dispatchEvent(new Event('resize'));

        window.addEventListener('mousemove', (e) => {
            player.x = e.clientX; player.y = e.clientY;
        });

        function spawn() {
            // Normal Obstacles
            if (Math.random() < 0.05 + (level * 0.005)) {
                obstacles.push({
                    x: Math.random() * canvas.width,
                    y: -50,
                    w: 20 + Math.random() * 50,
                    h: 20,
                    speed: baseSpeed + (Math.random() * level),
                    rotation: 0,
                    rotSpeed: 0,
                    type: 'reg'
                });
            }
            // Giant Rotating Block (Rare)
            if (Math.random() < 0.005 + (level * 0.001)) {
                obstacles.push({
                    x: Math.random() * canvas.width,
                    y: -100,
                    w: 120,
                    h: 30,
                    speed: baseSpeed * 0.7,
                    rotation: 0,
                    rotSpeed: 0.05 + (Math.random() * 0.05),
                    type: 'giant'
                });
            }
            // Power-up
            if (Math.random() < 0.003) {
                powerups.push({ x: Math.random() * canvas.width, y: -20, speed: 3 });
            }
        }

        function update() {
            if (gameOver) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            score += 0.15;
            scoreEl.innerText = Math.floor(score);
            level = Math.floor(score / 100) + 1;
            levelEl.innerText = level;

            if (shieldActive) {
                shieldTime--;
                shieldEl.style.display = 'block';
                if (shieldTime <= 0) shieldActive = false;
            } else {
                shieldEl.style.display = 'none';
            }

            spawn();

            // Draw Player
            ctx.shadowBlur = shieldActive ? 15 : 0;
            ctx.shadowColor = "gold";
            ctx.fillStyle = shieldActive ? "gold" : "#2196f3";
            ctx.beginPath();
            ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.shadowBlur = 0;

            // Power-ups
            for (let i = powerups.length - 1; i >= 0; i--) {
                let p = powerups[i];
                p.y += p.speed;
                ctx.fillStyle = "#4caf50";
                ctx.beginPath();
                ctx.arc(p.x, p.y, 10, 0, Math.PI * 2);
                ctx.fill();

                let dist = Math.hypot(player.x - p.x, player.y - p.y);
                if (dist < player.size + 10) {
                    shieldActive = true;
                    shieldTime = 300; // ~5 seconds
                    powerups.splice(i, 1);
                }
            }

            // Obstacles
            for (let i = obstacles.length - 1; i >= 0; i--) {
                let o = obstacles[i];
                o.y += o.speed;
                o.rotation += o.rotSpeed;

                ctx.save();
                ctx.translate(o.x + o.w / 2, o.y + o.h / 2);
                ctx.rotate(o.rotation);
                ctx.fillStyle = o.type === 'giant' ? "#212121" : `hsl(${200 + (level * 15)}, 70%, 50%)`;
                ctx.fillRect(-o.w / 2, -o.h / 2, o.w, o.h);
                ctx.restore();

                // Collision (approximate for rotation)
                let dx = player.x - (o.x + o.w / 2);
                let dy = player.y - (o.y + o.h / 2);
                let distance = Math.sqrt(dx * dx + dy * dy);
                let hitBox = o.type === 'giant' ? 60 : 20;

                if (!shieldActive && distance < hitBox) {
                    endGame();
                }

                if (o.y > canvas.height + 100) obstacles.splice(i, 1);
            }

            requestAnimationFrame(update);
        }

        function endGame() {
            gameOver = true;
            if (Math.floor(score) > savedBest) localStorage.setItem('dodgeHighScore', Math.floor(score));
            alert(`Boom! Game Over.\nScore: ${Math.floor(score)}`);
            location.reload();
        }

        update();
    </script>
</body>
</html>
Editor is loading...