A high-speed battle-race multiplayer browser game where 2-8 players race through an intersecting figure-8 course while engaging in melee combat using mobility abilities.
Wreckless is a low-poly browser-based FPS that combines high-speed racing with tactical melee combat. Players choose from three distinct mobility classes and compete to reach the finish line while using special abilities to knock out opponents and gain speed advantages.
- ๐ Race-Fight Hybrid: Progress through checkpoints while engaging in strategic combat
- โก High-Mobility Classes: Three unique classes with distinct movement abilities
- ๐ฏ Tactical Combat: Cone-sweep melee attacks with blocking and parry mechanics
- ๐ Real-time Multiplayer: 2-8 player online matches with 60Hz tick rate
- ๐ฑ Accessible: Runs on low-spec devices with 60fps performance target
| Component | Technology |
|---|---|
| Frontend | Three.js (r148), TypeScript, Vite |
| Physics | Rapier.js (WebAssembly) |
| Networking | Node.js 18, Socket.io v4 |
| Build Tools | Vite, TypeScript |
| Deployment | Fly.io |
| Class | Ability | Cooldown | Damage | Trade-off |
|---|---|---|---|---|
| Blast-Jumper | Radial impulse jump (2.5m radius) | 3s | 60 HP | 0.3s recovery time |
| Grapple-Swinger | 20m rope swing with auto-detach | 4s | 40 HP | -10% ground speed during CD |
| Blink-Dasher | 8m instant teleport with i-frames | 2.5s | 50 HP (+20 HP bonus if used right after blink) | Stamina drain affecting regen |
- WASD - Movement
- Space - Jump
- Shift - Slide
- LMB - Melee Attack
- RMB - Block
- E - Class Ability
- Esc - Menu
- Node.js 18 or higher
- npm or yarn package manager
- Modern web browser with WebGL2 support
-
Clone the repository
git clone https://github.com/yourusername/wreckless.git cd wreckless -
Install dependencies
# Install root dependencies npm install # Install client dependencies cd client npm install # Install server dependencies cd ../server npm install
-
Start the development server
# In the server directory cd server npm run dev
-
Start the client development server (in a new terminal)
# In the client directory cd client npm run dev
-
Open your browser Navigate to
http://localhost:5173to play the game
# Build the client
cd client
npm run build
# Start production server
cd ../server
npm startwreckless/
โโโ client/ # Frontend Three.js application
โ โโโ src/
โ โ โโโ controller.ts # Input handling
โ โ โโโ physics.ts # Rapier.js physics integration
โ โ โโโ main.ts # Application entry point
โ โ โโโ kits/ # Character class abilities
โ โ โโโ systems/ # Game systems (checkpoints, laps)
โ โ โโโ track/ # Track generation and management
โ โ โโโ hud/ # UI and HUD components
โ โโโ public/ # Static assets
โโโ server/ # Node.js multiplayer server
โโโ docs/ # Project documentation
โ โโโ PRD.md # Product Requirements Document
โ โโโ *.md # Development logs and specs
โโโ README.md # This file
- Choose Your Class: Select from Blast-Jumper, Grapple-Swinger, or Blink-Dasher
- Race Through Checkpoints: Navigate the figure-8 course hitting momentum pads
- Combat Strategy: Use melee attacks to knock out opponents and gain speed buffs
- Mobility Mastery: Master your class ability for optimal traversal and combat
- Victory Conditions: First to finish line OR furthest progress when timer expires
Spawn โ Checkpoint A (Momentum Pad) โ Checkpoint B (Combat Arena) โ Checkpoint C (Vertical Climb) โ Finish Gate
- Target FPS: 60 fps on low-spec laptops
- Physics Frame Budget: โค 2ms
- Triangle Budget: โค 50k total
- Texture Resolution: 256px
- Network Budget: โค 50 KB/s per client
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the Three.js best practices outlined in the project
- Use TypeScript for type safety
- Maintain 60fps performance target
- Test multiplayer functionality locally before submitting PRs
The game includes built-in performance monitoring:
- FPS counter in development mode
- Network latency display
- Physics frame time tracking
- Memory usage monitoring
- Grapple physics may be unstable on very high ping connections
- Mobile touch controls are not yet implemented
- Audio system is placeholder-only in current prototype
- Basic movement and physics
- Checkpoint system
- Class abilities implementation
- Multiplayer synchronization
- Art and audio pass
- Balance testing
- Parry mechanic refinement
- Additional character classes
- Spectator mode
- Replay system
- Tournament bracket system
This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js community for the excellent 3D library
- Rapier.js for robust physics simulation
- Freesound.org for audio assets
- Mixamo for character animation rigs
- Built with assistance from Cursor AI
For questions, bug reports, or feature requests:
- Open an issue on GitHub
- Check the PRD for detailed game design
- Review development logs in the
docs/directory
Happy Racing! ๐๏ธ๐ฅ