HTML and CSS Reference
In-Depth Information
Everything is set up to maintain your game's objects. Now let's create them. You'll start
with the simplest objects and work your way toward more complex ones in the next sec-
tion.
7.3.2. Design patterns, dynamic object creation, and input
Every game object created will follow a design pattern with specific methods. You'll place
all nonchanging properties for an object at the top before any methods. Some of these
properties will include path data, width, height, speeds, and so on. All objects require an
init()
method that handles all necessary setup for x/y coordinates and timers and resets
properties.
init()
, which should also call to an object's
build()
method if necessary,
will create any DOM-related data. Use
update()
to execute any logic that needs to fire
inside a timer. The last method you'll need to use is
collide()
, which handles collision
logic. To review how your objects are structured, see
table 7.4
.
Table 7.4. An explanation of major methods used in the SVG Aliens design pattern
Method
Explanation
Constant properties
All unchanging properties are set up before any methods.
init()
Place all setup logic in this method, except DOM element creation.
build()
Anything related to creating DOM elements.
update()
Logic that fires every time a timer is updated.
collide()
Logic that resolves a collision caused by hitting a laser.
Now that you know how to organize your objects, let's start programming one of the larger
UFOs.
Step 3: Create the big UFO
Big UFOs (see
figure 7.8
)
spawn out of view in the top left after a set amount of time.
You'll want to create them at an x coordinate equal to negative their width so they're hid-
