O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – animating the notes

Previously, we started an interval using setInterval() in the startGame() method. The updateNotes() method gets called every time the interval expires. This method is responsible for updating the position of all of the note elements, so they appear to move down the screen:

function updateNotes() { $(".note", $notesPanel).each(function() { var $note = $(this); var top = $note.position().top; if (top <= 200) { // Move the note down top += pixelsPerFrame; $note.css("top", top); if (top + 20 > 200) { // The note hit the bottom of the panel currentNote.note = $note.data("note"); currentNote.time = getCurrentTime(); currentNote.$note = $note; if (practiceMode) pressPianoKey($note.data("note")); } } else { // Note ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required