O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Determining a collision between the player and tiles

In this task, we will determine the collision between the player and obstacles tiles.

Prepare for lift off

We need an array to store the tile IDs (obstacles). Let's put the following code in the setting.js file:

game.BLOCKS = [100];

Engage thrusters

Let's add collision detection with the following steps:

  1. Inside the constructor of the Tile definition, we store a Boolean value to determine whether this tile is an obstacle. Since most of the tiles aren't obstacles, we initialize this variable with false:
    this.isBlock = false;
    for (var i = 0, len=game.BLOCKS.length; i < len; i++) {
      if (type === game.BLOCKS[i]) {
        this.isBlock = true;
      }
    };
  2. The following code inside the moveDown function of a tile, checks ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required