Game Development Reference
In-Depth Information
It's hard to convey all the details about this user interface from a single screenshot,
but the waves in that beautiful ocean are actually very smoothly animated, as well as
the boat, which floats freely and is tossed about by the waves. Also, although there
are exactly six images in the entire game, all of the components used in this game
are DOM elements. The boat, the waves, and the characters are done using divs,
images, and other semantic HTML5 elements. All of the animations are done using
native CSS3 features.
The rest of the chapter will list all of the HTML, CSS, and JavaScript features used
in the game, show examples of how to use them, and how they were used in the
game. The coding style used is geared towards simplicity, so don't mind the global
variables, the inconsistent use of object oriented principles, and the overall rudiment-
ary graphics. With the basic HTML5 concepts in place, you can take the game to the
next level by applying whatever additional improvements you may feel are neces-
sary to make the game more polished or scalable from a development perspective.
We'll organize the game into three separate files: an
index.html
file, where we'll
host all of the HTML structures and bring together the other two files, namely a CSS
file and a JavaScript file. This should be a pretty standard file structure but feel free
to adjust things to best fit your needs and habits.
