A fun, interactive dice guessing game where players predict dice roll sums and get instant feedback. Built as a single-page web application with React + Vite.
Dice Duel is a casual gaming experience that subtly teaches probability concepts through engaging gameplay. Players choose the number of dice (1-3), predict the sum, roll, and see if they guessed correctly. The game tracks wins and provides encouraging feedback to keep players engaged.
- Quick Setup: Choose 1-3 dice and enter your prediction
- Instant Feedback: Immediate win/loss results with encouraging messages
- Progressive Learning: Probability hints appear after playing several rounds
- Persistent Stats: Game statistics saved locally between sessions
- Mobile-First: Responsive design with large touch targets
- Visual Appeal: Emoji dice graphics with smooth animations
Run locally:
npm run devThen visit http://localhost:5173 (or the port shown in terminal)
- Choose Dice Count: Select 1, 2, or 3 dice
- Make Prediction: Enter your guess for the sum (valid range shown)
- Roll Dice: Click "Roll Dice!" and watch the animation
- See Results: Get instant feedback and updated stats
- Play Again: Continue to improve your win rate!
- Frontend: React 18 with Hooks (useState, useEffect)
- Build Tool: Vite for fast development and building
- Styling: Inline CSS with mobile-first responsive design
- Storage: localStorage for persistent game statistics
- Dependencies: Minimal - uses only React built-ins
DiceDuel/
├── public/
│ └── logo.png # Game logo
├── src/
│ ├── App.jsx # Main game component
│ └── main.jsx # React entry point
├── .github/
│ └── copilot-instructions.md # AI assistant guidance
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── PRD.md # Product Requirements Document
├── AGENTS.md # AI Development Process
└── README.md # This file
This project was built using AI-assisted development following a structured approach:
- PRD Creation: Defined clear requirements and scope
- Rapid Prototyping: Built MVP in phases (30-20-10 minute increments)
- Feature Implementation: Core game loop → Visual polish → Enhancements
- Testing & Refinement: Ensured mobile responsiveness and user experience
See AGENTS.md for detailed AI development methodology.
- Win: Exact prediction match
- Close: Within 1-2 points gets encouraging feedback
- Miss: Motivational message to try again
- Range indicators show possible sums for each dice count
- Hints appear after 3+ games explaining probability concepts
- Win rate tracking helps players see improvement over time
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/abhishek0412/DiceDuel.git
cd DiceDuel
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build- Dice selection buttons (1-3 dice)
- Number input for sum prediction with validation
- "Roll Dice" button with random generation
- Win/loss result display
- Basic score tracking (wins/total/percentage)
- Visual dice representation using emoji graphics
- Win celebration messages
- Game stats persistence (localStorage)
- Mobile-responsive layout
- Simple roll animation with bouncing dice
- Probability hints after several games
- Encouraging feedback system
- Immediate Gratification: No loading states or delays
- Clear Visual Hierarchy: Large buttons and obvious next actions
- Progressive Disclosure: Advanced features revealed through play
- Accessibility: High contrast, large touch targets, proper alt text
- Large touch targets (minimum 60px height)
- Responsive flexbox layouts
- Touch-friendly interactions
- Optimized for portrait and landscape orientations
- Sound effects and haptic feedback
- Multiplayer challenges
- Advanced statistics and charts
- Customizable themes
- Social sharing features
- Achievement system
MIT License - feel free to use this project as a learning resource or starting point for your own games!