See the Pen LYpeNVG by zoneboy (@zoneboy) on CodePen.
JavaScript is part of the tools used in front-end development. JavaScript is a very powerful language that can be used to create many things, and you wonder how that is possible.
HTML, CSS, and JavaScript will be used to create a dice game that you can play for fun. I believe this will further increase your interest in front-end development.
The Covid19 pandemic is taking its toll on the world, and everything is on lockdown. This is the perfect time to create your first JavaScript dice game and play with your friends.
Requirements
- A computer
- A code editor preferably Sublime text
- A web browser to visualize your code
JavaScript dice game tutorial
We need to first create the HTML code, which is the framework of anything we want to build. There is a container div that houses all the other HTML code. This is a form of wrapper. The next thing is to create the dice divs. This is where the rolled numbers will be displayed.
We need to create a button that will trigger the dice to be rolled. The button tag caters for this. There is also an h2 tag that will display the result of the number rolled.
You can see the visual representation of the HTML code we just wrote. It is not looking good, so let’s beautify it with CSS.
Adding CSS to the JavaScript dice game
We added a series of CSS properties and values to the HTML classes and ids to make the dice game more appealing to the end-user.
The container housing all the elements were given a display value of flex and its content given a value of space-around. This is to ensure the space is evenly distributed between the dice sides and the roll dice button.
The main tag was also turned to flex and aligned in the center of the container.
The h2 tag that will display the result also got some properties to enhance it. The text is aligned center, and positional properties such as top, left, and transform were attached to it.
The next thing we look at is how the dice sides look. The background color of Cyan was added, and a border, padding, and margin were added too. The roll dice button got its adjustment too.You can see how the code is rendered in the web browser now. It is now looking good.
When you click the button, you will notice nothing happens. This is because JavaScript has not been added. Let’s add functionality to the code.
Adding JavaScript to the dice game
The JavaScript part is the most interesting. It is the engine room of the game.
We created a DOMContentLoaded event listener for the window and put all our functions inside it. This fires all the functions when the initial HTML document has been completely loaded and parsed. It doesn’t wait for the CSS stylesheets to load.
The first variable was declared using the const keyword inside the DOMContentLoaded event listener.
We went ahead to create the dice function. Several variables were declared inside the dice function.
- const firstSide = document.getElementById(‘side1’); – This selects the side1 div in the html page.
- const secondSide = document.getElementById(‘side2’); – This selects the side2 div in the html page.
- const result = document.getElementById(‘result’); – This selects the result div in the html page.
The next thing is selecting the numbers that will be generated on each of the dice sides. We use the Math.random function. The Math.random function returns a floating-point number in the range of 0 to less than 1. Since the rolled number ranges from 0 to 6, we then multiply it by 6 and add 1 to it. This means we will have a floating number in the range of 0 to 6. This floating number needs to be rounded up, and that is why Math.floor function was employed. Math.floor is used to wrap the Math.random function. This rounds the floating number downward to the nearest integer. This means 6.5 will be rendered as 6.
The next thing is to declare a total variable. It adds the result of side 1 and side 2.
The contents side1 and side2 were then set to the variables firstSide and secondSide. These were made possible with the use of innerHTML.
We then set the return div to display the rolled number total and some texts.
There may be a situation where the user got a similar number on both sides. This is why we used the if statement. If the result in side1 is strictly equal to that if side2, then the user got a freeroll.
That wraps up the dice function.
The next thing is telling the code what to do and how to act.
button.addEventListener(‘click’, dice); tells the Roll dice button to run the dice function whenever it is clicked.
That ends the code, and you can see that our JavaScript dice game is functional.
You can check the code out on Codepen
