Skip to content

mkhalidh/Dice_Game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dice Game

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.

How to Play

  1. 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.
  2. 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.
  3. Rolling the Dice - The game logic updates dynamically as the player interacts, changing the state using useState.
  4. Reset Scores- You can reset the scores at any time.
  5. View Rules- You can check the game rules for guidance.

Technologies Used

  • React.js/Vite - Used to build the interactive UI.

  • Tailwind CSS - Used for styling to enhance the UI design.

Screenshots

Here are the five different images demonstrating the gameplay:

  1. Starting Page - Displays the "Start" button.
  2. Game Screen - Shows dice numbers and images.
  3. Rolling the Dice - Demonstrates state updates.
  4. Winning/Losing Scenarios - Showcases game results.
  5. Game End Screen - Displays final scores and restart options.

Installation & Running the Project

To run this project on your local machine, follow these steps:

  1. Clone the repository:
    git clone https://github.com/mkhalidh/DiceGame
  2. Navigate to the project directory:
    cd dice-game
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm start
  5. Open the browser and go to http://localhost:5173 to play the game.

Contributions

Feel free to fork the repository and submit pull requests for any improvements or additional features!

License

This project is open-source and available under the MIT License.


Enjoy playing the Dice Game! 🎲

Screenshot

First Page Second Page ShowRules Select Number GotScored

About

Dice Game 🎲: A fun and interactive dice game built with React and Tailwind CSS. Roll the dice, track scores, and follow the game rules. Features dynamic state management with `useState` and seamless UI styling. Play, reset, and enjoy! 🚀

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors