Create a 3D taxi game playable in a web browser using HTML, CSS, and JavaScript. The game should be visually appealing, interactive, and fully functional, with smooth animations and a dynamic city environment. The goal is to build a “Crazy Taxi-style” arcade experience with modern graphics and responsive controls. Follow these detailed specifications:
1. Core Game Concept
The player controls a taxi in a bustling city.
Pick up passengers at random locations and drop them off at their requested destinations within a time limit.
Earn points or money based on speed, efficiency, and special stunts (like near-misses or jumps).
Include random city events (traffic jams, pedestrians crossing, roadblocks) for added challenge.
Include a scoring system that displays cash earned, time remaining, and performance rating.
2. Graphics and Visual Style
3D graphics simulated in the browser (e.g., using Three.js or Babylon.js for rendering).
City should have:
Skyscrapers, houses, street lamps, traffic lights, sidewalks, and animated cars.
Roads with lanes, curves, and intersections.
Pedestrians walking along sidewalks.
Taxi:
Bright, stylish, recognizable (yellow or customizable colors).
Rotating wheels, suspension movement, and animated lights.
Passengers:
Small, simple 3D models or icons.
Appear at pick-up points with animated gestures or waving.
Optional: Dynamic lighting and shadows for realism.
Background: city skyline with skybox or gradient for daytime/nighttime cycles.
3. User Interface (UI)
Display in a HUD overlay:
Current score/money.
Time remaining.
Passenger location/destination mini-map.
Buttons for:
Pause game.
Restart game.
Toggle camera view.
Optional: In-game instructions for first-time players.
4. Game Controls
Keyboard Controls:
Arrow keys or WASD to drive taxi.
Spacebar to handbrake or jump over ramps.
Mouse/Touch Controls:
Optional camera rotation using mouse drag.
Smooth acceleration, deceleration, and steering.
Collision detection:
Colliding with obstacles reduces points or slows taxi.
Colliding with pedestrians triggers penalties.
5. Game Mechanics
Passenger System:
Random spawn points.
Pick-up triggers when taxi touches passenger.
Timer counts down for each trip; faster delivery = higher score.
Traffic & AI Cars:
Randomized movement along lanes.
AI cars obey basic traffic rules but occasionally block or challenge the player.
Scoring:
Points for completed trips.
Bonus points for tricks (drifting, near misses).
Penalty for collisions, missing destinations, or running out of time.
Levels or Unlockables:
Optional: Multiple districts or levels.
Unlock new taxi skins, abilities, or city areas with progress.
6. Audio
Background city sounds: traffic, pedestrians, ambient noises.
Engine and horn sounds for the taxi.
Reward sounds for pickups, deliveries, or combo moves.
Optional: Background music loop.
7. Technical Requirements
Written in HTML5, CSS3, and JavaScript (ES6).
Use Three.js (or Babylon.js) for 3D rendering.
Responsive design to fit desktop and optionally mobile screens.
Efficient performance:
Optimize rendering for smooth frame rates (~60 FPS).
Use low-poly 3D models to reduce load times.
Modular and readable code:
Separate files for HTML, CSS, JS.
Clear comments explaining each function and game mechanic.
Optional: Store high scores using localStorage.
8. Bonus Features
Day/night cycle with changing lighting.
Weather effects (rain, fog).
Traffic light system influencing AI cars.
Camera options:
First-person taxi view.
Third-person chase view.
Free camera to explore the city.
Mini-map showing passenger locations and destination routes.
9. Deliverables
Fully playable 3D browser game.
Clean, modular code with comments.
All assets either created in code (procedural) or imported with proper licensing.
Optional demo levels showcasing city layout, traffic, and passengers.