HTML and CSS Reference
right , or bottom , and if that point collides with something, it's easy to determine the reaction the sprite
should have. If the top of the sprite collides with an object, the engine can just move the sprite down until it's
no longer in contact. The same applies for each of the other directions. See Figure 18-1 .
Figure 18-1: Collision detection.
Using this algorithm, collision detection between arbitrarily shaped sprites and the world's tiles has been re-
duced to checking points against squares, an extremely inexpensive calculation.
Adding the 2-D Component
The first step to add in platformer collisions is to create a component that sprites can add to implement 2-D
collision detection as described earlier. This component will be called, not surprisingly “2d.” Its job is to allow
the setting of collision points. It can also steal the basic physics code from the last chapter to allow the sprite to
react to gravity and velocity.
Add the code for the 2-D component in Listing 18-5 to the bottom of quintus_platformer.js before
the final closing brace.
Listing 18-5: The 2-D component
Q.gravityY = 9.8*100;
Q.gravityX = 0;
Q.dx = 0.05;