The game of Yahtzee, written with React, React Hooks, SCSS and some OOP Javascript. This work is based on a project in the Modern React Bootcamp course on Udemy.com. I chose to use React Hooks for state management where possible.
Yahtzee is a chance-and-strategy dice rolling game. A game is played over 13 rounds.
Each round, the player rolls five 6-sided dice. They may click on any number of dice to “freeze” or “unfreeze” them (frozen dice are displayed in a different color). They may re-roll the unfrozen dice up to 2 times.
Each round, they must assign their dice to any unclaimed scoring category. Each category scores differently.
After 13 rounds, the game is over, and the player’s score is the total of each scoring category.
If you are unfamiliar with the rules of Yahtzee.
Category | Description | Example Score |
---|---|---|
Ones | Score 1 for every 1 | 1 1 2 3 4 = 2 |
Twos | Score 2 for every 2 | 1 2 2 3 4 = 4 |
Threes | Score 3 for every 3 | 1 2 3 3 3 = 9 |
Fours | Score 4 for every 4 | 1 2 4 4 5 = 8 |
Fives | Score 5 for every 5 | 1 2 5 5 5 = 15 |
Sixes | Score 6 for every 6 | 1 2 3 6 6 = 12 |
3 of Kind | If 3+ of one value, score sum of all dice (otherwise, score 0) | 1 2 3 3 3 = 12 |
4 of Kind | If 4+ of one value, score sum of all dice (else 0) | 1 2 2 2 2 = 8 |
Full House | If 3 of one value and 2 of another, score 25 (else 0) | 2 2 3 3 3 = 25 |
Small Straight | If 4+ values in a row, score 30 (else 0) | 1 2 3 4 6 = 30 |
Large Straight | If 5 values in a row, score 40 (else 0) | 1 2 3 4 5 = 40 |
Yahtzee | If all values match, score 50 (else 0) | 2 2 2 2 2 = 50 |
Chance | Score sum of all dice | 1 2 3 4 6 = 16 |
Deploy to Github Pages so it can be played online. https://shaynemeyer.github.io/react-yahtzee/- Add gameover and a way to start a new game.
- Highscores - persist scores to localStorage so that the user can save their highscores.
- Refactor Rules.js to not use JavaScript classes.
- Use websockets to allow you to play the game with a friend.
- Make more mobile friendly.