/Dice-Game

"Dice Game" A fun and interactive dice game built using JavaScript, HTML, and CSS. Players roll the dice, collect points, and race to reach the target score. But beware, rolling a 1 resets your current round score! This project demonstrates core JavaScript concepts like DOM manipulation, event handling, and game logic. 🎲

Primary LanguageJavaScriptMIT LicenseMIT

Dice Game 🎲

A simple two-player dice game built with vanilla JavaScript. Players take turns rolling a dice to accumulate points, but rolling a 1 resets their current score. The first player to reach 100 points wins.

This project demonstrates core JavaScript concepts like DOM manipulation, event handling, and game logic.

📝 Features

  • 🎲 Two-player game: Players take turns to roll a dice and accumulate points.
  • ❌ Rolling a 1 resets the current score: Rolling a 1 will reset the player’s round score, and the turn is passed to the next player.
  • 🏆 Winning condition: The first player to reach 100 points wins the game.
  • 🖱️ Interactive buttons: Includes buttons for rolling the dice, holding the score, and resetting the game.
  • 💻 Vanilla JavaScript: Built with modern JavaScript using DOM manipulation and event handling.

🚀 How to Play

  1. Roll the dice: Click on the "Roll Dice" button to roll the dice. The result is added to your current score unless you roll a 1.
  2. Hold your score: Click "Hold" to save your current score to your total score. It’s then the next player's turn.
  3. Watch out for the 1!: If you roll a 1, your current score is reset, and your turn ends.
  4. Win the game: Be the first player to reach 100 points to win!

💻 Technologies Used

  • HTML
  • CSS
  • JavaScript (Vanilla JS)

🏗️ MVC Architecture

This project is structured using the MVC (Model-View-Controller) architecture, which helps in organizing the code and separating concerns.

  • Model: Represents the data and the business logic of the application.
  • View: Handles the presentation layer, displaying the user interface.
  • Controller: Manages user input and interacts with both the Model and View to update the UI accordingly.

🎮 Demo

You can play the game live here

📂 Installation

  1. Clone the repository:

    git clone https://github.com/HassaniDev/Dice-Game.git

  2. Navigate to the project folder

    cd dice-game

  3. Open the index.html file with a live server (e.g., using the Live Server extension in VS Code) to start playing, or just Open the index.html file in your browser to start playing.

🔇 Sound Control

If you prefer to play the game without sound, please feel free to mute your browser tab or computer. The button click sound is included to enhance the experience, but your enjoyment is what matters most! 🎮

🔧 Future Improvements

  • ⚙️ Add more game settings (e.g., changing the target score).
  • 🎮 Implement single-player mode.
  • 📱 Improve mobile responsiveness.
  • 🎵 Add background soft music to enhance focus, with an option for the player to disable or mute the music.
  • 🌑 Dark Theme: Currently, the game only supports a light theme. A dark theme option will be implemented in future updates for better user customization.

⚠️ Important Note

This game uses fonts from Google Fonts, which require an active internet 🌐 connection. Please ensure that your Wi-Fi 🛜 or internet 🌐 connection is turned on for the fonts to load correctly and for the best experience.

🏅 Credits

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.