Create Dice Game using JavaScript (2 Player Dice Game)
Welcome to the Codewithrandom blog. In this blog, We create the Dice Game using HTML, Css, and JavaScript. In this game, we have 2 Players and they Play 2 Player Dice Game With All Functionality in the Game.
I hope you enjoy our blog so let’s start with a basic HTML structure for the Dice Game.
50+ HTML, CSS & JavaScript Projects With Source Code
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML ,CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
HTML Code For Dice Game:-
<!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 Dice Game Javascript. Now, you can see output without CSS and javascript code, then we write Css and javascript for the Dice Game.
Create Otp Input Field Using Html,Css & JavaScript ( Source Code)
output Dice Game
CSS Code For Dice Game:-
@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;
}Simple Portfolio Website Using Html And Css With Source Code
Css Updated output dice game
Dice Game 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;
});Restaurant Website Using HTML And CSS With Source Code
Final Output Of Dice Game Using JavaScript:-
Now that we have completed our javascript section for the dice game. Hope you like the Dice Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
Responsive Resume/CV Website Using HTML & CSS
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
Which code editor do you use for this 2 Player Dice Game coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
YES! this is a responsive project
Do you use any external links to create this project?
No!
