Game Development Reference
In-Depth Information
as we'll learn in the chapters to follow, there are a few techniques, tools, and APIs
available to us in HTML5 that are far more appropriate for game development.
Also, as is common to this topic, most game elements will be kept to a minimum in
terms of complexity, so that it can be explained and understood easily. Specifically
in this game, we'll only use SVG graphics as a proof of concept instead of diving
deeply into the potential and opportunity available to us through the SVG standard.
The same goes for drag-and-drop, as there is so much more that can be done with
it.
Code structure
The way this code is structured is very straightforward. Every element in the game
is absolutely positioned through CSS, and each element is made up of some HTML
container styled with a background image or some CSS3 properties that give it a
fresh look with rounded corners, drop shadows, and so on. Also, although some
people might prefer object oriented programming to functional programming, and
better cohesion instead of global variables everywhere, we'll take exactly that ap-
proach in this game, and focus on the HTML5 aspects instead of the design of the
game. The same goes for the style and quality of the graphics. All that you see in this
game was created by myself using a free photo editor program, and it took me no
longer than 30 minutes to create all of the graphics you see in the game. This was
mostly to show that fun games can be built even if you're on a budget, or don't have
a dedicated graphics design team.
Since we're loading all of the SVG entities right inline with our HTML structure, we
place them inside a
div
container that is hidden from the user, then we clone each
entity that we need a copy of and use it on the game. We use this technique for all
of the jellies and the hero. The hero SVG is left the same as what was exported from
the vector editor software. The jelly SVG is slightly modified by removing all of the
colors that they were designed with, and replaced with CSS classes. This way we
can create different CSS classes that specify different colors, and each new instance
of the jelly SVG is assigned a random class. The final result is one single SVG model
hidden inside the invisible
div
container, and each instance of it, using zero extra
code, is given a different color to add variety to the game. We could also have ran-
domly assigned a different size and rotation to each jelly instance, but this was left
out for an exercise to the reader.
