How to Make Roll Dice Game in JavaScript

Hey everyone, today we will learn how to make roll dice game in JavaScript from scratch step by step. Basically, games are helpful to improve your logic in any language. So, we are using HTML, CSS, and JavaScript to build it.

Rolling dice is a classic and fun activity often used in various games and simulations. In this article, we will guide you through creating a simple dice-rolling game using JavaScript, HTML, and CSS. We will start from scratch, so no prior coding experience is required. By the end of this tutorial, you’ll have a working dice game you can play with your friends.

Prerequisites:

• A basic understanding of HTML and CSS.
• A code editor (e.g., Visual Studio Code, Sublime Text).
• A web browser (e.g., Google Chrome, Mozilla Firefox).

How to Make Roll Dice Game in JavaScript

Before moving on to the codes, you can watch the tutorial, I’ve explained each and every step that is used to make a roll dice game in JavaScript. Inside the game, there are two players, who score, hold score, and also have a winning feature. When the user wins the game, then you can’t play it.

You May Also Like:

• Note App Using HTML CSS and JavaScript
• Movie App Using HTML CSS and JavaScript
• Weather App Using HTML CSS and JavaScript
• To-do List in JavaScript with Local Storage
• Quiz App with HTML, CSS, and JavaScript

Once you click on the New Game button, then you will play it again. So, You will learn step by step each feature that is used inside the game. After that, you’ve got a lot of ideas from it.

Hope you’ve watched the complete tutorial, If you face any problems inside the tutorial. Then I’m going to share with you the source code the project below.

How to Make Roll Dice Game in Javascript Using HTML CSS

First of All, you need to make a index.html file, and inside that you need to include the CSS and JS files. Once you do that, you can use the below-mentioned codes.

<!-- main start -->
    <main>
      <!-- player one start -->
      <section class="player player_0 player_active">
        <h2 class="name" id="name_0">Player 1</h2>
        <p class="score" id="score_0">43</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_0">0</p>
        </div>
      </section>
      <!-- player one start -->

      <!-- second player start-->
      <section class="player player_1">
        <h2 class="name" id="name-1">Player 2</h2>
        <p class="score" id="score_1">43</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_1">0</p>
        </div>
      </section>
      <!-- second player close-->

      <!-- buttons and image start -->
      <img src="./img/dice-1.png" alt="Playing dice" class="dice" />
      <button class="btn btn_new">New Game</button>
      <button class="btn btn_roll">Roll dice</button>
      <button class="btn btn_hold">Hold</button>
      <!-- buttons and image close -->
    </main>
    <!-- main close -->

After that, you need to use CSS to design the game am I right? So, Let’s look at the codes that use to design the games.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  font-family: "poppins", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-weight: 400;
  height: 100vh;
  color: #333;
  /* background: linear-gradient(to top left, #753682 0%, #bf2e34 100%); */
  background: rgb(2, 0, 36);
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(48, 159, 119, 1) 59%,
    rgba(0, 212, 255, 1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

/* main */
main {
  position: relative;
  width: 100rem;
  height: 60rem;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(200);
  filter: blur();
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-right: 9px;
  overflow: hidden;
  display: flex;
  border-radius: 5px;
}

.player {
  flex: 50%;
  padding: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.75s;
}

.name {
  position: relative;
  font-size: 4rem;
  text-transform: uppercase;
  /* letter-spacing: 1px; */
  font-weight: 300px;
  margin-bottom: 1rem;
}

.score {
  font-size: 8rem;
  font-weight: 300;
  color: #c7365f;
  margin-bottom: auto;
}

.player_active {
  background: rgba(255, 255, 255, 0.4);
}

.player_active .name {
  font-weight: 700;
}

.player_active .score {
  font-weight: 400;
}

.player_active .current {
  opacity: 1;
}

.current {
  background: #c7365f;
  opacity: 0.8;
  border-radius: 9px;
  color: #fff;
  color: #fff;
  width: 65%;
  padding: 2rem;
  text-align: center;
  transition: all 0.75s;
}

.current_label {
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  color: #ddd;
}

.current_score {
  font-size: 3.5rem;
}

.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #444;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.8rem;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 400;
  transition: all 0.2s;

  background: white;
  background: rbga(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);

  padding: 0.7rem 2.5rem;
  border-right: 50rem;
  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
}

