Jackpot is a modern and interactive slot machine that recreates the authentic casino experience directly in your browser. Developed with the latest web technologies, it offers a smooth gaming experience, spectacular animations, and an advanced scoring system.
Main game interface |
Help popup with combinations |
- 3 animated reels with realistic spinning effects
- 13 unique symbols: 7, fruits, cards, diamonds, clovers, ...
- Multiple combinations: triples, thematic mixes, special symbols
- 100 spins per game with bonus system
- Animated notifications for wins (+100, +500, +2500...)
- Persistent high score between sessions
- Dynamic calculation of points based on combinations
- Multicolored confetti on wins
- Grandiose JACKPOT animation for triple 777
- Shine effects and pulsations on UI elements
- Custom scrollbar with theme colors
- Responsive design adapted to all screens
- Interactive help popup with all combinations
- Reset button to restart a game
- Elegant dark theme with gold and red accents
- Modular architecture with custom hooks and separated components
- TypeScript for type safety
- React optimizations (useCallback, useEffect, refs)
| Combination | Symbols | Points | Description |
|---|---|---|---|
| 🎯 JACKPOT | 7️⃣-7️⃣-7️⃣ | 2500 | Triple seven - Special animation! |
| 💎 Premium Mix | 7️⃣-💲-📊 | 1000 | Premium mix or triple |
| 🍎 Fruit Mix | 🍎-🍒-🍉 | 500 | Fruit mix or triple |
| 🍋 Citrus Mix | 🍋-🍊-🍌 | 100 | Citrus mix or triple |
| 💎 Diamonds | 💎 x1/2/3 | 50/100/150 | Points per diamond |
| 🍀 Clover Bonus | 🍀 x1/2/3 | +1/2/3 spins | Bonus spins! |
- Node.js 18.0+
- npm or yarn
# Clone the project
git clone https://github.com/xen0r-star/Jackpot.git
cd Jackpot
# Install dependencies
npm install
# Run in development
npm run dev
# Build for production
npm run builddnpm run dev # Development server (Vite)
npm run build # Production build
npm run preview # Preview build
npm run lint # ESLint lintersrc/
├── 📁 components/ # React components
│ ├── HelpPopup.tsx # Help popup
│ ├── ScoreDisplay.tsx # Score display and controls
│ ├── SlotMachine.tsx # Main slot machine
│ └── ScoreNotifications.tsx # Win notifications
├── 📁 hooks/ # Custom hooks
│ ├── useGameState.ts # Global game state
│ └── useWindowDimensions.ts # Window dimensions
├── 📁 utils/ # Utilities and logic
│ └── gameLogic.ts # Win calculations
├── 📁 constants/ # Configuration
│ └── index.ts # Symbols, combos, config
├── 📁 types/ # TypeScript types
├── 📁 styles/ # CSS styles
└── 📁 assets/ # Images and resources
and resources
- ⚛️ React 18 - Hooks, functional components
- 📘 TypeScript - Static typing and safety
- ⚡ Vite - Ultra-fast build tool
- 🎨 Tailwind CSS - Utility-first CSS framework
- 🎊 react-confetti - Confetti animations
- 🎯 ESLint - Linting and code quality
- 🎰 Click SPIN to launch the reels
- 👀 Observe the symbols that stop
- 🎉 Win points with the right combinations
- 🍀 Get bonus spins with clovers
- 🏆 Aim for JACKPOT with triple 777!
Contributions are welcome! To contribute:
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add: Amazing Feature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Use GitHub Issues with the appropriate template.
- 🔊 Sound effects and ambient music
- 💾 Local saving of statistics
- 🏅 Achievement system
- 📱 Installable PWA version
- 🌐 Multiplayer and online leaderboards
- 🎨 Multiple themes (casino, retro, futuristic)
This project is licensed under the MIT License. See the LICENSE file for more details.
- 🐙 GitHub: @xen0r-star
- 🖼️ Symbol images: Freepik
If you like this project, don't hesitate to give it a star ⭐