We know now how to toss a coin using JavaScript, so why not to try a roll the dice too?
Try to roll two sixes!
Demo:
To create the Dice game follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
- Add JavaScript
Step1.
Add HTML
Create the Game container and another one for dice, and dots:
<div class="game">
<div class="container">
<div id='dice1' class="dice dice-one">
<div id="dice-one-side-one" class='side one'>
<div class="dot one-1"></div>
</div>
<div id="dice-one-side-two" class='side two'>
<div class="dot two-1"></div>
<div class="dot two-2"></div>
</div>
<div id="dice-one-side-three" class='side three'>
<div class="dot three-1"></div>
<div class="dot three-2"></div>
<div class="dot three-3"></div>
</div>
<div id="dice-one-side-four" class='side four'>
<div class="dot four-1"></div>
<div class="dot four-2"></div>
<div class="dot four-3"></div>
<div class="dot four-4"></div>
</div>
<div id="dice-one-side-five" class='side five'>
<div class="dot five-1"></div>
<div class="dot five-2"></div>
<div class="dot five-3"></div>
<div class="dot five-4"></div>
<div class="dot five-5"></div>
</div>
<div id="dice-one-side-six" class='side six'>
<div class="dot six-1"></div>
<div class="dot six-2"></div>
<div class="dot six-3"></div>
<div class="dot six-4"></div>
<div class="dot six-5"></div>
<div class="dot six-6"></div>
</div>
</div>
</div>
<div class="container">
<div id='dice2' class="dice dice-two">
<div id="dice-two-side-one" class='side one'>
<div class="dot one-1"></div>
</div>
<div id="dice-two-side-two" class='side two'>
<div class="dot two-1"></div>
<div class="dot two-2"></div>
</div>
<div id="dice-two-side-three" class='side three'>
<div class="dot three-1"></div>
<div class="dot three-2"></div>
<div class="dot three-3"></div>
</div>
<div id="dice-two-side-four" class='side four'>
<div class="dot four-1"></div>
<div class="dot four-2"></div>
<div class="dot four-3"></div>
<div class="dot four-4"></div>
</div>
<div id="dice-two-side-five" class='side five'>
<div class="dot five-1"></div>
<div class="dot five-2"></div>
<div class="dot five-3"></div>
<div class="dot five-4"></div>
<div class="dot five-5"></div>
</div>
<div id="dice-two-side-six" class='side six'>
<div class="dot six-1"></div>
<div class="dot six-2"></div>
<div class="dot six-3"></div>
<div class="dot six-4"></div>
<div class="dot six-5"></div>
<div class="dot six-6"></div>
</div>
</div>
</div>
<div id='roll' class='roll-button'><button>Roll dice!</button></div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #70c1b3;
}
.game {
position: relative;
width: auto;
height: 100%;
}
.container {
position: relative;
display: inline-block;
top: 200px;
}Style the button:
button {
position: relative;
top:80px;
padding: 15px 50px;
color: #fff;
background-color: #f4d35e;
border: none;
font-size: 20px;
border-radius: 20px;
box-shadow: 1px 3px #50514F;
outline: none;
transition: .3s;
}
button:hover, button:active {
outline: none;
background: #50514F;
cursor: pointer;
transform: translateY(15px);
}Add dice and dots:
.dice {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: transform 1s; }
.dot {
position: absolute;
width: 20px;
height: 20px;
margin: -10px 5px 5px -10px;
border-radius: 20px;
background-color: #ef233c;
box-shadow: inset 2px 2px #d90429;}
.dice-one {
left: 450px; }
.dice-two {
left: 300px;
top:-200px;
}
.side {
position: absolute;
background-color: #ffF;
border-radius:5px;
width: 100px;
height: 100px;
border: 1px solid #e5e5e5;
text-align: center;
line-height: 2em;
}
.side:nth-child(1) {
transform: translateZ(3.1em); }
.side:nth-child(6) {
transform: rotateY(90deg) translateZ(3.1em); }
.side:nth-child(3) {
transform: rotateY(-90deg) translateZ(3.1em); }
.side:nth-child(4) {
transform: rotateX(90deg) translateZ(3.1em); }
.side:nth-child(5) {
transform: rotateX(-90deg) translateZ(3.1em); }
.side:nth-child(2) {
transform: rotateY(-180deg) translateZ(3.1em); }
.two-1, .three-1, .four-1, .five-1, .six-1 {
top: 20%;
left: 20%; }
.four-3, .five-3, .six-4 {
top: 20%;
left: 80%; }
.one-1, .three-2, .five-5 {
top: 50%;
left: 50%; }
.four-2, .five-2, .six-3 {
top: 80%;
left: 20%; }
.two-2, .three-3, .four-4, .five-4, .six-6 {
top: 80%;
left: 80%; }
.six-2 {
top: 50%;
left: 20%; }
.six-5 {
top: 50%;
left: 80%;
}
Add .show elements which will spin the dice:
.show-1 {
transform: rotateX(720deg) rotateZ(-720deg); }
.show-6 {
transform: rotateX(-900deg) rotateZ(1080deg); }
.show-3 {
transform: rotateY(-450deg) rotateZ(-1440deg); }
.show-4 {
transform: rotateY(810deg) rotateZ(720deg); }
.show-5 {
transform: rotateX(-810deg) rotateZ(-1080deg); }
.show-2 {
transform: rotateX(450deg) rotateZ(-720deg); }
Step3.
Add JavaScript
Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1;
If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.
var elDiceOne = document.getElementById('dice1');
var elDiceTwo = document.getElementById('dice2');
var elComeOut = document.getElementById('roll');
elComeOut.onclick = function () {rollDice();};
function rollDice() {
var diceOne = Math.floor((Math.random() * 6) + 1);
var diceTwo = Math.floor((Math.random() * 6) + 1);
console.log(diceOne + ' ' + diceTwo);
for (var i = 1; i <= 6; i++) {
elDiceOne.classList.remove('show-' + i);
if (diceOne === i) {
elDiceOne.classList.add('show-' + i);
}
}
for (var k = 1; k <= 6; k++) {
elDiceTwo.classList.remove('show-' + k);
if (diceTwo === k) {
elDiceTwo.classList.add('show-' + k);
}
}
setTimeout(rollDice(), 1000);
}
Watch also the video tutorial:
Enjoy coding!