HTML and CSS Reference
The Player sprite has a lot more going on than the Bullet or the Enemy . The init method sets up a
custom set of collisionPoints to allow better interaction with tiles. It also binds to events for collisions,
jumping, and firing bullets.
The fire method, called when the player fires a bullet, plays the fire_right or fire_left animation
at a higher priority level to prevent any other animation from overriding it. The damage callback is called
whenever the blob hits the player. After the full fire animation plays, the animation engine triggers an event that
lets the player know it's time to actually drop the Bullet sprite onto the Canvas.
The tile method is used to track collisions with tiles with the sole purpose to track whether the player is
standing on a tile. The standing property it calculates is used with the jump method to launch the player into
the air but only if he is currently standing on solid ground.
Finally, the most complicated method, step , has the responsibility to play the right animation and update
the player's speed as he runs around the screen.
It has a few different states to consider: firing bullets, falling, running, or standing. The first is considered
the most important and overrides the other animations. The falling animation is the second most important state
because if the player is jumping, his feet shouldn't be walking on air. Next, the running animations in each dir-
ection are played if the player holds down right or left. If none of those conditions are true, the player stands
stiffly, pointed in whatever direction the player left him.
You should now be able to walk, jump, and shoot bullets around the short level defined in level.json .
You can see the final game running on an iPhone in Figure 18-2 .