How to Check Boundaries in Your HTML5 Game

By Andy Harris

Once sprites begin moving, there is always the possibility they’ll leave the boundaries of the screen. Typically, HTML5 game developers respond in one of five ways: wrap, bounce, stop, die, or continue. The simpleGame library has a boundary-checking routine that allows you to specify which of these default behaviors to use. The sprite’s boundAction property indicates which action should be used. You can use the boundary-checker to do the following:

  1. Determine the borders.

    The borders are determined by the canvas width.

  2. Check to see if the user is off a border.

    Then, another series of variables were made that contain Boolean values indicating whether the sprite is off one of the borders: offRight, offLeft, offTop, and offBottom. Use basic if statements to determine if the sprite is off the screen in one of these ways.

  3. Determine the boundary action.

    Use a simple if statement to determine which boundary action is currently set for the sprite.

  4. If the boundAction is WRAP:

    Change the x or y variable to the opposite side, but leave the dx and dy values alone.

  5. If the boundAction is BOUNCE:

    Invert dy if the sprite bounced off the top or bottom, and dx if the sprite bounced off the left or right. It’s not necessary to change x or y directly.

  6. If the boundAction is STOP:

    Simply set the speed to zero regardless of which boundary was exited.

  7. If the boundAction is DIE:

    Set the speed to zero and invoke the sprite’s hide() method. This will cause the sprite to disappear and no longer be considered in collision calculations.

  8. Any other boundAction is considered CONTINUE.

    No action is necessary here because the sprite will continue moving even though it’s not visible. If this is the desired effect, you should somehow indicate to the user where the sprite is, or provide some way for the sprite to return.

Here is part of the code for the collision-checking routine:

 offRight = false;
 offLeft = false;
 offTop = false;
 offBottom = false;
 if (this.x > rightBorder){
  offRight = true;
 if (this.x < leftBorder){
  offLeft = true;
 if (this.y > bottomBorder){
  offBottom = true;
 if (this.y < 0){
  offTop = true;
 if (this.boundAction == WRAP){
  if (offRight){
   this.x = leftBorder;
  } // end if
  if (offBottom){
   this.y = topBorder;
  } // end if
  if (offLeft){
   this.x = rightBorder;
  } // end if
  if (offTop){
   this.y = bottomBorder;
 } else if (this.boundAction == BOUNCE){
  if (offTop || offBottom){
   this.dy *= -1;
   this.imgAngle = this.moveAngle;
  if (offLeft || offRight){
   this.dx *= -1;
   this.imgAngle = this.moveAngle;
 } else if (this.boundAction == STOP){
  if (offLeft || offRight || offTop || offBottom){
 } else if (this.boundAction == DIE){
  if (offLeft || offRight || offTop || offBottom){
 } else {
  //keep on going forever
 } // end checkbounds

If you want to change a sprite’s boundary action in simpleGame, you can use the setBoundAction() method to do so.

Note that a few situations may require different behaviors. For example, you may want to wrap around the sides but stop at the top or bottom. If you need a more specific behavior, just build a new checkBounds() method for your sprite. However, you’ll need to check all boundaries because your new checkBounds() will completely overwrite the one built into simpleGame.