A 3D endless runner game built with Three.js, featuring infrastructure-themed obstacles and power-ups.
- Endless runner gameplay with increasing difficulty
- Power-up system with 5 unique abilities
- Infrastructure theme with construction obstacles and collectibles
- Responsive controls with keyboard and optional mobile support
- Score system tracking blueprints, water drops, and energy cells
infra-runner/
├── index.html # Main HTML file
├── js/
│ ├── constants.js # Game constants and configuration
│ ├── player.js # Player character logic
│ ├── environment.js # Scene, lighting, buildings, ground
│ ├── obstacles.js # Obstacle spawning and management
│ ├── collectables.js # Collectibles and power-up items
│ ├── powerups.js # Power-up activation and effects
│ ├── ui.js # User interface and scoring
│ ├── input.js # Keyboard and mobile input handling
│ └── game.js # Main game controller and loop
└── README.md # This file
-
Create the directory structure:
mkdir -p C:/Users/richu/Documents/Programming/infra-runner/js cd C:/Users/richu/Documents/Programming/infra-runner -
Save the files:
- Save each artifact as the corresponding file in the structure above
- Make sure all
.jsfiles go in thejs/folder - Save
index.htmlin the root directory
-
Serve the files: Since the project uses ES6 modules, you need to serve it from a local server:
Option A: Using Python (if installed)
python -m http.server 8000
Option B: Using Node.js Live Server (if installed)
npx live-server
Option C: Using any local web server
- VS Code Live Server extension
- XAMPP, WAMP, or similar
-
Open in browser: Navigate to
http://localhost:8000(or whatever port your server uses)
- Arrow Keys or WASD: Move left/right and jump
- Spacebar: Jump (alternative)
- R: Restart game when game over
- 🔵 Blueprints (50 points): Essential construction plans
- 💧 Water Drops (20 points): Water infrastructure components
- ⚡ Energy Cells (30 points): Power grid components
- ⭐ Aerial Stars (150 points): Special high-altitude collectibles (only when flying)
- 🛡️ Hard Hat Shield (5s): Temporary invincibility
- 🚁 Helicopter Ride (10s): Fly above obstacles and collect aerial stars
- 🌟 Solar Power Boost (8s): Increased speed and magnetic collection
- 💨 Wind Power (15s): Double jump ability
- 🚰 Water Pipeline (12s): Safe path that clears obstacles
- Potholes: Low road damage
- Construction Barriers: Medium height barriers
- Traffic Cones: Medium obstacles
- Rubble: Construction debris
Edit constants.js:
GAME_CONFIG.INITIAL_SPEED: Starting game speedGAME_CONFIG.SPEED_INCREMENT: How fast the game acceleratesSPAWN_CONFIG.OBSTACLE_MIN_DISTANCE: Minimum space between obstacles
Edit the COLORS object in constants.js:
PLAYER: Player colors for different statesOBSTACLES: Obstacle colorsCOLLECTABLES: Collectible colorsENVIRONMENT: Sky and road colors
Edit POWER_UP_DURATIONS in constants.js:
- All durations are in milliseconds
- Adjust individual power-up times
Edit SCORING in constants.js:
- Point values for different collectibles
- Score rates for normal and boosted play
- Easy debugging: Each component is isolated
- Maintainable: Changes to one system don't affect others
- Extensible: Add new features without touching existing code
- Testable: Each module can be tested independently
- Constants: Centralized configuration
- Player: Character movement and physics
- Environment: World building and scene management
- Obstacles: Challenge generation and collision
- Collectables: Item spawning and collection logic
- PowerUps: Special ability system
- UI: User interface and feedback
- Input: Control handling and responsiveness
- Game: Coordination and main loop
- Console Logs: Each module includes helpful console output
- Browser DevTools: Use F12 to see any errors
- Module Issues: Ensure all files are in correct directories
- Server Required: Must serve from HTTP server, not file:// protocol
The game includes optional mobile controls. Touch controls are automatically enabled on mobile devices with virtual buttons for movement and jumping.
- Sound effects and background music
- Particle systems for enhanced visual effects
- Multiple environments/themes
- Leaderboard system
- Achievement system
- Level progression with different challenges
This project is open source and available under the MIT License.