.btn_new {
  top: 4rem;
}

.btn_roll {
  top: 39.3rem;
}

.btn_hold {
  top: 46.1rem;
}

.btn:active {
  transform: translate(-50%, 3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

.btn:focus {
  outline: none;
}

.dice {
  position: absolute;
  left: 50%;
  top: 16.5rem;
  transform: translateX(-50%);
  height: 10rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.player_winner {
  background: #2f2f2f;
}

.player_winner .name {
  font-weight: 700;
  color: #c7365f;
}

.hidden {
  display: none;
}

After using HTML and CSS your game has been designed successfully, but you need to use JS to add functionalities such as changing the roll dice, displaying the score changing the player positions, etc. So, you can check out the JS codes below.

"use strict";

const player0El = document.querySelector(".player_0");
const player1El = document.querySelector(".player_1");

const score0El = document.getElementById("score_0");
const score1El = document.getElementById("score_1");
const diceEl = document.querySelector(".dice");

const current0El = document.getElementById("current_0");
const current1El = document.getElementById("current_1");

// btns
const btnRoll = document.querySelector(".btn_roll");
const btnHold = document.querySelector(".btn_hold");
const btnNew = document.querySelector(".btn_new");

let scores, currentScore, activePlayer, playGame;

// initialize fun
const inti = function () {
  score0El.textContent = 0;
  score1El.textContent = 0;
  diceEl.classList.add("hidden");

  scores = [0, 0];
  activePlayer = 0;
  currentScore = 0;
  playGame = true;

  current0El.textContent = 0;
  current1El.textContent = 0;

  diceEl.classList.add("hidden");
  player0El.classList.remove("player_winner");
  player1El.classList.remove("player_winner");
  player0El.classList.add("player_active");
  player1El.classList.remove("player_active");
};

inti();

// switch the player
const switchPlayer = function () {
  document.getElementById(`current_${activePlayer}`).textContent = 0;
  activePlayer = activePlayer === 0 ? 1 : 0;
  currentScore = 0;
  player0El.classList.toggle("player_active");
  player1El.classList.toggle("player_active");
};

btnRoll.addEventListener("click", function () {
  if (playGame) {
    diceEl.classList.remove("hidden");

    //1. generate the random number
    const dice = Math.floor(Math.random() * 6) + 1;

    //2. display random image
    diceEl.src = `./img/dice-${dice}.png`;

    //3. check for rolled 1
    if (dice !== 1) {
      // display the score
      currentScore += dice;
      // current0El.textContent = currentScore;
      document.getElementById(`current_${activePlayer}`).textContent =
        currentScore;
    } else {
      // switch the player
      switchPlayer();
    }
  }
});

// btn hold even
btnHold.addEventListener("click", function () {
  if (playGame) {
    scores[activePlayer] += currentScore;
    document.getElementById(`score_${activePlayer}`).textContent =
      scores[activePlayer];

    if (scores[activePlayer] >= 20) {
      playGame = false;
      document
        .querySelector(`.player_${activePlayer}`)
        .classList.add("player_winner");
      document
        .querySelector(`.player_${activePlayer}`)
        .classList.add("player_active");
      diceEl.classList.add("hidden");
    } else {
      // switch player
      switchPlayer();
    }
  }
});

btnNew.addEventListener("click", inti);

That’s it for the roll dice game in JavaScript, I hope you’ve learned something new from it. Hope this tutorial is helpful and beneficial for you.

Conclusion: Congratulations! You’ve successfully created a simple dice-rolling game using JavaScript, HTML, and CSS from scratch. You can now open your index.html file in a web browser and start rolling the dice by clicking the “Roll the Dice” button. Feel free to further enhance and customize your game with additional features, animations, or rules to make it even more exciting. Happy coding!