I have created a dice game that is designed to be fun for the user. It uses 6 sided dice, 10 sided dice and 20 sided dice. The aim is to get the highest dice roll and be the first to win 10 times and beat the computer.

My layout is simple, all the player needs to do is select a die and press the roll button. Once the game is over just press restart to try again.

I decided to make a dice game because I am an avid D&D player and love rolling dice!

I used HTML, css and Javascript to create this game. I used these technologies because my game is designed to run on web browsers on many devices and the vast majority of web browsers have integrated HTML, css and javascript.

One major bug I faced (image below) was a space created by a line that would not allow me to display divs side-by-side. I tried displaying the divs using inline-flex which worked with every other div wrapper but would not work with the all-rolls-wrapper. Unfortunately the only way I found to fix this was by nesting the all-rolls-wrapper in another div. I will work to fix this using the correct css in future updates.

I tested the game myself, hundreds of times over the course of it's creation and also had a group of 10 people test the game repeatedly. No serious issues were reported throughout all of my and the groups testing.

I ran the site through W3C HTML and css validators and both reported no errors as seen below.

I also ran the site using Lighthouse and had no problems. The results can be seen below.

I used JSHint for my javascript code which did not report any significant errors.

i have tested my game on desktop, tablet and mobile devices and found no issues and images can be seen below. All media queries are working correctly.

The website was published and hosted from Github, using Github pages on 01/04/2022.

The user is first taken to the start menu where they can select what die they want to use.

The D6 game allows the user to play the game using a 6 sided dice.

The d10 game allows the user to play the game using a 10 sided dice.

The D20 game allows the user to play the game using a 20 sides dice.

If the user wins the game a message is displayed stating that they won the game and all dice rolls are shown for that set of rolls.

If the user loses the game a message is displayed stating that they lost the game and all dice rolls are shown for that set of rolls

I would like to include another game with a board for players to move around as the dice rolls. Fix bug mentioned above.

d10 and d20 images were taken from Game-icons.net

Link: https://game-icons.net/

D6 images were taken from code league

Link: https://www.youtube.com/watch?v=B17NC5DD-dA