Intro

The Dice Roll Game is an exercise in random number generation. The game itself is here: Dice Roll Game..

This is a simple game where we generate two random numbers between 1 and 6, and assign them each to a dice. One dice represents Player 1 and the other represents Player 2. The outcome of the the game can either be a tie, or a win by either Player 1 or Player 2. The one with the highest dice roll wins.

The HTML

On the HTML side of the app, we have some standard code for the game display and the complete HTML will be listed below. But the most important piece is how we actually display the results of the random number generation as a dice.

We're going to accomplish this with a series of image files, (dice1.png - dice2.png - dice3.png - dice4.png - dice5.png - dice6.png). And with the outcome of the random number generator we display the appropriate image file.

This is done by utilizing "string concatenation" in the JavaScript, which is a way to add strings together. So we can take the words "dice", and ",png" and add them to the random number we generate, like so:

• let diceRoll = "dice" + (randomNumber) + ".png"

But we're getting a little ahead of ourselves here. We need somewhere to display the image, now that we have defined the image path. So we set the following in our HTML Code:

• <div class="gameRow">
  • <div class="dice">
    • <p>Player 1 /p>
    • <img class="img1" src="">
  • </div>
  • <div class="dice">
    • <p>Player 2 /p>
    • <img class="img2" src="">
  • </div>
• </div>

Notice that the source for our dice image files is empty. Once we have obtained our dice value through the random number generator, and created the path name for the appropriate file, we just need to insert it into the HTML with the setAttribute property of the <img>.

We have set class names of img1 and img2 which we can use to identify where to put our newly created dice image with our JavaScript coding.

the JavaScript

On the JavaScript side of the app, the first thing we need to do is to set up the querySelector's for our dice and our "Roll the Dice" button:

• let btn = document.querySelector('.butt');
• let img1 = document.querySelector(".img1");
• let img2 = document.querySelector(".img2");

Next we need to get our random numbers and assign them to the dice. A refresher on how we generate random numbers can be found here. Here is our code for this app:

• let dice1 = Math.floor(Math.random() * 6) + 1;
• let dice2 = Math.floor(Math.random() * 6) + 1;
•  
• img1.setAttribute("src", "./images/dice" + dice1 + ".png");
• img2.setAttribute("src", "./images/dice" + dice2 + ".png");

So we're generating two random numbers to assign to our dice. Then we build a file path to the appropriate image file ("./images/dice" + dicex + ".png"), and assign this to be the source of the appropriate HTML image call.

So this allows us to take the results of a dice roll (random number), create a proper image file path, and assign it as the source for the appropriate HTML image call. This is really the "crux" of the game coding. The ability to display a dice image based on a random number generated by our JavaScript.

We then have to set up an eventListener to listen for the "Roll the Dice" button click, which runs the number generators and updates the dice, like so:

• btn.addEventListener('click', function() {
• });

One Final Note

I added some code to display random dice until you start playing the game. So up until you click the "Roll the Dice" button, you will get random dice displayed every 500ms.

This code will start the random dice:

• let interval = setInterval(function() {
  • roll();
• }, 500);

and this code, (which resides inside the button click event), will stop the continuous random dice display, for game play:

• clearInterval(interval);
• interval = null;

Final Code

• HTML
• <div class="container">
  • // set up or header win flags and display message
  • <h1>
    • <img class="imgL" src="">
    • <span class="head"></span>
    • <img class="imgR" src="">
  • </h1>
  • // button for dice roll
  • <div class="butt">Roll the Dice</div>
  • // display dice images
  • <div class="gameRow">
    • <div class="dice">
      • <p>Player 1</p>
      • <img class="img1" src="">
    • </div>
    • <div class="dice">
      • <p>Player 2</p>
      • <img class="img2" src="">
    • </div>
  • </div>
• </div

• JavaScript
• // assign variables to our HTML objects for manipulation
• let heading = document.querySelector('.head');
• let imgL = document.querySelector('.imgL');
• let imgR = document.querySelector('.imgR');
• let btn = document.querySelector('.butt');
• let img1 = document.querySelector(".img1");
• let img2 = document.querySelector(".img2");
•  
• // add event listener for "Roll the Dice" button
• btn.addEventListener('click', function() {
  • // stop random dice display after start of game
  • clearInterval(interval);
  • interval = null;
  •  
  • // assign random numbers to dice variables
  • // this also displays the appropriate dice image
  • let [dice1, dice2] = roll();
  •  
  • // check for win/loss/tie and display proper output
  • if (dice1 === dice2) {
    • heading.innerText = "It's a Tie Game";
    • imgL.setAttribute("src", "./images/victory1.png");
    • imgR.setAttribute("src", "./images/victory2.png");
  • } else if (dice1 > dice2) {
    • heading.innerText = "Player 1 Wins!";
    • imgL.setAttribute("src", "./images/victory1.png");
    • imgR.setAttribute("src", "");
  • } else {
    • .innerText = "Player 2 Wins!";
    • imgL.setAttribute("src", "");
    • imgR.setAttribute("src", "./images/victory2.png");
  • }
• });
•  
• // assign random numbers to dice and update HTML images source
• let roll = function() {
  • let dice1 = Math.floor(Math.random() * 6) + 1;
  • let dice2 = Math.floor(Math.random() * 6) + 1;
  •  
  • img1.setAttribute("src", "./images/dice" + dice1 + ".png");
  • img2.setAttribute("src", "./images/dice" + dice2 + ".png");
  •  
  • return [dice1, dice2];
• }
•  
• // set up initial display
• heading.innerText = "Random Dice Roll";
• imgL.setAttribute("src", "./images/victory1.png");
• imgR.setAttribute("src", "./images/victory2.png");
•  
• // random dice display before game start
• // displays new random dice every 500ms
• let interval = setInterval(function() {
  • roll();
• }, 500);