https://github.com/setrf/racing-game
https://github.com/setrf/racing-game
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/setrf/racing-game
- Owner: setrf
- Created: 2025-12-05T00:17:58.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-09T19:44:40.000Z (5 months ago)
- Last Synced: 2026-01-20T04:42:45.848Z (5 months ago)
- Language: JavaScript
- Size: 89.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Highway Racer
A feature-rich, addictive web-based top-down racing game built with HTML5 Canvas, CSS3, and vanilla JavaScript.
## Game Description
Navigate through traffic in this endless racing game! Choose from multiple game modes, collect power-ups, unlock achievements, customize vehicles, and compete for high score!
## How to Play
### Controls
- **Arrow Keys (← →)** or **A/D**: Move left/right between lanes
- **Touch Controls**: Swipe left/right or use on-screen buttons on mobile devices
- **ESC**: Pause/Resume game
### Game Modes
- **Endless**: Classic mode - survive as long as you can with increasing difficulty
- **Time Trial**: Score as many points as possible in 60 seconds
- **Challenge**: Complete specific challenges to earn rewards
- **Zen**: Relaxing mode without collisions or pressure
### Objective
Survive as long as possible while avoiding obstacles. The game gets progressively harder as your speed increases over time.
### Scoring
- **Time Survival**: Earn 1 point for every 100ms you survive
- **Near Misses**: Get bonus points for dodging obstacles at the last second
- **Power-ups**: Collect temporary abilities to help you survive longer
- **Multipliers**: Score 2x points with score multiplier power-up
## Features
### Core Gameplay
- **Smooth Gameplay**: 60 FPS game loop with requestAnimationFrame
- **Progressive Difficulty**: Dynamic difficulty system with level indicators
- **Collision Detection**: Precise rectangle-based collision detection system
- **Visual Effects**: Screen shake on collision, animated lane markings
- **Score Tracking**: High score saved locally in your browser
- **Responsive Design**: Works on desktop and mobile devices
- **Multiple Obstacle Types**: Cars, trucks, and barriers with different colors
### Game Modes
- **Endless Mode**: Classic survival gameplay with increasing difficulty
- **Time Trial Mode**: 60-second timed challenges
- **Challenge Mode**: Sequential challenges with specific objectives
- **Zen Mode**: Casual mode without collisions for relaxed play
### Power-ups System
- **Shield**: Protects from one collision
- **Speed Boost**: Temporarily increases movement speed
- **Slow Motion**: Reduces obstacle speed temporarily
- **Score Multiplier**: Doubles point gains for limited time
- **Clear Road**: Instantly removes all obstacles from screen
- **Visual Indicators**: Active power-up effects with timers
### Vehicle Customization
- **Multiple Vehicle Types**: Sedan, Sports Car, Heavy Truck, Motorcycle
- **Unique Stats**: Each vehicle has different speed, handling, and size characteristics
- **Unlock System**: Vehicles unlock based on score achievements
- **Visual Customization**: Different colors and styles for each vehicle
- **Performance Impact**: Vehicle choice affects gameplay difficulty
### Achievement System
- **20+ Achievements**: Comprehensive achievement tracking across multiple categories
- **Progress Tracking**: Real-time progress indicators for each achievement
- **Categories**: Score achievements, time achievements, skill achievements, and special challenges
- **Rewards**: Unlockable content and features
- **Persistent Stats**: Lifetime statistics tracking
### Particle Effects
- **Multiple Effect Types**: Explosions, sparks, trails, and special effects
- **Dynamic System**: Particle effects respond to game events
- **Performance Optimized**: Automatic particle limit adjustment for smooth gameplay
- **Visual Variety**: Different colors and behaviors for various effects
- **Screen Integration**: Particles work with screen shake and other effects
### Sound & Audio
- **Synthesized Audio**: Procedurally generated sound effects using Web Audio API
- **Dynamic Engine Sounds**: Speed-based engine noise that responds to gameplay
- **Effect Sounds**: Collision, near miss, power-up collection, and achievement sounds
- **Background Music**: Ambient music tracks for different game modes
- **Volume Controls**: Separate controls for effects and music
- **Mute Options**: Full audio control for accessibility
### Environment System
- **Multiple Environments**: Day, Night, Rain, Fog, Sunset, Desert
- **Dynamic Weather**: Animated rain, starry night skies, and fog effects
- **Road Variations**: Different road colors and lane markings per environment
- **Unlock System**: Environments unlock based on achievements
- **Atmospheric Effects**: Immersive weather and lighting effects
### Leaderboard System
- **Multiple Leaderboards**: Separate leaderboards for each game mode
- **Local Storage**: Persistent high score tracking
- **Player Names**: Customizable player name entries
- **Date Tracking**: Automatic date and time recording
- **Rank Display**: Visual indicators for top performances
- **History**: Comprehensive score history tracking
### Accessibility Features
- **High Contrast Mode**: Enhanced visibility with increased color contrast
- **Reduced Motion**: Minimized animations for motion sensitivity
- **Large Text**: Increased font sizes for better readability
- **Color Blind Modes**: Support for protanopia, deuteranopia, and tritanopia
- **Difficulty Settings**: Easy, Normal, and Hard modes
- **Persistent Settings**: Accessibility preferences saved locally
### Touch Controls
- **Mobile Optimized**: Full touch support for mobile devices
- **Gesture Support**: Swipe controls for natural mobile interaction
- **On-screen Buttons**: Visual control buttons for touch devices
- **Haptic Feedback**: Vibration support on capable devices
- **Responsive Design**: Touch controls adapt to screen size
- **Desktop Support**: Mouse support for testing and alternative control
### Performance Optimizations
- **Object Pooling**: Efficient memory management for game objects
- **Frame Rate Monitoring**: Real-time FPS tracking and optimization
- **Dynamic Adjustments**: Automatic quality adjustment based on performance
- **Particle Limits**: Intelligent particle count management
- **Optimized Rendering**: Efficient canvas drawing techniques
- **Performance Indicators**: Visual performance feedback system
## Technical Details
### Technology Stack
- **HTML5 Canvas**: For game rendering
- **Vanilla JavaScript**: Game logic and state management
- **CSS3**: UI styling and responsive design
- **LocalStorage**: For high score and settings persistence
- **Web Audio API**: For synthesized sound effects
### File Structure
```
racing-game/
├── index.html # Main HTML file
├── css/
│ └── style.css # Game styling
├── js/
│ ├── game.js # Main game loop and state management
│ ├── player.js # Player car logic and controls
│ ├── obstacles.js # Obstacle generation and movement
│ ├── utils.js # Helper functions and constants
│ ├── achievements.js # Achievement system
│ ├── powerups.js # Power-ups system
│ ├── particles.js # Particle effects system
│ ├── sound.js # Sound effects system
│ ├── gamemodes.js # Game mode management
│ ├── leaderboard.js # Leaderboard system
│ ├── vehicles.js # Vehicle customization
│ ├── environments.js # Environment system
│ ├── accessibility.js # Accessibility features
│ ├── touchControls.js # Touch controls for mobile
│ └── performance.js # Performance optimizations
├── assets/ # Asset folders
│ ├── images/
│ └── sounds/
└── README.md # This file
```
## Game Architecture
### Core Components
1. **Player**: Manages the player's car with smooth lane transitions
2. **Obstacle Manager**: Generates and controls obstacles with increasing difficulty
3. **Game Controller**: Handles game states, input, and scoring
4. **Collision Detection**: Rectangle-based collision detection system
5. **Visual Effects**: Screen shake and animations for better feedback
6. **Achievement System**: Comprehensive progress tracking and rewards
7. **Power-up System**: Temporary abilities and visual effects
8. **Vehicle Manager**: Multiple vehicle types with customization options
9. **Environment Manager**: Dynamic backgrounds with weather effects
10. **Sound Manager**: Procedural audio generation and playback
### Game States
1. **Menu**: Start screen with instructions and high score
2. **Playing**: Active gameplay with HUD
3. **Paused**: Temporary game pause
4. **Game Over**: End screen with final score and restart option
### Advanced Features
1. **Progressive Difficulty**: Speed increases every 5 seconds with visual indicators
2. **Near Miss Bonus**: Rewards for skillful dodging with bonus points
3. **Combo System**: Multipliers for consecutive successful dodges
4. **Screen Shake Impact**: Visual feedback system for collisions
5. **Animated UI Elements**: Smooth transitions and hover effects
6. **Performance Monitoring**: Real-time FPS tracking with automatic optimization
## Getting Started
1. Clone or download the repository
2. Open `index.html` in your web browser
3. Click "Start Game" to begin playing
## Browser Compatibility
The game works in all modern browsers:
- Chrome (recommended)
- Firefox
- Safari
- Edge
- Mobile browsers (with full touch control support)
## Performance Recommendations
- **Desktop**: Chrome or Firefox recommended for best performance
- **Mobile**: Modern iOS/Android browsers for touch control support
- **Hardware**: WebGL acceleration support improves performance
- **Network**: No internet connection required after initial page load
## Contributing
This is a feature-rich project demonstrating modern web development capabilities. Feel free to fork it and make your own improvements!
## License
This project is open source and available under the [MIT License](LICENSE).
---
Enjoy the game and try to beat your high score!