Back to Shut the Box Project

Shut the Box Project - JS and HTML updates

Additional Scripts Five

Instructions:

Although this is the the fifth update to scripts, we need to make changes in multiple places on the HTML file as well. Let's start with our JS file. Copy and Paste our new endGame() function with the new array declarations to the bottom of our stbScripts.js file. The second block of code needs to be pasted into the very top inside of the select() function. Also, copy and paste a new button script in your HTML file. The name of the button should be "End Round" or "End Game" and make the onclick="endBtn()" command. Change the styles on the new button to meet your needs. Follow the last commands instructions at the bottom of this page to make it all work.


//player scores will be kept in scoreboard div using new arrays
allScoresP1 = new Array();
allScoresP2 = new Array();
function endGame () {
    //put score in games paragraph depending on player 0 or 1
    //add player to var list at top set to 1 to start
    if (player==1){
        games ++;
        allScoresP1[games-1]=score;
        $("#p1Games").text(allScoresP1);
        player=2;
    }
    else {
        allScoresP2[games-1]=score;
        $("#p2Games").text(allScoresP2);
        player=1;
    }
        
    // hid the reset button and end button and show all tiles
    $("#reset").hide();
    $("#endBtn").hide();
    currentTiles = Array(1,2,3,4,5,6,7,8,9);

    for (var i = 0; i < currentTiles.length; i++) {
        c=currentTiles[i];
        document.getElementById(c).style.visibility="visible";
    }

    //reset temporary tile total array and show roll button div
    tileTotal = Array();
    document.getElementById("leftside").style.visibility="visible";

    //I suggest to reset total to 0 and score to 45

    // as well as the dice images and #score text for new player

}  // end of endGame()
            
//add this to the first action inside select() function
// exit this function if the tempTotal is already equal to dice total
    if (tempTotal==total ||  total==0){
        // unless the total is the previous total
        if (previousTotal==total){
        }
        else {
            alert("You need to roll the dice.");
            return;
        }
    } 

            
    1) Make a button with id="endBtn" that says end game. Add CSS to match reset and roll button if you like.

    2) Need to add text spans to hold the scores in the array made above.

    3) Add to var list at the top of JS file: player=1, games=0, previousTotal. 

    4) Let previousTotal get total as the first action inside roll().

    5) Call getScore() in the last conditional of select().  when tempTotal==total  

    This is a good time to save everything and test just one round.
       
    6) Need to add hide and show commands to make the buttons work properly.

    7) Reset the totals and score for the new player. Update #score text.

    8) Put a new div around the end and reset buttons with this css:
#btn {
    height: 100px;
    text-align: center;
    width: 300px;
    border-radius: 5px;
    margin-left: 100px;
}
            
David Johns and Electric Teaching ~ All Rights Reserved 2016