This is classic American dice game played on the streets of New York City. The rules are simple, Roll 4 5 6 you win , 1 2 3 you lose and you must roll either 2 die the same and one different XXY. YYX, or all the same XXX, YYY to have a valid roll, then scores are determined by who rolls the biggest number.
- Options
- Styling
- I styled the game in the 1980s 2-bit gaming fashion and tried to give a genuine 80s arcade game feel.
- I found the 2-bit font ("2-Player" in google fonts) first and that slowly inspired the rest of the project. things kind of fell into place.
- The color way is supposed to invoke snakes and the like to give the game a street/ unfair look, like you playing dice with a snake.
- Gradient
- Cool Function I. Roll/Kompare Fucntion
- This function is essentially my whole project, you delete everyhting and leave this and I would be happy. This funtion "spin"/changes the die faces ,generates the random integers and compares the values.
- Snake Eyes
- Depending on what the user rolls he or she will get a different dispaly at the top, the most common being "Snake Eyes"
*The testing was difficult. I had a lot of bugs in my javascript I couldnt figure out. Actually I spent about five days on a problem with the "Roll" fucntion I created.
- Already this fucntion is a difficult to explain in words but makes sense in my head, in the beginning the dice would "roll" once and then not work again even though my fucntion worked well in the cosnole ( random number between 1-6 were generated but the image/dice face wouldnt change) so first I went to google , I thought something like this would was common place but I was wrong....kinda. I couldnt find the solution online so I wnet the tutors and they couldnt figure it out. I was not happy to say the least so I decided to rewrite my JS and just by placing certain variables at the top and elminatining CONST on things that are actualy going change it all wokred out but really was quite the headache.
-
No errors were returned when passing through the official CSS W3 validator
-
No errors were returned when passing through the official HTML W3 validator
- All bugs have been fixed. I had a problem with an icon but a quick google search cleared it up.
- Problem & Solution
- The site was deployed using Github pages.
- All the directions given in the course video were followed.
- The site is linked here https://bibi78.github.io/DiceGame/
- The font came from Google Fonts .
- The changing die face img idea came from YouTube
- The Gradient idea came from YouTube as well.
- The layout CSS I got the inspiration from the STREET FIGHTER game and page like THIS & THIS
- All images came from Google.