Exercise - Complete the SPACE JAM: A NEW LEGACY Water Break App

Completed

The final function is the one that will simulate the game actually running. In this case, instead of waiting 12 minutes, we'll pretend that a quarter is only 12 seconds.

The startNextQuarter() function is called from the button that is defined in index.html. Locate the div that has the ID start to see the onclick declaration:

// This function is called when the Game button is selected. Each time the button is selected,
// it runs through a 12-second timer (simulating 12 minutes) and then updates the game
// to the next quarter.
function startNextQuarter() {
// If there aren't exactly five players on the court, alert the coach that the game can't start.
if(playersOnCourt != maxPlayersOnCourt){
alert('Choose exactly ' + maxPlayersOnCourt + ' players to be on the court.');
return;
}

// Update the button to indicate a quarter is in progress.
document.getElementById('start').innerText = 'Q' + (currentQuarter + 1) + ' is in progress';

// Define the interval period for the quarter; in this case, it's 12 seconds.
var secondsInQuarter = 12;

// Set the quarterInPlay variable to true so that the coach
// can't move players during gameplay
quarterInPlay = true;

// Update the count down every 1 second, as indicated by the 1000 as
// the second parameter to the setInterval function
var x = setInterval(function() {
// Display the current time on the court board.
document.getElementById('timer').innerText = 'Q '+ (currentQuarter + 1) + ' Time: ' + secondsInQuarter + ':00';

// Decrement the interval counter for this quarter.
secondsInQuarter--;

// If the quarter has ended, reset the interval timer and get ready for the next quarter.
if (secondsInQuarter < 0) {
clearInterval(x);
if(currentQuarter < 3) {
endQuarter();
}
else {
endGame();
}
}
}, 1000);
}


Although the interval functionality is beyond the scope of this module, a critical piece (especially when you're testing new functionality) is that you can modify the interval timing, which is the second parameter in the setInterval() function; in this case, it's set to 1000. You can set this to 100 if you want the quarters shorter to more quickly test new changes.

It's finally time! The app is finished! Now, we can test our app. Remember that you'll want to test all the functionality (including trying to add too many players to the court, or starting the game when there are too few players on the court).

1. Choose five players.
2. Press the Start the Game! button.
3. When the timer stops, adjust (or not) the players on the court versus players taking a break.
4. When your lineup is locked in, select the Start Q2 button.

Repeat steps 3 and 4 for all four quarters, and then you should be at the end of the game!

Congratulations! You finished your web app!