Hi!

This time I really wanted to try creating simple game of rolling the dices. There won't be much of a purpose to this, because I just wanted to create rolling logic. Maybe later I will add more functionalities to this game.

Plan

My plan is to create an array of images. Then when user clicks a button, images with random order will be generated on the screen.

HTML

As for HTML I will not need much. A div as a container for images, button and p tag for displaying sum of rolled dices.

<div class="dice-container" id="dices"></div>

<button class="genbtn" onclick="displayRandomDices()">Roll</button>
<p class="clicks" id="sumofnumbers"></p>

JS

Okay so I created 6 dice images and uploaded it all to images folder. My dices are named dice1.png - dice6.png

To store my images inside an array I will need to create an Array of objects. Then create new Image object and save it as src attribute.

Here I used variable in src path for the loop to assign all elements to my array.

var diceimages = new Array()

function getDices(){
  for(let i=0; i <6; i++){
    diceimages[i] = new Image()
    diceimages[i].src = 'images/dice' + (i+1) + '.png';
  }
}

Next I will need a function to generate random numbers from 1-6 (from 0 to 5 more precisely, because my array starts with 0)

function generateRandomNumber(){
  return random = Math.floor(Math.random() * 6)
}

Finally we can display our images in random order. In the same place for now I will calculate the sum.

First we generate the number and add it to our sum. Next we create new empty img node that we can later assign src attribute from our array. And lastly we append new img tag inside our container.

Outside our loop for displaying we show the sum to the user, and reset it for next roll.

var diceContainer = document.getElementById('dices')  
var displaySum = document.getElementById('sumofnumbers')
var sum = 0;

function displayRandomDices(){    
  for(let i=0; i <6; i++){  
    let random = generateRandomNumber() //generate radom nr
    sum += (random + 1) // save the sum of numbers

    let imgnode = document.createElement('img')
    imgnode.src = diceimages[random].src
    diceContainer.appendChild(imgnode)
  }
  displaySum.innerHTML = "You rolled " + sum + " !"
  sum = 0
}

Fixing bug

As you can probably see there is one thing that I forgot about. If we roll again we will receive a new set of 6 dices but previous set will be still visible.

To fix this we need to remove all elements inside our dice container before we display a new set.

function clearDisplay(){
  while (diceContainer.firstChild) 
    diceContainer.firstChild.remove()
}

And we add our new function to our main code.

function displayRandomDices(){    
  clearDisplay()
  for(let i=0; i <6; i++){  
    let random = generateRandomNumber() //generate radom nr
    sum += (random + 1) // save the sum of numbers

    let imgnode = document.createElement('img')
    imgnode.src = diceimages[random].src
    diceContainer.appendChild(imgnode)
  }
  displaySum.innerHTML = "You rolled " + sum + " !"
  sum = 0
}

Now before every display our elements will be removed and new ones will have space to generate.

CSS

I also added simple css for my mini game to look better.

.dice-container{
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-left: 50px;
}
.dice-container img{
  width: 100px;
  height: 100px;
  margin: 10px;
}
.genbtn{
  margin-top: 20px;
  margin-left: 60px;
  border-radius: 5px;
  border: none;
  padding: 10px 40px;
  font-family: Roboto;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  background-color: #313131;
  box-shadow: 4px 4px 5px 0px rgba(66, 68, 90, 1);
}
.clicks{
  margin-left: 60px;
  font-family: Roboto;
  font-weight: 900;
  font-size: 1.5rem;
}

Final game will look like this.

You can also take a look and play here :) => click

If you find any mistakes or you have ideas how to refactor my solutions to be simplier/ better please let me know :)