Dice Roller is an easy project that every beginner should try. This will help a beginner to understand the random method, math function, ‘if’ statement. If you are learning JavaScript then you should definitely try this project. In this project, we are going to use HTML, CSS, Js. Here, we are going to cover the step-by-step process with the source code.
Step 1: Design the Layout using HTML
At first, you have to design the layout using HTML and CSS. You can try this without using CSS because it is used for designing. I want to keep this layout simple. That is why I am using Only 3 things in this project, which are:
- A paragraph tag for showing numbers
- An image tag for showing different dice
- A button for Dice rolling
Here is the HTML code that I am using:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Roll the Dice</title> </head> <body> <p id="demo"></p> <img id="myImg" src="" width="30%" height="auto"></br> <button onclick="clickevent()">Roll it Bayybeeee!</button> </body> </html>
Inside the body tag, we have a paragraph tag and the id of that tag is ‘demo’. we are going to show the result in numbers using this paragraph tag. The next thing we have is an image tag where we are going to show different images according to the results. In the end, we are using a button to roll the dice.
Step 2: Collect or create images
You can collect different dice position pictures from stock images, icon websites. Flaticons, Vecteezy, Free icons, and many other websites provide free to use images or icons. I collected mine from Flatirons. You can create them by yourself only using illustrator or even MS Paint is also a great option.
You need 7 images which are, 1 for the dice icon (cube view), 6 different output images. Name them according to their position or value. Here is an example image for better understand.
Step 3: Write the JavaScript
JavaScript is going to give the layout functionality. This will help to show different numbers, images for every button click. Before start coding, we have to understand the algorithm. Here are the steps we are going to follow,
- Generate a random number
- Store that random number in a variable
- Crete if statement for every possible result and show image according to that number
Here is the JavaScript code for dice roller:
<script> var para; var rannum; function clickevent(){ rannum = Math.floor(Math.random() * 6) + 1; para = document.getElementById("demo"); para.innerHTML = rannum; if(rannum==1){ document.getElementById("myImg").src = "dice 1.svg"; } if(rannum==2){ document.getElementById("myImg").src = "dice 2.svg"; } if(rannum==3){ document.getElementById("myImg").src = "dice 3.svg"; } if(rannum==4){ document.getElementById("myImg").src = "dice 4.svg"; } if(rannum==5){ document.getElementById("myImg").src = "dice 5.svg"; } if(rannum==6){ document.getElementById("myImg").src = "dice 6.svg"; } } </script>
Explanation of the code: At first, we declare two variables which are ‘para’ and ‘rannum’. After that, we start working on ‘clickevent()’ function. Look at the HTML code for the button where we set an onclick. So, it means when a user clicks on that button something is going to happen and this ‘clickevent()’ is going to handle that. In the next step, we are generating a random number from 1-6 and storing that number inside the ‘rannum’ variable. Here we are using floor because we need numbers like 1,5,6 but not like 1.555, 5.661, 6.556. In JavaScript using ‘Math.random()’ we can easily generate random numbers.
Then we have to connect the paragraph tag where we are going to show the different numbers that are generated. ‘para = document.getElementById("demo");’ it means anything we store inside ‘para’ variable is going to display using the paragraph tag with ‘demo’ id. But for this, we have to use innerHTML. Actually, ‘para.innerHTML = rannum;’ this line is going to display the generated random number using the paragraph tag.
By using the ‘if’ statement we are going to display different dice for different values. Suppose, the value of rannum is 5 so it means the expression ‘rannum == 5’ is true. When an expression of an ‘if’ statement is true then it does something. Here we are going to change the image using this formula. Using ‘document.getElementById("myImg").src = " ";’ we are going to show different image for different value of ‘rannum’. Using a Live server, you can test this thing.
Full code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Roll The Dice</title> </head> <body> <p id="demo"></p> <img id="myImg" src="" width="30%" height="auto"></br> <button onclick="clickevent()">Roll it Bayybeeee!</button> <script> var para; var rannum; function clickevent(){ rannum = Math.floor(Math.random() * 6) + 1; para = document.getElementById("demo"); para.innerHTML = rannum; if(rannum==1){ document.getElementById("myImg").src = "dice 1.svg"; } if(rannum==2){ document.getElementById("myImg").src = "dice 2.svg"; } if(rannum==3){ document.getElementById("myImg").src = "dice 3.svg"; } if(rannum==4){ document.getElementById("myImg").src = "dice 4.svg"; } if(rannum==5){ document.getElementById("myImg").src = "dice 5.svg"; } if(rannum==6){ document.getElementById("myImg").src = "dice 6.svg"; } } </script> </body> </html>
Practice this project and understand all the things. You can
use lotte animation, video, keyframe to make this project more beautiful and
realistic. Using this technique, you can make a number guessing game. Comment
below for this project related solutions.
Get this project on Github.