<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Car Game</title>
    <style>
        body { margin: 0; overflow: hidden; background: #111; font-family: sans-serif; }
        #info {
            position: absolute; top: 10px; left: 10px; color: white;
            font-size: 20px; font-weight: bold; background: rgba(0,0,0,0.5); padding: 8px 15px; border-radius: 5px;
        }
        #controls {
            position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-around;
        }
        .btn {
            width: 80px; height: 80px; background: rgba(255,255,255,0.3); border: 2px solid white;
            border-radius: 50%; color: white; font-size: 30px; display: flex;
            align-items: center; justify-content: center; user-select: none;
        }
    </style>
    <!-- Three.js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

    <div id="info">Score: <span id="score">0</span></div>
    <div id="controls">
        <div class="btn" id="leftBtn">◄</div>
        <div class="btn" id="rightBtn">►</div>
    </div>

    <script>
        // 1. Scene Setup
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xa0a0a0);
        scene.fog = new THREE.Fog(0xa0a0a0, 10, 50);

        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.set(0, 3, 8);
        camera.lookAt(0, 0, 0);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Lights
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 20, 10);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

        // 2. Road
        const roadGeometry = new THREE.PlaneGeometry(10, 100);
        const roadMaterial = new THREE.MeshBasicMaterial({ color: 0x333333 });
        const road = new THREE.Mesh(roadGeometry, roadMaterial);
        road.rotation.x = -Math.PI / 2;
        scene.add(road);

        // 3. Player Car
        const carGroup = new THREE.Group();
        const bodyGeo = new THREE.BoxGeometry(1.2, 0.6, 2.2);
        const bodyMat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
        const carBody = new THREE.Mesh(bodyGeo, bodyMat);
        carBody.position.y = 0.4;
        carGroup.add(carBody);

        carGroup.position.set(0, 0, 2);
        scene.add(carGroup);

        // 4. Enemy Obstacles
        const obstacles = [];
        function createObstacle() {
            const geo = new THREE.BoxGeometry(1.2, 0.6, 2);
            const mat = new THREE.MeshLambertMaterial({ color: 0x0000ff });
            const obs = new THREE.Mesh(geo, mat);
            obs.position.x = (Math.random() - 0.5) * 6;
            obs.position.y = 0.4;
            obs.position.z = -30;
            scene.add(obs);
            obstacles.push(obs);
        }

        // Controls
        let moveLeft = false, moveRight = false;
        document.addEventListener('keydown', (e) => {
            if(e.key === 'ArrowLeft') moveLeft = true;
            if(e.key === 'ArrowRight') moveRight = true;
        });
        document.addEventListener('keyup', (e) => {
            if(e.key === 'ArrowLeft') moveLeft = false;
            if(e.key === 'ArrowRight') moveRight = false;
        });

        // Touch Controls for Mobile
        document.getElementById('leftBtn').addEventListener('touchstart', () => moveLeft = true);
        document.getElementById('leftBtn').addEventListener('touchend', () => moveLeft = false);
        document.getElementById('rightBtn').addEventListener('touchstart', () => moveRight = true);
        document.getElementById('rightBtn').addEventListener('touchend', () => moveRight = false);

        // Game Loop
        let score = 0;
        let isGameOver = false;

        function animate() {
            if (isGameOver) return;
            requestAnimationFrame(animate);

            // Car Movement
            if (moveLeft && carGroup.position.x > -3.5) carGroup.position.x -= 0.15;
            if (moveRight && carGroup.position.x < 3.5) carGroup.position.x += 0.15;

            // Spawn Obstacles
            if (Math.random() < 0.03) createObstacle();

            // Move Obstacles
            for (let i = 0; i < obstacles.length; i++) {
                let obs = obstacles[i];
                obs.position.z += 0.3;

                // Collision Detection
                if (Math.abs(obs.position.z - carGroup.position.z) < 1.5 &&
                    Math.abs(obs.position.x - carGroup.position.x) < 1) {
                    alert("Game Over! Score: " + score);
                    isGameOver = true;
                    location.reload();
                }

                // Remove passed obstacles & increase score
                if (obs.position.z > 5) {
                    scene.remove(obs);
                    obstacles.splice(i, 1);
                    score += 10;
                    document.getElementById('score').innerText = score;
                }
            }

            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>
