Day 19 - 20 of 100 Days of Code: Dice Game App

#javascript #webdev #beginners #programming

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