Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

F1 Rainbow Racing Game 🏎️🌈

An interactive 3D F1 racing game featuring cars racing on a spectacular rainbow track in space! Built with Three.js and featuring realistic physics, multiple camera angles, and competitive AI opponents.

🎮 Game Features

Core Racing Features

  • 4 F1 Cars: 1 player-controlled + 3 AI opponents
  • Rainbow Track: Colorful circular track with elevation changes
  • Realistic Physics: Acceleration, deceleration, and steering mechanics
  • Real-time Speedometers: Individual speed displays for all participants
  • Dynamic Lighting: Rainbow-colored point lights that pulse and change

Camera System

  • Chase Camera: Follow behind your car (default)
  • Overhead Camera: Top-down strategic view
  • Cockpit Camera: First-person driving experience
  • Trackside Camera: Fixed position watching the action

Visual Effects

  • Rainbow Track: Each segment cycles through rainbow colors
  • Dynamic Shadows: Realistic shadow casting
  • Particle Effects: Environmental atmosphere
  • Responsive UI: Speedometers with animated progress bars

🎯 How to Play

Controls

  • Arrow Keys / WASD: Accelerate, brake, and steer your car
  • C: Cycle through camera angles
  • R: Reset the race
  • Space: Pause/Resume the game

Objective

Race against 3 AI opponents on the rainbow track. Try to maintain the highest speed while navigating the curved track with elevation changes.

🏗️ Project Structure

├── backend/
│   └── index.ts             # Hono server with static file serving
├── frontend/
│   ├── index.html           # Game HTML with UI overlay
│   ├── game.js              # Three.js game engine and logic
│   └── style.css            # Responsive styling with animations
├── shared/
│   └── types.ts             # TypeScript interfaces
└── README.md                # This file

🚀 Technical Implementation

Backend (Hono)

  • Serves static files using Val Town utilities
  • Injects initial game data into HTML
  • Provides API endpoints for potential multiplayer features

Frontend (Three.js)

  • Scene Management: 3D world with lighting and shadows
  • Car Physics: Realistic movement and collision detection
  • Track Generation: Procedural rainbow track with barriers
  • AI System: Intelligent opponents that follow the track
  • Camera System: Multiple viewing angles with smooth transitions

Styling (CSS + TailwindCSS)

  • Responsive design that works on desktop and mobile
  • Animated speedometers with color-coded progress bars
  • Rainbow loading screen with CSS animations
  • Glassmorphism UI elements with backdrop blur

🎨 Visual Design

The game features a vibrant rainbow aesthetic with:

  • Track Colors: Each segment cycles through ROYGBIV colors
  • Car Colors: Red (Player), Blue, Green, Purple (AI)
  • Lighting: Dynamic rainbow point lights around the track
  • UI: Semi-transparent panels with neon accents

🔧 Customization

The game is easily customizable:

  • Modify rainbowColors array to change track colors
  • Adjust maxSpeed and acceleration for different physics
  • Change track radius and elevation in createTrack()
  • Add more cars by extending the carConfigs array

🌟 Future Enhancements

Potential additions:

  • Lap counting and race completion
  • Power-ups and boost pads
  • Multiplayer support
  • More track layouts
  • Sound effects and music
  • Particle trails behind cars

Ready to race? Click "START RACE" and experience the most colorful F1 racing game in the universe! 🏁