Skip to content

"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. ๐ŸŽฒ

License

Notifications You must be signed in to change notification settings

HassaniDev/Dice-Game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

5 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

About

"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. ๐ŸŽฒ

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published