How to create dice roll using HTML CSS and JavaScript

In this web development tutorial, you will learn how to create a dice roll using HTML, CSS, and JavaScript. We will create a simple dice roll game where the user can click on a button to roll the dice and get a random number between 1 and 6. Watch the Full Video Tutorial Github Font…

Norbert BM

March 24, 2024

2 minutes

javascript game

Watch the Full Video Tutorial

Github

Font Awesome CDN

Font Awesome Icons

Step 1: Create the HTML

First, let’s create the HTML structure for our dice roll game. We will have a button that the user can click to roll the dice, and an empty div where we will display the result of the dice roll.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Dice Roll</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Animated Dice Roll</h1>
    <p>Click the button to roll the dice.</p>
    <h1 id="sum">7</h1>
    <div class="dice" id="dice">
      <div class="die" id="die1">
        <i class="fa-solid fa-dice-one" style="font-size: 3.5rem"></i>
      </div>
      <div class="die" id="die2">
        <i class="fa-solid fa-dice-six" style="font-size: 3.5rem"></i>
      </div>
    </div>
    <button class="btn" onclick="rollDice()">Roll Dice</button>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Create the CSS

Next, let’s create the CSS to style our dice roll game. We will center the content on the page and style the button and result div.

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
}

.dice {
  display: flex;
}

.die {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5);
  &.roll {
    animation: roll 0.5s infinite;
  }
}
.btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: rgb(240, 240, 240, 0.5);
  color: #000;
  transition: 0.3s;
  border: 1px solid #000;
}

.btn:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #ddd;
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Step 3: Create the JavaScript

Finally, let’s create the JavaScript to handle the dice roll logic. We will generate a random number between 1 and 6 when the user clicks the button and display the result in the result div.

function rollSingleDie() {
  return Math.floor(Math.random() * 6) + 1;
}

function rollDice() {
  const die1 = document.getElementById("die1");
  const die2 = document.getElementById("die2");
  const disSum = document.getElementById("sum");

  const result1 = rollSingleDie();
  const result2 = rollSingleDie();

  const sum = result1 + result2;

  die1.innerHTML = result1;
  die2.innerHTML = result2;
  disSum.innerHTML = "Sum: " + sum;
  // add animation class

  die1.classList.add("roll");
  die2.classList.add("roll");

  setTimeout(() => {
    die1.classList.remove("roll");
    die2.classList.remove("roll");
  }, 500);

  // Remove animation class
  die1.classList.remove("roll");
  die2.classList.remove("roll");

  // Trigger reflow
  void die1.offsetWidth;
  void die2.offsetWidth;

  // Add animation class
  die1.classList.add("roll");
  die2.classList.add("roll");
}

Conclusion

In this tutorial, you learned how to create a simple dice roll game using HTML, CSS, and JavaScript. You can now customize the game further by adding more dice or changing the animation styles. Have fun rolling the dice!