Welcome to the Dice Game! This is a simple React-based game where players roll the dice and interact with the game screen. The game utilizes React's useState for state management and props for data handling between components. The styling is done using Tailwind CSS to ensure a clean and responsive design.
- Starting Page - When you open the game, you'll see the starting screen with a "Start" button. Click the button to proceed to the game screen.
- Game Screen - Once you enter the game screen, you'll see the numbers and dice images displayed. This is where the game mechanics take place.
- Rolling the Dice - The game logic updates dynamically as the player interacts, changing the state using
useState. - Reset Scores- You can reset the scores at any time.
- View Rules- You can check the game rules for guidance.
-
React.js/Vite - Used to build the interactive UI.
-
Tailwind CSS - Used for styling to enhance the UI design.
Here are the five different images demonstrating the gameplay:
- Starting Page - Displays the "Start" button.
- Game Screen - Shows dice numbers and images.
- Rolling the Dice - Demonstrates state updates.
- Winning/Losing Scenarios - Showcases game results.
- Game End Screen - Displays final scores and restart options.
To run this project on your local machine, follow these steps:
- Clone the repository:
git clone https://github.com/mkhalidh/DiceGame
- Navigate to the project directory:
cd dice-game - Install dependencies:
npm install
- Start the development server:
npm start
- Open the browser and go to
http://localhost:5173to play the game.
Feel free to fork the repository and submit pull requests for any improvements or additional features!
This project is open-source and available under the MIT License.
Enjoy playing the Dice Game! 🎲




