HTML Game Using JavaScript DiceRoll

document.querySelector('.btn-roll').addEventListener('click', function() {
    if(Playing) {
        // 1. Random number
        var dice = Math.floor(Math.random() * 6) + 1;

        //2. Display the result
       
        var diceDOM = document.querySelector('.dice');
        diceDOM.style.display = 'block';
        diceDOM.src = 'dice-' + dice + '.png';


        //3. Update the round score IF the rolled number was NOT a 1
        if (dice !== 1) {
            //Add score
            RoundScores += dice;
            document.querySelector('#currentPlayer-' + PlayerActive).textContent = RoundScores;
        } else {
            //Next player
            nextPlayer();
        }
    }    
});

2) Adding Hold button EventListener

Now, you need to create another event listener for hold button by document.querySelector(‘.btn-hold’).addEventListener(‘click’, function() {}. This will help create an event listener with the hold button id and will call the anonymous function when the hold button is clicked.

The anonymous function working
As the hold button gets clicked the round scores get added up to the Global score and the next player gets its turn.

So first you need to add the round scores to global score by Scores[PlayerActive] += RoundScores; here, Scores array will take the active player and then add the current player round score data to the global score.

Second, you need to update the user interface in the browser which will be done by the dom manipulation document.querySelector(‘#s-‘ + PlayerActive).textContent = Scores[PlayerActive]; The .textContent helps in manipulation/changing of the global score in html.

Now you need to write var input = document.querySelector(‘.final-score’).value; This input variable will store the final game score count which the user sets before starting the game. The document.querySelector(‘.final-score’).value; helps in retriving of the data from the input field on the web page.

Now declare a variable winningScore where you will store the final game benchmark taken from the user and then create an if statement to save it. If in case the user doesn’t enter the final game over score then by default set it to 100 in the else statement.

if(input) { winningScore = input; }

else { winningScore = 100; }

Check if the player won the game while pressing the hold button and submitting its round score to the global score.

To check that first you need to write an if condition and check whether Global score is greater than or equals to the final score or not and if it’s equal then the currently active player wins the game and print Winner! in the browser. And then again set the image display to none to hide the image as the game finishes.

The style.display property sets or returns the element’s display type.

After that, you need to assign the winner class to the currently active player. The winner class is basically used for styling and CSS purpose of the winning player.

Then you need to remove the active player class from the currently active player by document.querySelector(‘.player-‘ + PlayerActive + ‘-box’).classList.remove(‘active’); With which you can also remove that red dot icon from the active player profile box. 

The classList.remove(‘active’) is a js property to remove classes from the particular assigned object.And after that set the playing to false so the game stops.

And now you need to write the else block that is because if the player doesn’t win the game then the game continues and its the next players turn. by calling the nextPlayer() function.

document.querySelector('.btn-hold').addEventListener('click', function() {
    if (Playing) {
        // Add CURRENT score to GLOBAL score
        Scores[PlayerActive] += RoundScores;

        // Update the UI
        document.querySelector('#s-' + PlayerActive).textContent = Scores[PlayerActive];
        
        var input = document.querySelector('.final-score').value;
        var winningScore;
        
        // Undefined, 0, null or "" are COERCED to false
        // Anything else is COERCED to true
        if(input) {
            winningScore = input;
        } else {
            winningScore = 100;
        }
        
        // Check if player won the game
        if (Scores[PlayerActive] >= winningScore) {
            document.querySelector('#n-' + PlayerActive).textContent = 'Winner!';
            document.getElementById('dice-1').style.display = 'none';
           
        
            document.querySelector('.player-' + PlayerActive + '-box').classList.add('winner');
            document.querySelector('.player-' + PlayerActive + '-box').classList.remove('active');
            Playing = false;
        } else {
            //Next player
            nextPlayer();
        }
    }
});

3) Adding New Game EventListener

First, you need to write the select the new game id by document.querySelector(‘.btn-new’). Then you need to add the event listener to it which will be invoked on the mouse click option and will call the start function.

document.querySelector('.btn-new').addEventListener('click', start);

Adding The Functions

Adding nextPlayer() Funtion

First, you need to write the ternary operator and set the active player to 0 which means that the currently active player write now is player 0 and then check if the value of the active player is 1 or 0 if the value is equal to 1 then change the currently active player to 0 and if the value is 0 then set the currently active player value is 1. This toggle will change the currently active player. PlayerActive === 0 ? PlayerActive = 1 : PlayerActive = 0;    After that set the RoundScores to zero.

And also set the initial round scores to zero by :

document.getElementById(‘currentPlayer-0’).textContent = ‘0’;

document.getElementById(‘currentPlayer-1’).textContent = ‘0’;

After that simulatneoulsy you need to toogle the active class which also contains css with it according to the currently active player by

document.querySelector(‘.player-0-box’).classList.toggle(‘active’);

document.querySelector(‘.player-1-box’).classList.toggle(‘active’);

The classList.toogle helps in adding and removing the active class to the currently active player.

Then you need to hide the display of the dice image by setting style.display property to none.

function nextPlayer() {
    //Next player
    PlayerActive === 0 ? PlayerActive = 1 : PlayerActive = 0;
    RoundScores = 0;

    document.getElementById('currentPlayer-0').textContent = '0';
    document.getElementById('currentPlayer-1').textContent = '0';

    document.querySelector('.player-0-box').classList.toggle('active');
    document.querySelector('.player-1-box').classList.toggle('active');

    document.querySelector('.dice').style.display = 'none';
}

Adding start() Function

This function is called at the beginning of the game or when we want to start a new game. So firstly you need to set everything to zero i.e. Scores, PlayerActive, and RoundScores. Scores = [0, 0]; PlayerActive = 0; RoundScores = 0; Then you need to start the game so set Playing is equals to true. After that set the dice image to none to hide the dice when the game loads. by typing document.querySelector(‘.dice’).style.display = ‘none’; 

Explanation:- We set the Scores to zero so that to reset the new game with player scores as zero. Then we set PlayerActive to zero so that the first player to start the game is player 1. Then we set the RoundScores to zero because as any value left from the last game would now again gets reset to zero.

Now all the variables are set/reset to zero, so now we have to display that initial zero value in the web browser

Now you have to do DOM manipulation by getting the id’s of the respective fields and setting it to zero on browser

First, you will set the global scores to zero by:-

function start() {
    Scores = [0, 0];
    PlayerActive = 0;
    RoundScores = 0;
    Playing = true;
    
    document.querySelector('.dice').style.display = 'none';

    document.getElementById('s-0').textContent = '0';
    document.getElementById('s-1').textContent = '0';
    document.getElementById('currentPlayer-0').textContent = '0';
    document.getElementById('currentPlayer-1').textContent = '0';
    document.getElementById('n-0').textContent = 'Player 1';
    document.getElementById('n-1').textContent = 'Player 2';
    document.querySelector('.player-0-box').classList.remove('winner');
    document.querySelector('.player-1-box').classList.remove('winner');
    document.querySelector('.player-0-box').classList.remove('active');
    document.querySelector('.player-1-box').classList.remove('active');
    document.querySelector('.player-0-box').classList.add('active');
}

OUTPUT: HTML Game Using JavaScript