Today I built a dice game web app with HTML, Javascript and CSS. The dice game involves two players which could be real or arbitrary. When the player clicks roll dice, it selects a random number between 1-6 as a normal dice would. Any player whose total score is greater than or equals to 20 wins the game.
html snippet
<html>
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1 id="message">Player 1 Turn</h1>
<div class="players">
<div id="player1">
<h1>Score:
<span id="player1Scoreboard">0</span>
</h1>
<div id="player1Dice" class="dice active">-</div>
</div>
<div id="player2">
<h1>Score:
<span id="player2Scoreboard">0</span>
</h1>
<div id="player2Dice" class="dice">-</div>
</div>
</div>
<button id="rollBtn">Roll Dice ๐ฒ</button>
<button id="resetBtn">Reset Game ๐</button>
</div>
<script src="index.js"></script>
</body>
</html>
css
html, body {
--color-1: #a8e6cf;
--color-2: black;
--color-3: #ffd3b6;
--color-4: #ffaaa5;
--color-5: #ff8b94;
margin: 0;
padding: 0;
}
body {
padding-top: 50px;
background-image: linear-gradient(180deg, var(--color-1) , var(--color-2));
font-family: 'Roboto', sans-serif;
height: 100vh;
color: black;
}
.container {
width: 400px;
text-align: center;
margin: 0 auto;
background-color: white;
box-shadow: -2px 6px 18px 3px rgba(0,0,0,0.75);
padding: 50px;
}
.players {
width: 100%;
display: flex;
justify-content: space-around;
}
.dice {
border-radius: 10px;
width: 100px;
height: 100px;
background-color: var(--color-3);
margin: 0 auto;
font-size: 80px;
display: block;
align-items: center;
justify-content: center;
}
button {
color: #fff;
padding: 20px 30px;
font-size: 20px;
margin: 40px auto;
border: none;
border-radius: 5px;
cursor: pointer;
}
#rollBtn {
background-color: var(--color-5);
}
#resetBtn {
background-color: var(--color-4);
}
button:focus {
outline: none;
}
#resetBtn {
display: none;
}
.active {
box-shadow: -2px 6px 18px 3px rgba(0,0,0,0.75);
}
Javascript snippet
// Create variables for the game state
let player1Score = 0
let player2Score = 0
let player1Turn = true
// Create variables to store references to the necessary DOM nodes
const player1Dice = document.getElementById("player1Dice")
const player2Dice = document.getElementById("player2Dice")
const player1Scoreboard = document.getElementById("player1Scoreboard")
const player2Scoreboard = document.getElementById("player2Scoreboard")
const message = document.getElementById("message")
const rollBtn = document.getElementById("rollBtn")
const resetBtn = document.getElementById("resetBtn")
function showDisplayButton() {
rollBtn.style.display = "none"
resetBtn.style.display = "block"
}
/* Hook up a click event listener to the Roll Dice Button. */
rollBtn.addEventListener("click", function() {
const randomNumber = Math.floor(Math.random() * 6) + 1
if (player1Turn) {
player1Score += randomNumber
player1Scoreboard.textContent = player1Score
player1Dice.textContent = randomNumber
player1Dice.classList.remove("active")
player2Dice.classList.add("active")
message.textContent = "Player 2 Turn"
} else {
player2Score += randomNumber
player2Scoreboard.textContent = player2Score
player2Dice.textContent = randomNumber
player2Dice.classList.remove("active")
player1Dice.classList.add("active")
message.textContent = "Player 1 Turn"
}
if (player1Score >= 20) {
message.textContent = "Player 1 has won! ๐ฅณ"
showDisplayButton()
} else if (player2Score >= 20) {
message.textContent = "Player 2 has won! ๐"
showDisplayButton()
}
player1Turn = !player1Turn
})
// 1. Hook a click event listener up with the Reset Button
// 2. Create a reset() function that resets the game
// 3. Invoke the reset() function when the Reset Button is clicked
resetBtn.addEventListener("click", function(){
reset()
})
function reset() {
message.textContent = "Player 1 Turn"
player1Scoreboard.textContent = 0
player2Scoreboard.textContent = 0
player1Dice.textContent = '-'
player2Dice.textContent = '-'
player1Score = 0
player2Score = 0
player1Turn = true
resetBtn.style.display = "none"
rollBtn.style.display = "block"
player2Dice.classList.remove("active")
player1Dice.classList.add("active")
}
You can view the app here