Rock It
A competitive 1v1 sports game built with React Three Fiber, Rapier physics, and WebRTC (PeerJS). Players control paddles in a 2D arena to strike a physics-simulated ball into the opponent's goal — first to 5 points wins.
01/06/2024
60 days
Project Overview
Rock It is a competitive 1v1 sports game built with React Three Fiber, Rapier physics, and WebRTC (PeerJS). Players control paddles in a 3D arena to strike a physics-simulated ball into the opponent's goal — first to 5 points wins.
Key Features
- Real-time 1v1 Multiplayer: WebRTC peer-to-peer via PeerJS
- 3D Physics Simulation: Rapier physics engine for realistic ball dynamics
- React Three Fiber: Declarative 3D rendering with React
- Responsive Design: Works on desktop and mobile browsers
- Instant Play: No installation required, runs in browser
Technical Architecture
- Frontend: React 19 + TypeScript + Vite
- 3D Graphics: React Three Fiber (Three.js wrapper)
- Physics: Rapier.js (WASM physics engine)
- Networking: WebRTC via PeerJS for P2P connections
- Styling: Tailwind CSS v4
Development Highlights
- Low-latency P2P networking for competitive gameplay
- Physics synchronization across peer connections
- Optimized 3D rendering for browser performance
- Progressive enhancement for mobile devices