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%.
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!
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.
Q1. Which JavaScript function can be used to create a timer that fires at regular intervals until cleared?
setTimeout()
setRate()
setInterval()
wait()
Q2. Which attributes of a <progress>
element control the percentage of the progress bar that is marked complete?
value
and max
currentValue
and maxValue
start
and end
min
and max
3.135.216.174