Creating a Dice Roll with Animation using HTML, CSS, and JS Tutorial

Submitted by oretnom23 on Friday, April 14, 2023 - 17:30.

In this tutorial, you can learn how to Create a Dice Rolling App with animation using HTML, CSS, and JavaScript. The tutorial aims to provide students and beginners with a reference for learning some CSS tricks and useful JavaScript techniques. Here, I will be providing simple web page scripts that demonstrate the creation of a dice-rolling app.

What is Dice Roll?

Die rolls are a simple type of hardware random number generator because they are made random by uncertainty in minor parameters like the thrower's modest hand motions. Craps is a common dice game played today, in which bets are placed on the combined value of two dice that are thrown simultaneously.

In this article, you will learn to simulate the dice rolling using only HTML, CSS, and JavaScript.

How to Create a Dice Rolling App?

Dice Rolling Applications can be achieved easily using HTML, CSS, and JavaScript built-it properties, APIs, and methods. Using CSS or stylesheet scripts, we can design a simple cube with different counts of dots in each face that represent the values of the dice. We can also add a CSS animation to simulate the roll of the dice. The JavaScript will be used to randomly generate the random value of the dice and trigger the rolling animation. Check out the simple web page scripts that I created and provided below to understand it more.

Sample Dice Rolling Web App

The scripts below will result in a simple web page with dice and allow the user to roll it by clicking the Roll Dice Button. When the button is clicked, it will trigger the dice rolling and randomly select faces to show as the dice rolling simulation result.

HTML

Here's the HTML script known as index.html. The file contains the page layout and dice elements.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>HTML CSS and JS - Dice Roll</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="style.css">
  13.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  14. </head>
  15. <body>
  16.     <div class="content-md-lg py-3">
  17.         <div class="col-lg-8 col-md-10 col-sm-12 col-12 mx-auto">
  18.             <div class="page-title">Dice Roll using HTML, CSS, and JavaScript</div>
  19.             <hr style="margin:auto; width:25px" class="border-light opacity-100">
  20.         </div>
  21.         <div class="container-lg">
  22.             <div class="row py-3 my-2">
  23.                 <div class="col-lg-5 col-md-5 col-sm-10 col-12 mx-auto">
  24.                     <div class="card rounded-0">
  25.                         <div class="card-body">
  26.                             <div class="container-fluid">
  27.                                 <div class="d-flex justify-content-evenly">
  28.                                 <div class="dice-container">
  29.                                     <div class="dice" id="dice-1" data-face="2">
  30.                                         <div class="dice-face" data-face="1">
  31.                                             <span class="dot"></span>
  32.                                         </div>
  33.                                         <div class="dice-face" data-face="2">
  34.                                             <span class="dot"></span>
  35.                                             <span class="dot"></span>
  36.                                         </div>
  37.                                         <div class="dice-face" data-face="3">
  38.                                             <span class="dot"></span>
  39.                                             <span class="dot"></span>
  40.                                             <span class="dot"></span>
  41.                                         </div>
  42.                                         <div class="dice-face" data-face="4">
  43.                                             <span class="dot"></span>
  44.                                             <span class="dot"></span>
  45.                                             <span class="dot"></span>
  46.                                             <span class="dot"></span>
  47.                                         </div>
  48.                                         <div class="dice-face" data-face="5">
  49.                                             <span class="dot"></span>
  50.                                             <span class="dot"></span>
  51.                                             <span class="dot"></span>
  52.                                             <span class="dot"></span>
  53.                                             <span class="dot"></span>
  54.                                         </div>
  55.                                         <div class="dice-face" data-face="6">
  56.                                             <span class="dot"></span>
  57.                                             <span class="dot"></span>
  58.                                             <span class="dot"></span>
  59.                                             <span class="dot"></span>
  60.                                             <span class="dot"></span>
  61.                                             <span class="dot"></span>
  62.                                         </div>
  63.                                     </div>
  64.                                 </div>
  65.                                 <div class="dice-container">
  66.                                     <div class="dice" id="dice-2" data-face="3">
  67.                                         <div class="dice-face" data-face="1">
  68.                                             <span class="dot"></span>
  69.                                         </div>
  70.                                         <div class="dice-face" data-face="2">
  71.                                             <span class="dot"></span>
  72.                                             <span class="dot"></span>
  73.                                         </div>
  74.                                         <div class="dice-face" data-face="3">
  75.                                             <span class="dot"></span>
  76.                                             <span class="dot"></span>
  77.                                             <span class="dot"></span>
  78.                                         </div>
  79.                                         <div class="dice-face" data-face="4">
  80.                                             <span class="dot"></span>
  81.                                             <span class="dot"></span>
  82.                                             <span class="dot"></span>
  83.                                             <span class="dot"></span>
  84.                                         </div>
  85.                                         <div class="dice-face" data-face="5">
  86.                                             <span class="dot"></span>
  87.                                             <span class="dot"></span>
  88.                                             <span class="dot"></span>
  89.                                             <span class="dot"></span>
  90.                                             <span class="dot"></span>
  91.                                         </div>
  92.                                         <div class="dice-face" data-face="6">
  93.                                             <span class="dot"></span>
  94.                                             <span class="dot"></span>
  95.                                             <span class="dot"></span>
  96.                                             <span class="dot"></span>
  97.                                             <span class="dot"></span>
  98.                                             <span class="dot"></span>
  99.                                         </div>
  100.                                     </div>
  101.                                 </div>
  102.                                 </div>
  103.                                 <div class="col-lg-5 col-md-8 col-sm-12 col-12 mx-auto mt-4">
  104.                                     <button type="button" class="btn btn-primary rounded-pill w-100" id="rollButton">Roll Dice</button>
  105.                                 </div>
  106.                             </div>
  107.                         </div>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </div>
  113.     <script src="script.js"></script>
  114. </body>
  115. </html>

