Roll Dice Game Javascript | 2 Player Dice Game Javascript - Codewithrandom

Roll Dice Game Javascript | 2 Player Dice Game Javascript - Codewithrandom

Roll Dice Game Javascript | 2 Player Dice Game Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Roll Dice Game Javascript. We use HTML, Css, and javascript for this Roll Dice Game Javascript. I hope you enjoy our blog so let's start with a basic HTML structure for the Roll Dice Game Javascript.

HTML Code 

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Pig Game</title>  
  </head>  
  <body>  
   <main>  
    <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>  
    <section class="player player--1">  
     <h2 class="name" id="name--1">Player 2</h2>  
     <p class="score" id="score--1">24</p>  
     <div class="current">  
      <p class="current-label">Current</p>  
      <p class="current-score" id="current--1">0</p>  
     </div>  
    </section>  
    <img src="dice-5.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>  
   </main>  
   <script src="script.js"></script>  
  </body>  
 </html>  
There is all the HTML code for the Roll Dice Game Javascript. Now, you can see an output with CSS, then we write javascript for the roll Dice Game Javascript.
output
Roll Dice Game Javascript | 2 Player Dice Game Javascript

CSS code

 @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');  
 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: inherit;  
 }  
 html {  
  font-size: 62.5%;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: 'Nunito', sans-serif;  
  font-weight: 400;  
  height: 100vh;  
  color: #333;  
  background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 /* LAYOUT */  
 main {  
  position: relative;  
  width: 100rem;  
  height: 60rem;  
  background-color: rgba(255, 255, 255, 0.35);  
  backdrop-filter: blur(200px);  
  filter: blur();  
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);  
  border-radius: 9px;  
  overflow: hidden;  
  display: flex;  
 }  
 .player {  
  flex: 50%;  
  padding: 9rem;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  transition: all 0.75s;  
 }  
 /* ELEMENTS */  
 .name {  
  position: relative;  
  font-size: 4rem;  
  text-transform: uppercase;  
  letter-spacing: 1px;  
  word-spacing: 2px;  
  font-weight: 300;  
  margin-bottom: 1rem;  
 }  
 .score {  
  font-size: 8rem;  
  font-weight: 300;  
  color: #c7365f;  
  margin-bottom: auto;  
 }  
 .player--active {  
  background-color: 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-color: #c7365f;  
  opacity: 0.8;  
  border-radius: 9px;  
  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;  
 }  
 /* ABSOLUTE POSITIONED ELEMENTS */  
 .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-color: white;  
  background-color: rgba(255, 255, 255, 0.6);  
  backdrop-filter: blur(10px);  
  padding: 0.7rem 2.5rem;  
  border-radius: 50rem;  
  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);  
 }  
 .btn::first-letter {  
  font-size: 2.4rem;  
  display: inline-block;  
  margin-right: 0.7rem;  
 }  
 .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-color: #2f2f2f;  
 }  
 .player--winner .name {  
  font-weight: 700;  
  color: #c7365f;  
 }  
 .hidden {  
  display: none;  
 }  
Css Updated output
Roll Dice Game Javascript | 2 Player Dice Game Javascript

Javascript code 

 'use strict';  
 const player0El = document.querySelector('.player--0');  
 const player1El = document.querySelector('.player--1');  
 const score0El = document.querySelector('#score--0');  
 const score1El = document.getElementById('score--1');  
 const current0El = document.getElementById('current--0');  
 const current1El = document.getElementById('current--1');  
 const diceEl = document.querySelector('.dice');  
 const btnNew = document.querySelector('.btn--new');  
 const btnRoll = document.querySelector('.btn--roll');  
 const btnHold = document.querySelector('.btn--hold');  
 score0El.textContent = 0;  
 // javascript will automatically convert this 0 to string  
 score1El.textContent = 0;  
 diceEl.classList.add('hidden');  
 let currentscore = 0;  
 const scores = [0, 0];  
 let activePlayer = 0;  
 let playing = true;  
 // rolling a dice  
 const switchPlayer = function () {  
  currentscore = 0;  
  document.getElementById(`current--${activePlayer}`).textContent =  
   currentscore;  
  activePlayer = activePlayer == 0 ? 1 : 0;  
  player0El.classList.toggle('player--active');  
  player1El.classList.toggle('player--active');  
 };  
 btnRoll.addEventListener('click', function () {  
  if (playing) {  
   diceEl.classList.remove('hidden');  
   const dice = Math.trunc(Math.random() * 6) + 1;  
   console.log(dice);  
   diceEl.src = `dice-${dice}.png`;  
   if (dice !== 1) {  
    currentscore += dice;  
    document.getElementById(`current--${activePlayer}`).textContent =  
     currentscore;  
   } else {  
    switchPlayer();  
   }  
  }  
 });  
 let active = 0;  
 btnHold.addEventListener('click', function () {  
  if (playing) {  
   scores[activePlayer] += currentscore;  
   document.getElementById(`score--${activePlayer}`).textContent =  
    scores[activePlayer];  
   if (scores[activePlayer] >= 20) {  
    playing = false;  
    diceEl.classList.add('hidden');  
    document.getElementById(`score--${activePlayer}`).textContent = 'Win!';  
    switchPlayer();  
    document.getElementById(`score--${activePlayer}`).textContent = 'Lost!';  
    document  
     .querySelector(`.player--${activePlayer}`)  
     .classList.add('player--winner');  
    active = activePlayer == 1 ? 0 : 1;  
    document  
     .querySelector(`.player--${active}`)  
     .classList.add('player--active');  
   } else {  
    switchPlayer();  
   }  
  }  
 });  
 btnNew.addEventListener('click', function () {  
  playing = true;  
  document  
   .querySelector(`.player--${activePlayer}`)  
   .classList.remove('player--winner');  
  activePlayer = 0;  
  document.querySelector('.player--0').classList.add('player--active');  
  document.querySelector('.player--1').classList.remove('player--active');  
  scores[0] = 0;  
  scores[1] = 0;  
  document.getElementById('score--0').textContent = 0;  
  document.getElementById('score--1').textContent = 0;  
 });  
Final output
Roll Dice Game Javascript | 2 Player Dice Game Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Roll Dice Game Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Roll Dice Game Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post