QuickCricket is a high-octane, fast-paced cricket reaction game built with Next.js and React, heavily inspired by the addictive simplicity of the Google Doodle Cricket game. It features a fully immersive 3D stadium experience, dynamic AI-powered commentary, and a high-stakes running phase.
- Advanced 3D Perspective Rendering: A custom-built 3D engine using the HTML5 Canvas API that simulates a realistic cricket pitch, stadium stands, and dynamic lighting.
- Dynamic AI Commentary: Integrated with Genkit and Gemini 1.5 Flash to provide real-time, context-aware commentary and crowd reactions based on your performance.
- Procedural Characters: Playful "Google Doodle" style characters for the Batsman, Bowler, and Fielders, complete with dynamic animations.
- High-Stakes Running Sub-game: A manual and automated running phase where you must sprint between wickets while dodging the fielder's throw.
- Immersive Soundscape: Dynamic audio effects and crowd noise powered by Tone.js.
- Global Leaderboard: Local storage-based leaderboard to track your high scores and stats (Runs, Wickets, Strike Rate).
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS with a modern "Comic-Book" aesthetic.
- UI Components: Shadcn UI (Radix UI)
- Generative AI: Genkit with Google AI plugin (Gemini 1.5 Flash)
- Audio: Tone.js for procedural sound generation.
- Date Handling: date-fns
- Enter Your Name: Sign in to the stadium's roster.
- Time Your Shot: Press the Spacebar or Click the field when the ball enters the white "Hit Zone" crease.
- Run for Your Life: If you hit an infield shot, tap the RUN! button to score. But be careful—if the fielder returns the ball while you're outside the crease, you're RUN OUT!
- Aim for the Top: Score as many runs as possible before you lose 3 wickets.
- Clone the repository.
- Install dependencies:
npm install. - Set up your
.envfile with yourGOOGLE_GENAI_API_KEY. - Run the development server:
npm run dev. - Open http://localhost:9002 in your browser.
Enjoy the match and aim for a Century!