An easy and entertaining game powered by me for fun and practice purposes.
Try the app!
Table of Contents
The goal of the project is to deliver a fun game application for every dice passionate.
At its startup the application displays the title, current score and best score, dice to play with, a button to change the view from dice faces to simple arabic numbers, a button to roll dice and to start a new game, instructions.
Dice numbers are randomly picked using Math.random and the nanoid library in the generateNewDice function. Once a random number from 1 to 6 is picked, it is displayed if the State showNumbers is true (it changes via the changeDiceFace function called clicking the relevant button), otherwise a die face is showed with dots corresponding to that number, using conditional styling on the box-shadow property (you can find the conditional styling in ./src/components/dice/diceStyle.js).
Timer starts whether the user holds a die for the first time or presses the roll button (see holdDice and rollDice functions).
By clicking on a die, the user changes the isHeld prop of the Dice component, preventing it to roll when the roll button is clicked (as developed in the rollDice function).
Once every die is held and all dice have the same value, the user wins the game: setGameState will change the gameState.tenzies property to true, the Confetti library is activated and the Roll button displays New Game (see the useEffect function under the // setting winnign conditions comment line). Rolls count and timer are saved in the user local storage if this was the first game or if they are better than the previous ones.
JavaScript is basically all I used to bootstrap this project. I created the app using React: every html element is created with the jsx sintax; style is build with Sass and styled components.
Html5
Css3
Sass
JavaScript ES6
Webpack
React
This project was bootstrapped with Create React App.
I published this code at the link https://tenzies-egidiosalinaro.netlify.app/ so you can use it, but if you want you can also install it in your device using React:
You need to have Node and npm installed. You can check the version you have installed running:
- npm
npm -v
Once downloaded this repo, in the project directory, you can run:
npm startRuns the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
npm testLaunches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run buildBuilds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
At its startup the application displays game instructions. User can decide whether to play showing numbers or dice faces, using the relevant button.
- generate random numbers
- roll dice functions
- hold dice functions
- winning conditions
- rolls counter and timer
- saving scores to user local storage
- styles improvements
- coherent color palette
- organized Sass files
- styled component for conditional dice faces rendering
Distributed under the MIT License. See LICENSE for more information.