HTML and CSS Reference
In-Depth Information
Two helper methods—_ tileCollision and _hitTest —check an object against the tile layer and
against other sprites. _tileCollision calls the checkBounds method from the last section if the object
in question has a collision point's property or just returns false if not. The _hitTest is only a slightly mod-
ified version of the standard stage method. The only addition is the collision parameter, which checks if the
opposing sprite is the collision sprite, and if so, ignores it as the tile collisions are handled separately.
Finally, the collide method, which is called by each 2d sprite in each step, does the bulk of the work.
First, it checks if this sprite collides with the collision layer using a bitwise AND . If so, it loops over any potential
tile collisions and adjusts the position of the sprite based on how the collision tells it to resolve based on the col-
lision's returned destX and destY parameters (returned by the checkPoint method from TileLayer ).
The sprite also gets its velocity reset in whatever direction it collided (vertical or horizontal). Each collision also
triggers a hit event on the sprite that passes the collision object (the TileLayer ) along with a more specific
hit.tile event that passes the collision information itself, which allows the sprite to react to the direction of
its collision.
When the tile collisions are done, the sprite loops over any other sprites by calling detect with the afore-
mentioned _hitTest method, triggering hit events if a collision arrives.
Building the Game
With all the pieces in place, it's time to attack the game. The simple platformer built in this section uses a
shrunken-down version of the man from Chapter 16 along with some blobs as enemies. The game will have
only three sprites, the player, bullets, and blobs.
Boostrapping the Game
Start from the outside in and create the outline of the game before filling in the necessary sprite class. Open up
platform.js and replace it with the code from Listing 18-8 .
Listing 18-8: The platformer code
$(function() {
var Q = window.Q = Quintus()
.setup('quintus', { maximize: true })
Q.Enemy = Q.Sprite.extend({
Q.Player = Q.Sprite.extend({
Q.Bullet = Q.Sprite.extend({
Search WWH ::

Custom Search