Public
Like
GAMEZACK
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.
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.
- 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
- 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
- Rainbow Track: Each segment cycles through rainbow colors
- Dynamic Shadows: Realistic shadow casting
- Particle Effects: Environmental atmosphere
- Responsive UI: Speedometers with animated progress bars
- Arrow Keys / WASD: Accelerate, brake, and steer your car
- C: Cycle through camera angles
- R: Reset the race
- Space: Pause/Resume the game
Race against 3 AI opponents on the rainbow track. Try to maintain the highest speed while navigating the curved track with elevation changes.
โโโ 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
- Serves static files using Val Town utilities
- Injects initial game data into HTML
- Provides API endpoints for potential multiplayer features
- 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
- 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
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
The game is easily customizable:
- Modify
rainbowColorsarray to change track colors - Adjust
maxSpeedandaccelerationfor different physics - Change track radius and elevation in
createTrack() - Add more cars by extending the
carConfigsarray
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! ๐