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

Figure 4-3. Screenshot of a creative track on marblerun.at
Split the big thing into small components
Now it's time to get back to our little app. The first step with every application is to make a basic plan of
how it's going to be structured. Everything seems very easy at first, but it's for sure that it will turn into
more code than you originally expected. Therefore, you always need a well thought-out base to build your
application upon.
The good thing with HTML- and JavaScript-based applications is that the technology itself forces you into
some kind of structure. With CSS files, the styling of the page is automatically separated from the content that
is included in the HTML. So, the interactive user input and the game logic all takes place in JavaScript.
To get this started, we create a folder that will hold our application. Let's name that folder create-save-
load-tracks . Inside that folder, we now create the basic structure. First of all, there is the HTML file
index.html , which will hold our entire markup. Currently it's an empty file; we will go over the HTML
markup itself a little later.