Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Handling collision detection

In this task, we detect if the ball passes through the hoop and we reward the player with scores. We will also create a world boundary and remove balls that are out of bounds.

Prepare for lift off

The detection is done by placing a sensor between the hoop squares. The following figure shows how the sensor is placed:

For the boundary, it will be a long body that is placed at the bottom of the world, as shown in the following figure:

Engage thrusters

Let's add the sensor and handle the collision in the following steps:

  1. First, we append the createHoop method to create a body between the two little hoop squares. We set it as a sensor so that the balls can pass through it:

    physics.createHoop = function() {
      // existing hoop code goes here.
      // hoop sensor
      bodyDef.type = b2Body.b2_staticBody;
      bodyDef.position.x = (hoopX+20)/pxPerMeter;
      bodyDef.position.y = hoopY/pxPerMeter;
      bodyDef.angle = 0;
      fixDef.isSensor = true;
      fixDef.shape = new b2PolygonShape();