How to Work with Multiple Objects in Your HTML5 Game - dummies

How to Work with Multiple Objects in Your HTML5 Game

By Andy Harris

It would be nice to have more than one object in your HTML5 game. Multiple objects make the game a bit more exciting and adds some depth. One object bumping around by itself isn’t much fun. What good are bugs if you can’t be infested with them?

image0.jpg

Because the game was created with object-oriented principles, it’s quite easy to add multiple flies. Here’s the code.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>multiFlies.html</title>
 <script type="text/javascript"
   src = "simpleGame.js">
 </script>
 <script type = "text/javascript"
   src = "frogLib.js"></script>
 <script type="text/javascript">
  var scene;
  var frog;
  var flies;
  var leaves;
  var scoreBoard;
  var hits;
  var ribbitMP3;
  var ribbitOGG;
  //var fly;
  var NUMFLIES = 3;
  function init(){
   scoreBoard = document.getElementById("scoreBoard");
   hits = 0;
   scene = new Scene();
   scene.setBG("green");
   frog = new Frog();
   setupFlies();
   leaves = new Sprite(scene, "leaves.png", 640, 480);
   leaves.setSpeed(0);
   ribbitMP3 = new Sound("ribbit.mp3");
   ribbitOGG = new Sound("ribbit.ogg");
   scene.start();
  } // end init
  function update(){
   scene.clear();
   frog.checkKeys();
   leaves.update();
   for (i = 0; i < NUMFLIES; i++){
    flies[i].wriggle();
    checkCollisions(i);
    flies[i].update();
   } // end for loop
   frog.update();
  } // end update();
  function setupFlies(){
   flies = new Array(NUMFLIES);
   for (i = 0; i < NUMFLIES; i++){
    flies[i] = new Fly();
   } // end for
  } // end setupFlies
  function checkCollisions(flyNum){
   if (frog.collidesWith(flies[flyNum])){
    flies[flyNum].reset();
    ribbitMP3.play();
    ribbitOGG.play();
    updateScore();
   } // end if
  } // end checkCollisions
  function updateScore(){
   //update the scoreboard
   hits += 1;
   scoreBoard.innerHTML = "Hits: " + hits
  } // end updateScore
 </script>
</head>
<body onload = "init()">
 <div id = "scoreBoard">Hits: 0</div>
</body>
</html>

Essentially, you turn a single fly into an array of flies. Every time you would have done something with a single fly, you iterate through the array of flies. Here are the highlights:

  1. Change the fly variable so it’s now called flies.

    Rather than a single fly variable, you’ll be working with an array of flies.

  2. Create a NUMFLIES constant.

    Store the number of flies in a special variable called NUMFLIES. This tracks the number of flies in the game. You can easily change this value to make the game harder or easier. Note that the value of NUMFLIES isn’t expected to change during a single run of the game, so you put it all in uppercase to indicate it’s a constant.

  3. Add a hits variable and a scoreboard div.

    This variable will keep track of the number of fly-frog collisions. There’s a corresponding div, which will display the score.

  4. Set up the flies.

    The setupFlies() function runs through a loop NUMFLIES times. Each time through the loop, it creates a fly and appends it to the numFlies array:

      function setupFlies(){
       flies = new Array(NUMFLIES);
       for (i = 0; i < NUMFLIES; i++){
        flies[i] = new Fly();
       } // end for
      } // end setupFlies
  5. Modify the update() function.

    Now that you have multiple flies, you need to make sure you update each element of the flies array. Again, use a for loop to go through the array. For each fly in the array, call its wriggle() method, check for collisions with the frog, and update:

      function update(){
       scene.clear();
       frog.checkKeys();
       leaves.update();
       for (i = 0; i < NUMFLIES; i++){
        flies[i].wriggle();
        checkCollisions(i);
        flies[i].update();
       } // end for loop
       frog.update();
      } // end update();
  6. Modify the checkCollisions() function.

    You need to make some minor changes to checkCollisions so it can check for a collision between the frog and the current fly. Simply pass a fly number to the function and use that index to make the collision check:

      function checkCollisions(flyNum){
       if (frog.collidesWith(flies[flyNum])){
        flies[flyNum].reset();
        ribbit.play();
        updateScore();
       } // end if
      } // end checkCollisions
  7. Update the scoreboard.

    The last step is to update the scoreboard. All this requires is to increment the number of hits and then change the scoreboard div to reflect the new number of hits:

  function updateScore(){
   //update the scoreboard
   hits += 1;
   scoreBoard.innerHTML = "Hits: " + hits
  } // end updateScore