Time for action – creating the results panel

After all of the notes have been played for the song, the updateNotes() method calls showScore(), where we will show the player's score and some statistics:

function showScore()
{
    $notesPanel.hide();
    $resultsPanel.fadeIn();
    $(".score", $resultsPanel).text(score);
    $(".correct", $resultsPanel).text(notesCorrect);
    $(".count", $resultsPanel).text(noteCount);
    $(".note-accuracy", $resultsPanel).text(
        Math.round(100 * notesCorrect / noteCount));
    $(".timing-accuracy", $resultsPanel).text(
        Math.round(10 * score / notesCorrect));
}

First we hide the notes panel and fade in the score panel in its place. Then, we fill in the score and statistics into the placeholders in the DOM. We show the score, number of notes correct, and total number of notes. In addition, we compute the percentage of notes they got correct using the notesCorrect and noteCount variables.

We get the timing accuracy percentage by factoring it from the score and number of notes correct. Remember that there are a total of 10 points possible per note, so if they got 17 notes correct the total number of possible points is 170. If the score was 154 that would be 154 / 170 ≈ 91%.

Time for action – creating the results panel

What just happened?

We showed the results panel when the game is over, and populated it with the player's score and statistics. Our game is now finished. Go ahead and give it a try and become a piano hero!

Have a go hero

Try writing an audio recorder class that records when the user plays a note on the keyboard, and saves it to an array of data objects that can be played by the audio sequencer.

Pop quiz

Q1. Which JavaScript function can be used to create a timer that fires at regular intervals until cleared?

  1. setTimeout()
  2. setRate()
  3. setInterval()
  4. wait()

Q2. Which attributes of a <progress> element control the percentage of the progress bar that is marked complete?

  1. value and max
  2. currentValue and maxValue
  3. start and end
  4. min and max
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.216.174