Spaces:

Tim13ekd
/

anycoder-f79c986c

Running

App Files Files Community

Tim13ekd commited on Jan 19

Commit

af0eefd

verified ·

1 Parent(s): a41e852

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +857 -19

index.html CHANGED Viewed

@@ -1,19 +1,857 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Neon Drift: 3D Physics Racer</title>
+    <!-- Import FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #00f3ff;
+            --secondary-color: #ff00ff;
+            --bg-dark: #0a0a12;
+            --glass-bg: rgba(20, 20, 30, 0.7);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --text-color: #ffffff;
+            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        }
+        * {
+            box-sizing: border-box;
+            user-select: none;
+            -webkit-user-select: none;
+            touch-action: none; /* Prevent scrolling on mobile */
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: var(--bg-dark);
+            font-family: var(--font-main);
+            color: var(--text-color);
+        }
+        /* --- Canvas Container --- */
+        #game-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 1;
+        }
+        /* --- UI Overlay Layer --- */
+        #ui-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10;
+            pointer-events: none; /* Let clicks pass through to controls/canvas */
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        /* --- Header / Top Bar --- */
+        .top-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
+            pointer-events: auto;
+        }
+        .brand {
+            font-size: 1.2rem;
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-shadow: 0 0 10px var(--primary-color);
+        }
+        .brand a {
+            color: var(--primary-color);
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .brand a:hover {
+            color: var(--secondary-color);
+        }
+        .stats {
+            display: flex;
+            gap: 20px;
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+        }
+        .stat-box {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            padding: 8px 15px;
+            border-radius: 8px;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+        }
+        .stat-label {
+            font-size: 0.7rem;
+            color: #aaa;
+            display: block;
+        }
+        .stat-value {
+            font-size: 1.2rem;
+            color: var(--primary-color);
+        }
+        /* --- Main Menu (Start Screen) --- */
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(10, 10, 18, 0.85);
+            backdrop-filter: blur(10px);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 20;
+            pointer-events: auto;
+            transition: opacity 0.5s ease;
+        }
+        #start-screen.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        h1 {
+            font-size: 4rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
+            text-align: center;
+        }
+        p.subtitle {
+            font-size: 1.2rem;
+            color: #ccc;
+            margin-bottom: 3rem;
+            text-align: center;
+            max-width: 600px;
+            line-height: 1.5;
+        }
+        .btn {
+            background: linear-gradient(90deg, var(--primary-color), #00a8ff);
+            border: none;
+            padding: 15px 40px;
+            color: #000;
+            font-size: 1.2rem;
+            font-weight: bold;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            box-shadow: 0 0 15px var(--primary-color);
+            text-transform: uppercase;
+        }
+        .btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 25px var(--secondary-color);
+        }
+        .controls-info {
+            margin-top: 40px;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            text-align: center;
+        }
+        .control-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #888;
+        }
+        .control-item i {
+            font-size: 1.5rem;
+            margin-bottom: 10px;
+            color: var(--text-color);
+        }
+        /* --- Mobile Controls --- */
+        #mobile-controls {
+            display: none; /* Hidden on desktop by default */
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            padding: 20px;
+            padding-bottom: 40px;
+        }
+        .touch-zone {
+            pointer-events: auto;
+            position: absolute;
+            bottom: 20px;
+            display: flex;
+            gap: 15px;
+        }
+        .d-pad {
+            left: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+        .pedals {
+            right: 20px;
+            display: flex;
+            flex-direction: row-reverse; /* Brake on left, Gas on right relative to hand */
+            gap: 15px;
+        }
+        .touch-btn {
+            width: 70px;
+            height: 70px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            color: white;
+            font-size: 1.5rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            backdrop-filter: blur(4px);
+            transition: background 0.1s, transform 0.1s;
+        }
+        .touch-btn:active, .touch-btn.active {
+            background: rgba(0, 243, 255, 0.3);
+            transform: scale(0.95);
+            border-color: var(--primary-color);
+        }
+        .touch-btn.brake:active, .touch-btn.brake.active {
+            background: rgba(255, 0, 100, 0.3);
+            border-color: var(--secondary-color);
+        }
+        /* --- Reset Button --- */
+        #reset-btn {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.6);
+            border: 1px solid white;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            pointer-events: auto;
+            cursor: pointer;
+            font-size: 0.9rem;
+            display: none;
+        }
+        #reset-btn:hover {
+            background: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        /* --- Media Queries --- */
+        @media (max-width: 768px) {
+            h1 { font-size: 2.5rem; }
+            .controls-info { display: none; } /* Hide keyboard info on mobile */
+            #mobile-controls { display: block; }
+            #reset-btn { display: block; }
+        }
+    </style>
+    <!-- Three.js & Cannon-es via Import Map -->
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
+                "cannon-es": "https://unpkg.com/cannon-es@0.20.0/dist/cannon-es.js"
+            }
+        }
+    </script>
+</head>
+<body>
+    <!-- Game Canvas -->
+    <div id="game-container"></div>
+    <!-- UI Overlay -->
+    <div id="ui-layer">
+        <div class="top-bar">
+            <div class="brand">
+                <i class="fa-solid fa-gamepad"></i> Neon Drift
+                <span style="font-size: 0.7em; opacity: 0.7; margin-left: 10px;">| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></span>
+            </div>
+            <div class="stats">
+                <div class="stat-box">
+                    <span class="stat-label">SPEED</span>
+                    <span class="stat-value" id="speed-display">0 <small>km/h</small></span>
+                </div>
+            </div>
+        </div>
+        <div id="reset-btn" onclick="resetCar()">
+            <i class="fa-solid fa-rotate-right"></i> Flip Car
+        </div>
+        <!-- Mobile Controls -->
+        <div id="mobile-controls">
+            <div class="touch-zone d-pad">
+                <div class="touch-btn" id="btn-left"><i class="fa-solid fa-arrow-left"></i></div>
+                <div class="touch-btn" id="btn-right"><i class="fa-solid fa-arrow-right"></i></div>
+            </div>
+            <div class="touch-zone pedals">
+                <div class="touch-btn" id="btn-brake" style="border-color: #ff6666;"><i class="fa-solid fa-stop"></i></div>
+                <div class="touch-btn" id="btn-gas"><i class="fa-solid fa-gas-pump"></i></div>
+            </div>
+        </div>
+    </div>
+    <!-- Start Screen -->
+    <div id="start-screen">
+        <h1>NEON DRIFT</h1>
+        <p class="subtitle">Physics-based driving experience. Jump ramps, drift, and explore the cyber-grid.</p>
+        <button class="btn" id="start-btn">Start Engine</button>
+        <div class="controls-info">
+            <div class="control-item">
+                <i class="fa-solid fa-keyboard"></i>
+                <span>WASD / Arrows</span>
+            </div>
+            <div class="control-item">
+                <i class="fa-solid fa-gamepad"></i>
+                <span>Controller</span>
+            </div>
+            <div class="control-item">
+                <i class="fa-solid fa-mobile-screen"></i>
+                <span>Touch</span>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import * as THREE from 'three';
+        import * as CANNON from 'cannon-es';
+        // --- Configuration ---
+        const CONFIG = {
+            shadows: true,
+            maxSteerVal: 0.5,
+            maxForce: 1000,
+            brakeForce: 20,
+            colors: {
+                bg: 0x0a0a12,
+                grid: 0x00f3ff,
+                car: 0xff00ff,
+                obstacle: 0x222222
+            }
+        };
+        // --- Globals ---
+        let scene, camera, renderer, world;
+        let vehicle, chassisBody, wheelBodies = [];
+        let meshHelper;
+        let lastTime;
+        let isGameActive = false;
+        // Input State
+        const input = {
+            forward: false,
+            backward: false,
+            left: false,
+            right: false,
+            brake: false
+        };
+        // --- Initialization ---
+        function init() {
+            // 1. Setup Three.js Scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(CONFIG.colors.bg);
+            scene.fog = new THREE.FogExp2(CONFIG.colors.bg, 0.015);
+            // 2. Camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            // 3. Renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.getElementById('game-container').appendChild(renderer.domElement);
+            // 4. Lights
+            const ambientLight = new THREE.AmbientLight(0x404040, 1.5); // Soft white light
+            scene.add(ambientLight);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+            dirLight.position.set(50, 100, 50);
+            dirLight.castShadow = true;
+            dirLight.shadow.mapSize.width = 2048;
+            dirLight.shadow.mapSize.height = 2048;
+            dirLight.shadow.camera.near = 0.5;
+            dirLight.shadow.camera.far = 500;
+            dirLight.shadow.camera.left = -50;
+            dirLight.shadow.camera.right = 50;
+            dirLight.shadow.camera.top = 50;
+            dirLight.shadow.camera.bottom = -50;
+            scene.add(dirLight);
+            // Neon Point Lights
+            const pLight1 = new THREE.PointLight(CONFIG.colors.grid, 2, 50);
+            pLight1.position.set(0, 5, 0);
+            scene.add(pLight1);
+            // 5. Physics World
+            world = new CANNON.World();
+            world.gravity.set(0, -9.82, 0);
+            world.broadphase = new CANNON.SAPBroadphase(world);
+            // Materials
+            const groundMat = new CANNON.Material();
+            const wheelMat = new CANNON.Material();
+            const wheelGroundContact = new CANNON.ContactMaterial(wheelMat, groundMat, {
+                friction: 0.3,
+                restitution: 0,
+                contactEquationStiffness: 1000
+            });
+            world.addContactMaterial(wheelGroundContact);
+            // 6. Create Environment
+            createEnvironment(groundMat);
+            // 7. Create Car
+            createCar(wheelMat);
+            // 8. Event Listeners
+            window.addEventListener('resize', onWindowResize);
+            setupInputs();
+            // Start Loop
+            lastTime = performance.now();
+            requestAnimationFrame(animate);
+        }
+        // --- Environment Generation ---
+        function createEnvironment(material) {
+            // Floor
+            const groundGeo = new THREE.PlaneGeometry(500, 500);
+            const groundTex = createGridTexture();
+            groundTex.wrapS = THREE.RepeatWrapping;
+            groundTex.wrapT = THREE.RepeatWrapping;
+            groundTex.repeat.set(100, 100);
+            const groundMesh = new THREE.Mesh(
+                groundGeo,
+                new THREE.MeshStandardMaterial({
+                    map: groundTex,
+                    roughness: 0.8,
+                    metalness: 0.2
+                })
+            );
+            groundMesh.rotation.x = -Math.PI / 2;
+            groundMesh.receiveShadow = true;
+            scene.add(groundMesh);
+            // Physics Ground
+            const groundBody = new CANNON.Body({
+                mass: 0, // static
+                shape: new CANNON.Plane(),
+                material: material
+            });
+            groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
+            world.addBody(groundBody);
+            // Obstacles & Ramps
+            createObstacle(10, 1, 10, -20, 0.5, -20); // Box
+            createObstacle(2, 1, 8, 15, 0.5, -30); // Wall
+            createRamp(8, 2, 10, -15, 1, 15); // Ramp
+            createRamp(8, 2, 10, 20, 1, 30); // Ramp 2
+        }
+        function createGridTexture() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 512;
+            canvas.height = 512;
+            const ctx = canvas.getContext('2d');
+            // Background
+            ctx.fillStyle = '#0a0a12';
+            ctx.fillRect(0, 0, 512, 512);
+            // Grid Lines
+            ctx.strokeStyle = '#00f3ff';
+            ctx.lineWidth = 2;
+            // Glow effect
+            ctx.shadowBlur = 10;
+            ctx.shadowColor = '#00f3ff';
+            ctx.beginPath();
+            // Vertical lines
+            for(let i=0; i<=512; i+=64) {
+                ctx.moveTo(i, 0);
+                ctx.lineTo(i, 512);
+            }
+            // Horizontal lines
+            for(let i=0; i<=512; i+=64) {
+                ctx.moveTo(0, i);
+                ctx.lineTo(512, i);
+            }
+            ctx.stroke();
+            const tex = new THREE.CanvasTexture(canvas);
+            tex.anisotropy = 16;
+            return tex;
+        }
+        function createObstacle(w, h, d, x, y, z) {
+            // Visual
+            const geo = new THREE.BoxGeometry(w, h, d);
+            const mat = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.1 });
+            const mesh = new THREE.Mesh(geo, mat);
+            mesh.position.set(x, y, z);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            scene.add(mesh);
+            // Neon Edges
+            const edges = new THREE.EdgesGeometry(geo);
+            const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xff00ff }));
+            mesh.add(line);
+            // Physics
+            const shape = new CANNON.Box(new CANNON.Vec3(w/2, h/2, d/2));
+            const body = new CANNON.Body({ mass: 0 });
+            body.addShape(shape);
+            body.position.set(x, y, z);
+            world.addBody(body);
+        }
+        function createRamp(w, h, d, x, y, z) {
+            // Visual
+            const geo = new THREE.BoxGeometry(w, h, d);
+            const mat = new THREE.MeshStandardMaterial({ color: 0x222222 });
+            const mesh = new THREE.Mesh(geo, mat);
+            mesh.position.set(x, y, z);
+            mesh.rotation.x = -0.2; // Tilt
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            scene.add(mesh);
+            // Physics
+            const shape = new CANNON.Box(new CANNON.Vec3(w/2, h/2, d/2));
+            const body = new CANNON.Body({ mass: 0 });
+            body.addShape(shape);
+            body.position.set(x, y, z);
+            body.quaternion.setFromEuler(-0.2, 0, 0);
+            world.addBody(body);
+        }
+        // --- Car Creation ---
+        function createCar(material) {
+            // Chassis Dimensions
+            const chassisWidth = 1.8;
+            const chassisHeight = 0.8;
+            const chassisDepth = 4;
+            const mass = 150;
+            // Visual Chassis
+            const chassisGeo = new THREE.BoxGeometry(chassisWidth, chassisHeight, chassisDepth);
+            const chassisMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.2, metalness: 0.8 });
+            const chassisMesh = new THREE.Mesh(chassisGeo, chassisMat);
+            chassisMesh.castShadow = true;
+            // Add glowing details to car
+            const cabinGeo = new THREE.BoxGeometry(1.4, 0.6, 2);
+            const cabinMat = new THREE.MeshStandardMaterial({ color: CONFIG.colors.car, emissive: CONFIG.colors.secondary, emissiveIntensity: 0.5 });
+            const cabinMesh = new THREE.Mesh(cabinGeo, cabinMat);
+            cabinMesh.position.y = 0.5;
+            cabinMesh.position.z = -0.2;
+            chassisMesh.add(cabinMesh);
+            // Tail lights
+            const tailGeo = new THREE.BoxGeometry(0.6, 0.2, 0.1);
+            const tailMat = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+            const tl = new THREE.Mesh(tailGeo, tailMat);
+            tl.position.set(-0.5, 0, 2);
+            const tr = new THREE.Mesh(tailGeo, tailMat);
+            tr.position.set(0.5, 0, 2);
+            chassisMesh.add(tl);
+            chassisMesh.add(tr);
+            scene.add(chassisMesh);
+            // Physics Chassis
+            const chassisShape = new CANNON.Box(new CANNON.Vec3(chassisWidth/2, chassisHeight/2, chassisDepth/2));
+            chassisBody = new CANNON.Body({ mass: mass, material: material });
+            chassisBody.addShape(chassisShape);
+            chassisBody.position.set(0, 4, 0); // Drop from sky
+            chassisBody.angularDamping = 0.5;
+            world.addBody(chassisBody);
+            // Vehicle Setup
+            vehicle = new CANNON.RaycastVehicle({
+                chassisBody: chassisBody,
+            });
+            const wheelOptions = {
+                radius: 0.5,
+                directionLocal: new CANNON.Vec3(0, -1, 0),
+                suspensionStiffness: 30,
+                suspensionRestLength: 0.3,
+                frictionSlip: 1.4,
+                dampingRelaxation: 2.3,
+                dampingCompression: 4.4,
+                maxSuspensionForce: 100000,
+                rollInfluence: 0.01,
+                axleLocal: new CANNON.Vec3(-1, 0, 0),
+                chassisConnectionPointLocal: new CANNON.Vec3(1, 1, 0),
+                maxSuspensionTravel: 0.3,
+                customSlidingRotationalSpeed: -30,
+                useCustomSlidingRotationalSpeed: true
+            };
+            // Add wheels
+            const axleWidth = 1.3;
+            const frontPos = 1.3;
+            const rearPos = -1.2;
+            const wheelHeight = -0.5;
+            // Front Left
+            wheelOptions.chassisConnectionPointLocal.set(axleWidth, wheelHeight, frontPos);
+            vehicle.addWheel(wheelOptions);
+            // Front Right
+            wheelOptions.chassisConnectionPointLocal.set(-axleWidth, wheelHeight, frontPos);
+            vehicle.addWheel(wheelOptions);
+            // Rear Left
+            wheelOptions.chassisConnectionPointLocal.set(axleWidth, wheelHeight, rearPos);
+            vehicle.addWheel(wheelOptions);
+            // Rear Right
+            wheelOptions.chassisConnectionPointLocal.set(-axleWidth, wheelHeight, rearPos);
+            vehicle.addWheel(wheelOptions);
+            vehicle.addToWorld(world);
+            // Wheel Visuals
+            const wheelGeo = new THREE.CylinderGeometry(wheelOptions.radius, wheelOptions.radius, wheelOptions.radius / 2, 24);
+            wheelGeo.rotateZ(Math.PI / 2);
+            const wheelMeshMat = new THREE.MeshStandardMaterial({ color: 0x333333 });
+            const rimMat = new THREE.MeshBasicMaterial({ color: CONFIG.colors.primary });
+            vehicle.wheelInfos.forEach((wheel) => {
+                const cylinder = new THREE.Mesh(wheelGeo, wheelMeshMat);
+                cylinder.castShadow = true;
+                // Add Rim visual
+                const rim = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.8, 0.8), rimMat);
+                rim.rotation.x = Math.PI/2;
+                cylinder.add(rim);
+                scene.add(cylinder);
+                wheelBodies.push(cylinder);
+            });
+            // Sync Chassis Mesh with Body
+            chassisBody.visualMesh = chassisMesh;
+        }
+        // --- Inputs Handling ---
+        function setupInputs() {
+            // Keyboard
+            document.addEventListener('keydown', (e) => {
+                switch(e.key.toLowerCase()) {
+                    case 'w': case 'arrowup': input.forward = true; break;
+                    case 's': case 'arrowdown': input.backward = true; break;
+                    case 'a': case 'arrowleft': input.left = true; break;
+                    case 'd': case 'arrowright': input.right = true; break;
+                    case ' ': input.brake = true; break;
+                }
+            });
+            document.addEventListener('keyup', (e) => {
+                switch(e.key.toLowerCase()) {
+                    case 'w': case 'arrowup': input.forward = false; break;
+                    case 's': case 'arrowdown': input.backward = false; break;
+                    case 'a': case 'arrowleft': input.left = false; break;
+                    case 'd': case 'arrowright': input.right = false; break;
+                    case ' ': input.brake = false; break;
+                }
+            });
+            // Touch (Mobile)
+            const addTouch = (id, key) => {
+                const el = document.getElementById(id);
+                el.addEventListener('touchstart', (e) => { e.preventDefault(); input[key] = true; el.classList.add('active'); });
+                el.addEventListener('touchend', (e) => { e.preventDefault(); input[key] = false; el.classList.remove('active'); });
+            };
+            addTouch('btn-gas', 'forward');
+            addTouch('btn-brake', 'backward'); // Using backward for brake/reverse logic
+            addTouch('btn-left', 'left');
+            addTouch('btn-right', 'right');
+            // Start Button
+            document.getElementById('start-btn').addEventListener('click', () => {
+                document.getElementById('start-screen').classList.add('hidden');
+                isGameActive = true;
+            });
+        }
+        function handleGamepad() {
+            const gamepads = navigator.getGamepads();
+            if (gamepads[0]) {
+                const gp = gamepads[0];
+                // Deadzone check
+                const deadzone = 0.1;
+                // Left Stick Axis 0 (Steering) or D-Pad Axis 0
+                let steerAxis = gp.axes[0];
+                if (Math.abs(steerAxis) < deadzone) steerAxis = 0;
+                if (steerAxis < -0.1) { input.left = true; input.right = false; }
+                else if (steerAxis > 0.1) { input.left = false; input.right = true; }
+                else { input.left = false; input.right = false; }
+                // Triggers or Buttons for Gas/Brake
+                // Button 0 (A/Cross), Button 1 (B/Circle)
+                input.forward = gp.buttons[0].pressed;
+                input.backward = gp.buttons[1].pressed || gp.buttons[2].pressed; // B or X
+            }
+        }
+        // --- Game Logic ---
+        function updatePhysics() {
+            if (!vehicle) return;
+            // Steering
+            const steer = input.left ? CONFIG.maxSteerVal : (input.right ? -CONFIG.maxSteerVal : 0);
+            vehicle.setSteeringValue(steer, 0);
+            vehicle.setSteeringValue(steer, 1);
+            // Engine Force
+            let force = 0;
+            if (input.forward) force = -CONFIG.maxForce;
+            if (input.backward) force = CONFIG.maxForce / 2; // Reverse is slower
+            vehicle.applyEngineForce(force, 2);
+            vehicle.applyEngineForce(force, 3);
+            // Brakes
+            const brakeForce = input.brake ? CONFIG.brakeForce : 0;
+            vehicle.setBrake(brakeForce, 0);
+            vehicle.setBrake(brakeForce, 1);
+            vehicle.setBrake(brakeForce, 2);
+            vehicle.setBrake(brakeForce, 3);
+            // Update Physics World
+            world.step(1 / 60);
+            // Sync Visuals
+            for (let i = 0; i < vehicle.wheelInfos.length; i++) {
+                vehicle.updateWheelTransform(i);
+                const t = vehicle.wheelInfos[i].worldTransform;
+                const wheelMesh = wheelBodies[i];
+                wheelMesh.position.copy(t.position);
+                wheelMesh.quaternion.copy(t.quaternion);
+            }
+            if (chassisBody && chassisBody.visualMesh) {
+                chassisBody.visualMesh.position.copy(chassisBody.position);
+                chassisBody.visualMesh.quaternion.copy(chassisBody.quaternion);
+            }
+        }
+        function updateCamera() {
+            if (!chassisBody) return;
+            // Camera Follow Logic (Smooth Lerp)
+            const relativeCameraOffset = new THREE.Vector3(0, 5, 10);
+            const cameraOffset = relativeCameraOffset.applyMatrix4(chassisBody.visualMesh.matrixWorld);
+            // Simple lerp
+            camera.position.lerp(cameraOffset, 0.1);
+            // Look slightly ahead of the car
+            const carPos = chassisBody.visualMesh.position;
+            const lookTarget = new THREE.Vector3(carPos.x, carPos.y, carPos.z - 10);
+            // Apply rotation of car to look target? No, just look at car generally
+            camera.lookAt(carPos);
+        }
+        function updateUI() {
+            if (!chassisBody) return;
+            // Speed calculation (approximate)
+            const velocity = chassisBody.velocity;
+            const speed = Math.sqrt(velocity.x**2 + velocity.z**2) * 3.6; // m/s to km/h
+            document.getElementById('speed-display').innerHTML = Math.round(speed) + ' <small>km/h</small>';
+        }
+        // Global Reset Function
+        window.resetCar = function() {
+            if (!chassisBody) return;
+            chassisBody.position.set(0, 2, 0);
+            chassisBody.quaternion.set(0, 0, 0, 1);
+            chassisBody.velocity.set(0, 0, 0);
+            chassisBody.angularVelocity.set(0, 0, 0);
+        };
+        function animate() {
+            requestAnimationFrame(animate);
+            if (isGameActive) {
+                handleGamepad();
+                updatePhysics();
+                updateCamera();
+                updateUI();
+            }
+            renderer.render(scene, camera);
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        // Start
+        init();
+    </script>
+</body>
+</html>