Rally

Create a fun, fully functional 3D rally racing game using HTML5 Canvas, Three.js, vanilla JavaScript, and CSS. No external image, audio, or model files are allowed—everything must be generated procedurally or synthesized at runtime. Three.js may be loaded from a CDN via a single `<script>` tag; no other external libraries are allowed. ## Core Gameplay - The game is a 3D behind-the-car rally racer. - The player drives a rally car on a winding track through hills, forests, and open terrain. - Goal: complete 3 laps as fast as possible while staying mostly on the track. - Include a start countdown (3-2-1-GO!), a live timer, lap times, and a best-lap display. ## 3D Renderer (Three.js) - Use Three.js to render the scene, camera, lighting, geometry, and materials. - Render the game in 3D perspective from a chase camera behind the car. - Include a sky/horizon, ground plane, track surface, road shoulders, and 3D scenery (trees, rocks, signs, simple crowd/banners). - Use distance fog so distant objects fade in cleanly. - Use appropriate lighting (directional sun + ambient) and simple shadows. - Build a procedural low-poly rally car visible from behind (body, wheels, spoiler, headlights, taillights). - Keep performance smooth on modern browsers targeting 60fps. ## Camera - Chase camera follows the car from behind and slightly above. - Camera should lag slightly on acceleration/turning for a dynamic feel. - Optional: allow toggling between chase cam and a higher cinematic cam with the C key. ## Track Design - Use a pre-defined looped 3D track stored as a list of control points with width and elevation data (or generate one procedurally). - The track must have curves, hills, and dips. - Include invisible checkpoint gates around the track to validate lap progression and prevent shortcut cheating. - Track surface types: asphalt/dirt (fast), grass/gravel (slow), and mud/shallow water (very slow). - Place 3D trees, rocks, signs, and barriers around the track; hitting obstacles slows or bounces the player. ## Car Physics (make it feel fun) - Accelerate, brake, and reverse with keyboard or touch controls. - Speed-dependent steering (tight at low speed, stable at high speed). - Drifting/slide when turning at high speed, especially on dirt or grass. - Off-track surfaces reduce grip and top speed. - Collisions with obstacles and track boundaries bounce the car and kill momentum. - Add skid marks, dust clouds, and sparks when drifting or off-road. ## Controls - Keyboard: Arrow keys or WASD to drive; Space to handbrake; R to restart; P to pause; C to toggle camera view (optional). - Touch (mobile): on-screen directional pad and gas/brake/handbrake buttons. ## Visuals - Full-screen canvas that scales responsively while preserving aspect ratio. - 3D scenery with simple shapes: low-poly trees, rocks, billboards, guard rails, banners. - Particle effects: dust clouds, skid marks, sparks on collision (use Three.js sprites/points or simple meshes). - Minimap/HUD overlay in a corner showing the full track layout and the player’s position. ## UI / HUD - Show speedometer, current gear/RPM (simulated), current lap, total laps, current time, best lap. - Countdown overlay at race start. - Pause menu with Resume and Restart. - Finish screen showing final time, best lap, and a Restart button. ## Audio (synthesized with Web Audio API only) - Engine pitch and volume change with speed and gear. - Short beeps for the countdown and a finishing tone. - Crash/thud sound on collisions. - Skid/gravel sound when drifting or driving off-road. ## Code Quality - Keep game state, input handling, physics, camera, rendering, and UI cleanly separated. - Avoid global namespace pollution; use a single main object/module pattern where possible. - Add comments explaining key sections. - Ensure the game loads Three.js from a CDN and works in any modern browser with an internet connection. No placeholders.