You are currently viewing Create 2 Player Dice Game using Javascript (Source Code)

Create 2 Player Dice Game using Javascript (Source Code)

Telegram Group Join Now

Create 2 Player Dice Game using Javascript

 
 2 Player Dice Game Javascript
2 Player Dice Game Javascript

 

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.

ADVERTISEMENT

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
2 Player Dice Game Table

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

 
Roll Dice Game Javascript
Roll Dice Game Javascript

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

Roll Dice Game Javascript
Roll Dice Game Javascript

JavaScript code For Dice Game

'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

 
 2 Player Dice Game Javascript
2 Player Dice Game Javascript

 

Now that we have completed our javascript section for the dice game. Here is our updated output with the javascript dice game. Hope you like the 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!

Responsive Resume/CV Website Using HTML & CSS

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 

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!

Telegram Group Join Now

Leave a Reply