We know now how to toss a coin using JavaScript, so why not to try a roll the dice too?
Try to roll double six!
To see the live output of the animation on the website click here.
Demo:
To create the Dice game follow the steps below:
- Add HTML
- Add CSS
- Add JavaScript
Step1.
Add HTML
Create the Game container and another one for dice, and dots.
Note: to creating the dice you need to know how to create 3d cube. If you need more information about 3d cube and CSS perspective check the tutorial CSS Perspective Property, CSS Perspective-origin Property and 3d Cube.
<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 of the background, and the position of the elements.
body {
background-color: #6a994e;
perspective: 900px;
height: 100vh;
}
.game {
position: relative;
width: 100%;
height: 50%;
}
.container {
position: relative;
display: inline-block;
left:40%;
top: 200px;
}
Style the button:
.roll-button {
margin-left: 15px; }
button {
position: absolute;
left:55%;
top:-350px;
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;
margin-top: 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);
}
To see the live output of the animation go to lenastanley.com.
Enjoy coding!