RedLight Start Game 🏎️

A web-based reaction time game built with React, TypeScript, and Vite that simulates the thrilling experience of an F1 racing start. Test your reflexes by hitting the accelerator as soon as the red lights go out!

About the Game

RedLight Start is inspired by the Formula 1 starting procedure. In an F1 race, drivers must wait for five red lights to go out before they can start - react too early and you get a penalty, react too late and you lose positions. This game recreates that pressure-filled moment and measures your reaction time down to the millisecond.

How to Play

1. Click the "START" button to begin the game
2. Watch the video sequence of lights
3. When the lights go out, tap the accelerator button as quickly as possible
4. Your reaction time will be displayed in seconds
5. Share your score with friends or try again to beat your best time

Features

• Realistic F1-inspired gameplay
• Precise reaction time measurement
• Score sharing functionality via social media
• Downloadable score cards for sharing
• Responsive design for both desktop and mobile devices
• Integrated with a larger F1 Japanese GP experience

Technologies Used

• React 18
• TypeScript
• Vite
• Material UI
• HTML5 Video
• html2canvas for score sharing

Installation

Clone this repository

git clone https://github.com/amanmaurya7/Redlight-Start-Game.git
cd redlight-start-game

Install dependencies

npm install

Start the development server

npm run dev

Open your browser and navigate to http://localhost:5173

Building for Production

To create a production build:

npm run build

This will generate optimized files in the dist directory that you can deploy to your hosting service.

Sharing Your Results

After completing a game, you can:

• Click the "SNSでシェアする" (Share on SNS) button
• Choose to share directly to social media or download your score card
• The game will automatically generate a shareable image with your score
• When sharing, a predefined message with hashtags will be copied to your clipboard

Browser Compatibility

This game works best on modern browsers that support HTML5 video and the Web Share API. For the best experience, use Chrome, Firefox, Safari, or Edge.

Accessibility

The game uses both visual and timing cues to provide an accessible experience. Future updates may include additional accessibility features.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by Formula 1 racing
• Special thanks to the F1 Japanese GP for project inspiration