CSS

Here's the CSS script known as the style.css. The file contains stylesheet codes for the design of some data elements of the page including the dice elements.

  1. @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
  2. @import url('https://fonts.googleapis.com/css2?family=Tillana:wght@400;600&display=swap');
  3. :root{
  4.     --space-mono-font: 'Space Mono', monospace;
  5.     --border-dark-subtle: #373838; 
  6.     --font-tillana:'Tillana', cursive;
  7. }
  8. *{
  9.     box-sizing: border-box;
  10. }
  11. body *{
  12.     font-family: var(--space-mono-font);
  13. }
  14. /**
  15. Page Design
  16. */
  17. body,
  18. html{
  19.     height: 100%;
  20.     width: 100%;
  21.     margin: 0;
  22.     padding: 0;
  23. }
  24. body{
  25.     background-color: #282A3A;
  26. }
  27. .page-title{
  28.     font-size: 2.5rem;
  29.     font-weight: 500;
  30.     color: #fff;
  31.     letter-spacing: 3px;
  32.     font-family: var(--secular-font);
  33.     text-align: center;
  34.     text-shadow: 0px 0px 3px #2020208c;
  35. }
  36. .border-dark-subtle{
  37.     border-color: var(--border-dark-subtle) !important;
  38. }
  39.  
  40. /* Dice Container */
  41.  
  42. .dice-container {
  43.     position: relative;
  44. }
  45.  
  46. /* Dice Element */
  47.  
  48. .dice{
  49.     position: relative;
  50.     width:100px;
  51.     height:100px;
  52.     transform-style: preserve-3d;
  53.     transition: transform 1s;
  54.  
  55. }
  56. /* Dice Faces */
  57. .dice-face{
  58.     position: absolute;
  59.     width:100px;
  60.     height:100px;
  61.     padding: 5px;
  62.     border: 1px solid #838383;
  63.     border-radius: 5px;
  64.     background-color: #282A3A;
  65.     backface-visibility: hidden;
  66. }
  67. /* Dice Dots */
  68. .dot{
  69.     /* position: absolute; */
  70.     height: 10px;
  71.     width: 10px;
  72.     background-color: #fff;
  73.     border-radius: 50% 50%;
  74.     box-shadow: 0px 0px 5px #ffffff94;
  75. }
  76.  
  77. /* Organizing Dice Faces Dots */
  78.  
  79. .dice-face[data-face="1"]{
  80.     display: flex;
  81.     align-items: center;
  82.     justify-content: center;
  83. }
  84. .dice-face[data-face="2"]{
  85.     display: flex;
  86.     align-items: center;
  87.     justify-content: space-evenly;
  88. }
  89. .dice-face[data-face="3"]{
  90.     display: flex;
  91.     flex-direction: column;
  92.     align-items: center;
  93.     justify-content: space-evenly;
  94. }
  95. .dice-face[data-face="3"] .dot:nth-child(1){
  96.     transform: translateX(-25px);
  97. }
  98. .dice-face[data-face="3"] .dot:nth-child(3){
  99.     transform: translateX(25px);
  100. }
  101. .dice-face[data-face="4"]{
  102.     display: flex;
  103.     flex-wrap: wrap;
  104.     align-items: center;
  105.     justify-content: space-evenly;
  106. }
  107. .dice-face[data-face="4"] .dot:nth-child(1){
  108.     transform: translate(7px, -17px);
  109. }
  110. .dice-face[data-face="4"] .dot:nth-child(2){
  111.     transform: translate(36px, -16px)
  112. }
  113. .dice-face[data-face="4"] .dot:nth-child(3){
  114.     transform: translate(-32px, 22px)
  115. }
  116. .dice-face[data-face="4"] .dot:nth-child(4){
  117.     transform: translate(-3px, 22px)
  118. }
  119.  
  120. .dice-face[data-face="5"]{
  121.     display: flex;
  122.     flex-wrap: wrap;
  123.     align-items: center;
  124.     justify-content: space-evenly;
  125. }
  126. .dice-face[data-face="5"] .dot:nth-child(1){
  127.     transform: translate(7px, -17px);
  128. }
  129. .dice-face[data-face="5"] .dot:nth-child(2){
  130.     transform: translate(44px, -15px)
  131. }
  132. .dice-face[data-face="5"] .dot:nth-child(3){
  133.     transform: translate(1px, 4px)
  134. }
  135. .dice-face[data-face="5"] .dot:nth-child(4){
  136.     transform: translate(-42px, 24px)
  137. }
  138.  
  139. .dice-face[data-face="5"] .dot:nth-child(5){
  140.     transform: translate(-4px, 25px)
  141. }
  142. .dice-face[data-face="6"] {
  143.     display: grid;
  144.     grid-template-columns: auto auto;
  145.     gap: 2px 15px;
  146. }
  147. .dice-face[data-face="6"] .dot {
  148.     transform: translate(14px, 7px);
  149. }
  150.  
  151.  
  152. /* Dice Face to show if Face value is set */
  153.  
  154. .dice-face[data-face="1"] {
  155.     transform: translateZ(3.1em); 
  156. }
  157.  
  158. .dice-face[data-face="6"] {
  159. transform: rotateY(90deg) translateZ(3.1em); 
  160. }
  161.  
  162. .dice-face[data-face="3"] {
  163. transform: rotateY(-90deg) translateZ(3.1em); 
  164. }
  165.  
  166. .dice-face[data-face="4"] {
  167. transform: rotateX(90deg) translateZ(3.1em); 
  168. }
  169.  
  170. .dice-face[data-face="5"] {
  171. transform: rotateX(-90deg) translateZ(3.1em); 
  172. }
  173.  
  174. .dice-face[data-face="2"] {
  175. transform: rotateY(-180deg) translateZ(3.1em); 
  176. }
  177.  
  178. /* Dice Rolling Animation */
  179.  
  180. .dice.rolling{
  181.     animation:roll 1.2s ease-in-out infinite
  182. }
  183. @keyframes roll{
  184.     0%{
  185.         transform: rotateX(0deg) rotateZ(0deg);
  186.     }
  187.     25%{
  188.         transform: rotateX(90deg) rotateZ(90deg);
  189.     }
  190.     50%{
  191.         transform: rotateX(180deg) rotateZ(180deg);
  192.     }
  193.     75%{
  194.         transform: rotateX(360deg) rotateZ(360deg);
  195.     }
  196.     100%{
  197.         transform: rotateX(180deg) rotateZ(180deg);
  198.     }
  199. }
  200. .dice[data-face="1"]{
  201.     transform: rotateX(0deg) rotateZ(0deg);
  202. }
  203. .dice[data-face="2"]{
  204.     transform: rotateX(180deg) rotateZ(0deg);
  205. }
  206. .dice[data-face="3"]{
  207.     transform: rotateY(90deg) rotateZ(0deg);
  208. }
  209. .dice[data-face="4"]{
  210.     transform: rotateX(270deg) rotateZ(0deg);
  211. }
  212. .dice[data-face="5"]{
  213.     transform: rotateX(90deg) rotateZ(0deg);
  214. }
  215. .dice[data-face="6"]{
  216.     transform: rotateY(270deg) rotateZ(0deg);
  217. }
  218.  

