Creating, Saving, and Loading Tracks - HTML5 Games Most Wanted - page 89

This might look a little complicated, but it's actually very simple. First, we use jQuery to create an empty
<p> tag and an <a> tag. We can leave the href of the <a> empty, but still set a href attribute. Why? That
way the browser still marks it as a link. But we don't want it to behave as a regular link and, therefore, we
once again overwrite the click functionality with jQuery's click function.
Note Entry and link are already jQuery nodes, so we can use the jQuery API on them,
including click, append, etc.
Whenever the user clicks on the link, it should trigger a function called loadTrack() . We will go over that
one in just a minute.
Now we wrap it all up, putting it all together in the right way. We put the link into the <p> tag and add a little
string that contains the name. So if the function would be called with a track name such as My Track, it
would create the following DOM node structure:
<p id="tracks-container">
<a href="">Saved Tracks</a> - My Track
</p>
Let's add this to our prepared container and we are good to go—almost! We still have one little thing to
take care of. When the user clicks the “load” link, it will trigger a function called loadTrack with the ID of
that track passed to it.
function loadTrack(ID) {
grid.bricks = store.getTrack(ID);
draw();
}
All we have to do is retrieve the right array of bricks from the store. We use the passed ID for that and it
will give us an array in the exact structure we need. So we take that array and overwrite the bricks array on
the grid with it.
If we redraw the scene, we have the load functionality completed.
Summary
Guess what? You are finished with our little demo application. Congratulations!
In modern software development, it's generally a good idea to look back at a project once it's done and
reflect on how things went. Since this is a little hard to do in a book, we will focus on the things we think
you have learned.
The most important thing is that you built something functional from scratch. You started with zero lines of
code, HTML markup, and CSS rules. But you built, line by line, a really cool little application. Since the
application is split into components, you also got a good sense of how this can be done in the other
projects that you will hopefully tackle soon.