Tenzies React Game

A game of Tenzies

The start of the game of Tenzies

A react web game of Tenzies. Users can roll new dice and freeze them to get ten die of the same value.

A tenzies game in progress

Using React, I created a die component, which returns the JSX of the Die. In the Die component, I used a random math function to return a random number 1-6 to represent a roll of a die. The user is able to freeze selected dice using a function that checks the id of each die. If the id matches the id of the die the user clicked, the die would now be frozen. Using a ternary operator in the roll function, it will check if the die is held or not, thus allowing the function to roll all the die that are not currently held.

The winning screen after successfully completing the tenzies game

When all dice are held, a function will determine whether all dice values are the same or not. If they are, the user has won the game which triggers a stats display and confetti to rain down. Using localStorage, the user's best time is logged. To accomplish this, I created a timer when the roll button is clicked. When the user finishes the game, a function checks to see if the user's time is better than the time stored in localStorage. If it is, it pushes the new time, otherwise the time in localStorage will prevail as the best time.

The deployment can be found on GitHub Pages. Check out the source code here.