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; }