2022-01-03

This simple Dice game allows two playes to keep rolling the dice until a player gets a total of 20 points and is declared the winner.

#CodeSteps

1. Create variables for the game state
2. Create variables to store references to the necessary DOM nodes
3. Hook up a click event listener to the Roll Dice Button. Log out a random number between 1 and 6.

   Hint: use Math.floor() and Math.random()

4. Find out which players turn it is
5. log out the value e.g. "Player 1 rolled 5"
6. Switch the turn back to the other player
7. Display the dice number instead of logging it out
8. Use the 'active' class to show which player's turn it is

   Hint: use the .classList.remove() and classlist.add() methods*

9. Update the "message" DOM node so that it states who's turn it is
10. Update the scores for each player
11. Display the scores in their scoreboards
12. Check if a player has won. If so, change the message to "Player X has won!"
13. Hide the Roll Dice Button and show the Reset Button. Hint: use display none/block
14. Hook a click event listener up with the Reset Button
15. Create a reset() function that resets the game
16. Invoke the reset() function when the Reset Button is clicked

For more check :

• Math method
• ClassList method

- HTML
- CSS
- JavaScript

IDE

Per Harald Borgen

• Change dice rolled to show image of dice not number
• Make the game fair "each player must have equal roll, and the closer to 20 wins"