JavaScript

Here's the JavaScript script known as script.js. The file contains codes that make this Dice Rolling App functional.

  1. // Element Selector
  2. const dice1 = document.getElementById('dice-1')
  3. const dice2 = document.getElementById('dice-2')
  4. const rollButton = document.getElementById('rollButton')
  5.  
  6.  
  7. // Execute Dice Roll
  8. const rollDice = () =>{
  9.     // Animate Dices to Roll
  10.     if(!dice1.classList.contains('rolling'))
  11.         dice1.classList.add('rolling')
  12.     if(!dice2.classList.contains('rolling'))
  13.         dice2.classList.add('rolling')
  14.  
  15.     // Get Random values for dices
  16.     var dice1Val = Math.floor( (Math.random() * 6) + 1 )
  17.     var dice2Val = Math.floor( (Math.random() * 6) + 1 )
  18.     setTimeout(()=>{
  19.         // set dices to random values after certain duration of rolling
  20.         dice1.dataset.face = dice1Val
  21.         dice2.dataset.face = dice2Val
  22.  
  23.         // remove rolling animation
  24.         if(dice1.classList.contains('rolling'))
  25.             dice1.classList.remove('rolling')
  26.         if(dice2.classList.contains('rolling'))
  27.             dice2.classList.remove('rolling')
  28.     }, 3000)
  29. }
  30.  
  31.  
  32. // Trigger Dices to Roll
  33. rollButton.addEventListener('click', function(e){
  34.     e.preventDefault()
  35.     rollDice()
  36. })

Snapshots

Here are the overall result snapshots of pages of the Dice Roll App scripts I have provided above.

Page UI

Dice Roll App using HTML, CSS, and JavaScript

Dice Rolling

Dice Roll App using HTML, CSS, and JavaScript

Same Result #1

Dice Roll App using HTML, CSS, and JavaScript

Sample Result #2

Dice Roll App using HTML, CSS, and JavaScript

There you go! I have also provided the complete source code zip of the Dice Roll App and it is free to download on this website. Feel free to download and modify the source code the way you wanted to enhance your programming skills and capabilities. The download button can be found below this tutorial's content.

That's it! I hope this Creating a Dice Roll with Animation using HTML, CSS, and JS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Add new comment

About text formats
  • 3328 views