Hello friends my name is Rahul and today in this blog I am going to make a dice game so let’s start. So how is this game played. So when you roll the dice then you have to hold whatever number comes in your dice, similarly the other player also has to do the same. In the end whoever has the most numbers will win.
Step :- Create a file in VS Code and name it index.html where we put HTML code.
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>Dice 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-4.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>
Step 02 :- Create another file where we style the html and named it style.css.
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, #641d6d 10%, #2e91bf 80%);
display: flex;
align-items: center;
justify-content: center;
}
main {
position: relative;
width: 100rem;
height: 60rem;
background-color: rgba(214, 214, 214, 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;
}
.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: #c70063;
margin-bottom: auto;
}
.player--active {
background-color: rgb(211, 211, 211);
}
.player--active .name {
font-weight: 700;
}
.player--active .score {
font-weight: 400;
}
.player--active .current {
opacity: 1;
}
.current {
background-color: #0065a0;
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: #ffffff;
}
.current-score {
font-size: 3.5rem;
}
.btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: #000000;
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: #0bc515;
}
.hidden {
display: none;
}
Step 03 :- Create another file and named it script.js.
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;
score1El.textContent = 0;
diceEl.classList.add('hidden');
let currentscore = 0;
const scores = [0, 0];
let activePlayer = 0;
let playing = true;
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;
});
OutCome :-
