Skip to content

sasi-upparapalli/Lane-Escape

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

12 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽ๏ธ Lane Escape Car Game ๐ŸŽ๏ธ

Experience the thrill of retro arcade racing right in your browser!

Lane Escape GIF

Lane.gif

HTML5 CSS3 JavaScript


โœจ Features

๐ŸŽฎ Multi-Level Gameplay - Choose from Easy, Medium, and Hard difficulty levels
๐Ÿ“ฑ Mobile Responsive - Touch controls for mobile devices
๐ŸŽจ Retro Arcade Style - Beautiful pixel-perfect graphics with classic fonts
๐Ÿ† High Score System - Track your best scores per level and username
โšก Smooth Animations - Fluid car movements and dynamic opponent spawning
๐ŸŽต Interactive UI - Font Awesome icons and modern design elements
๐Ÿ‘ค User Profiles - Personalized experience with username tracking


๐ŸŽฏ How to Play

  1. Enter Username - Start by entering your player name
  2. Select Level - Choose your difficulty:
    • ๐ŸŸข Level 1: Easy - Slow opponents, perfect for beginners
    • ๐ŸŸก Level 2: Medium - Moderate speed challenge
    • ๐Ÿ”ด Level 3: Hard - Fast opponents, ultimate test of reflexes
  3. Avoid Traffic - Use arrow keys (or touch controls) to dodge incoming cars
  4. Beat Your High Score - Try to achieve the highest score possible!

๐ŸŽฎ Controls

Desktop

  • โฌ…๏ธ Left Arrow - Move car left
  • โžก๏ธ Right Arrow - Move car right
  • P Key - Pause/Resume game

Mobile

  • โฌ…๏ธ Left Button - Move car left
  • โžก๏ธ Right Button - Move car right
  • Touch the game area to focus controls

๐Ÿš€ Quick Start

Method 1: Direct Play

  1. Download or clone this repository
  2. Open index.html in any modern web browser
  3. Start playing immediately!

Method 2: Clone Repository

git clone https://github.com/your-username/single-screen-car-game.git
cd single-screen-car-game
# Open index.html in browser

๐Ÿ“ Project Structure

single-screen-car-game/
โ”‚
โ”œโ”€โ”€ index.html                 # Main game interface
โ”œโ”€โ”€ style.css                  # Styling and responsive design
โ”œโ”€โ”€ script.js                  # Game logic and controls
โ”œโ”€โ”€ assets/                    # Game assets folder
โ”‚   โ”œโ”€โ”€ player1.png           # Player car (Level 1)
โ”‚   โ”œโ”€โ”€ player2.png           # Player car (Level 2) 
โ”‚   โ”œโ”€โ”€ player3.png           # Player car (Level 3)
โ”‚   โ”œโ”€โ”€ opponent1.png         # Opponent cars
โ”‚   โ”œโ”€โ”€ opponent2.png         # (12 different opponent
โ”‚   โ””โ”€โ”€ ...opponent12.png     # car designs available)
โ””โ”€โ”€ README.md                 # This file

๐ŸŽจ Design Features

Fonts & Typography

  • Press Start 2P - Retro gaming headers
  • Kanit - Modern interface text
  • Silkscreen - Pixel-perfect details
  • Varela Round - Smooth readable text

Color Palette

  • Primary: #3ee3b3 (Bright teal accent)
  • Gold: #FFD700 (Highlighting elements)
  • Background: #071123 (Deep space blue)
  • Text: #e6eef8 (Clean white-blue)

Icons & Assets

  • Font Awesome 4.7.0 & 6.4.2 for UI icons
  • 12 Unique Opponent Cars with pixel art style
  • 3 Player Cars (one for each difficulty level)

๐Ÿ“Š Game Mechanics

Scoring System

  • Base Score: 10 points per second survived
  • Speed Multiplier:
    • Level 1: 1.45x
    • Level 2: 1.45x
    • Level 3: 1.8x
  • High Scores: Stored locally per user and level

Difficulty Levels

Level Opponent Count Speed Spawn Rate Max Opponents
1 (Easy) 4 1.45x 1500ms 4
2 (Medium) 5 1.45x 600ms 5
3 (Hard) 6 1.8x 600ms 6

๐Ÿ–ผ๏ธ Screenshots & Demo

Lane-2.png

๐ŸŽญ About Section

The game pays homage to classic arcade racers:

Historical Inspiration

  • Gran Trak 10 (1974) - First arcade racing game with steering wheel controls
  • Pole Position (1982) - Introduced real-world racing circuits and third-person perspective

Learn more about gaming history in the built-in "About" section!


๐ŸŒ Social Links

Connect with the developer:

LinkedIn GitHub Twitter Instagram Email


๐Ÿ”ง Technical Details

Browser Compatibility

  • โœ… Chrome 80+
  • โœ… Firefox 75+
  • โœ… Safari 13+
  • โœ… Edge 80+
  • โœ… Mobile browsers (iOS Safari, Chrome Mobile)

Performance Features

  • Optimized Animations using requestAnimationFrame
  • Efficient Collision Detection with bounding box calculations
  • Memory Management for opponent sprites
  • Responsive Scaling for different screen sizes

๐Ÿค Contributing

Contributions are welcome! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Ideas for Contribution

  • ๐ŸŽจ New car designs and sprites
  • ๐ŸŽต Sound effects and background music
  • ๐Ÿ† Power-ups and special abilities
  • ๐ŸŒŸ New game modes (time attack, survival)
  • ๐ŸŽฎ Gamepad controller support

๐Ÿ“‹ Roadmap

Planned Features

  • Sound System - Engine sounds and collision effects
  • Power-ups - Speed boost, invincibility, extra points
  • Leaderboards - Online high score sharing
  • More Levels - Additional difficulty tiers
  • Car Customization - Player car color/style options
  • Weather Effects - Rain, fog, night mode

๐Ÿ› Known Issues

  • Mobile touch controls may need calibration on some devices
  • High scores reset when browser data is cleared
  • Performance may vary on older mobile devices

๐ŸŽ‰ Acknowledgments

  • Font Awesome for the beautiful icons
  • Google Fonts for typography
  • Classic Arcade Games for inspiration
  • Open Source Community for tools and resources

๐Ÿ Ready to Race? Start Your Engines! ๐Ÿ

May the best driver win!


Built with โค๏ธ by Sasi Upparapalli

Releases

No releases published

Packages

No packages published