Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Add Collisions to Your HTML5 Game

The most interesting things in HTML5 video games happen when sprites conk and collide into each other. Game engines normally have some sort of tool for testing whether two sprites are overlapping. This is called collision detection, and it can be done a number of ways. This example uses the standard bounding rectangle scheme. It's not perfect, but it's very easy to implement and is commonly used.

How to set up bounding rectangle collisions in your game

Take a look at colTest.html and you'll see a simple example.

image0.jpg

In the colTest.html example, the user moves the critter with the mouse, and you'll get a message when the critter is touching the box in the middle of the screen.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>colTest.html</title>
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
  var game;
  var box;
  var critter;
  var output;
 
  function init(){
   game = new Scene();
   game.hideCursor();
   box = new Sprite(game, "simpleBox.png", 50, 50);
   critter = new Sprite(game, "critter.gif", 50, 50);
   output = document.getElementById("output");
  
   //give box fixed position
   box.setPosition(200, 150);
   box.setSpeed(0);
  
   //critter controlled by mouse
   critter.setPosition(100, 100);
   critter.setSpeed(0);
   critter.followMouse = function(){
    this.setX(document.mouseX);
    this.setY(document.mouseY);
   } // end followMouse
   game.start();
  } // end init
 
  function update(){
   game.clear();
   critter.followMouse();
   checkCollisions();
   box.update();
   critter.update();
  } // end update;
 
  function checkCollisions(){
   if (box.collidesWith(critter)){
    output.innerHTML = "Collision";
   } else {
    output.innerHTML = "No collision";
   } // end if
  } // end checkCollisions
 
 </script>
</head>
<body onload = "init()">
 <div id = "output">empty</div>
</body>
</html>

A number of interesting things are happening in this code:

  1. Hide the normal mouse cursor.

    When you're going to have some other object follow the mouse, you normally want to hide the normal arrow cursor. In simpleGame, use the game.hideCursor() method to hide the mouse cursor inside the game screen.

  2. Create more than one sprite.

    It takes two to tango, or collide. In this example, the box will remain stationary, and a critter that follows the mouse.

  3. Give the critter a followMouse() method.

    In this example, you have the critter follow the mouse. Begin by creating a followMouse() method.

  4. Determine the mouse's position.

    The mouse position is determined (in simpleGame.js) with the document.mouseX and document.mouseY properties.

  5. Copy the mouse position to the critter position.

    Use the mouse's x position to set the critter's x position, and repeat with y.

  6. Call the critter's followMouse() method every frame.

    As usual, the update() function is where you put code that should happen repeatedly.

If you play around with the colTest.html page, you'll probably notice that the collisions are not exact. It's possible to have a collision register even when the critter isn't actually touching the box. This is important because simpleGame uses a scheme called bounding box collisions.

This means you're not actually checking to see whether the images collide but whether the rectangles around the images collide. In this example, the difference is minor, but you'll sometimes see significant errors with this mechanism, especially with elements that are long and thin. As a sprite rotates, the size of the bounding rectangle can change.

image1.jpg

Distance-based collisions for your game

An alternative form of collision detection, called bounding circle collisions, is available. With this mechanism, you simply calculate the distance between the center of two sprites, and if that value is smaller than some threshold, you consider it a collision. This approach has two advantages:

  • The collision distance is constant. The distance between image centers will not change when images are rotated, even if the images change size.

  • The collision threshold can be varied. You can set any sensitivity you want. Set a large collision radius for easy collisions and a smaller one when you want collisions to be triggered only when the sprites are very close to each other.

The simpleGame library Sprite object has a distanceTo() method, which calculates the distance from one sprite to another. You can see an example of this code in the distance.html example:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>distance.html</title>
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
  var game;
  var box;
  var critter;
  var output;
 
  function init(){
   game = new Scene();
   game.hideCursor();
   box = new Sprite(game, "simpleBox.png", 50, 50);
   critter = new Sprite(game, "critter.gif", 50, 50);
   output = document.getElementById("output");
  
   //give box fixed position
   box.setPosition(200, 150);
   box.setSpeed(0);
   critter.setPosition(100, 100);
   critter.setSpeed(0);
  
   //critter controlled by mouse
   critter.followMouse = function(){
    this.setX(document.mouseX);
    this.setY(document.mouseY);
   } // end followMouse
   game.start();
  } // end init
 
  function update(){
   game.clear();
   critter.followMouse();
   checkDistance();
   box.update();
   critter.update();
  } // end update;
 
  function checkDistance(){
   dist = box.distanceTo(critter);
   if (dist < 50){
    output.innerHTML = "Collision: " + dist;
   } else {
    output.innerHTML = "No collision: " + dist;
   } // end if
  } // end checkDistance
 
 </script>
</head>
<body onload = "init()">
 <div id = "output">empty</div>
</body>
</html>

The distance-based collision method is very similar to the bounding-rectangle version. Create a checkDistance() function that will act just like the old checkCollisions(). Here are the steps for what happens in checkDistance:

  1. Find the distance between the two sprites.

    Use the sprite's distanceTo() method to determine the distance between the two sprites.

  2. If the distance is less than some threshold, count it as a collision.

    Generally you should use the width of the smaller sprite as a starting point for a collision threshold, but you can adjust this to make collisions more or less likely.

  3. Report the collision status.

    In this example, simply print “collision” or “no collision,” but in a real game, collisions are triggers for other actions: increasing the score, decreasing the number of lives, changing the speed or position of the collided elements, or whatever. (Hopefully, it involves explosions.)

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!