How to Build a Library of Reusable Objects for Your HTML5 Game - dummies

How to Build a Library of Reusable Objects for Your HTML5 Game

By Andy Harris

There will be times when you will reuse objects multiple times in your HTML5 games and they’re going to stay about the same. So, it makes sense to put them in a library for easy reuse. That’s exactly what you’re going to do. Take a look at frogLib.js:

//Objects for frog game
function Fly(){
 tFly = new Sprite(scene, "fly.png", 20, 20);
 tFly.wriggle = function(){
  //change direction by some random amount
  newDir = (Math.random() * 90) - 45;
 } // end wriggle
 return tFly;
} // end Fly
function Frog(){
 tFrog = new Sprite(scene, "frog.png", 50, 50);
 tFrog.maxSpeed = 10;
 tFrog.minSpeed = -3;
 tFrog.checkKeys = function(){
  if (keysDown[K_LEFT]){
  } // end if
  if (keysDown[K_RIGHT]){
  } // end if
  if (keysDown[K_UP]){
   if (this.speed > this.maxSpeed){
   } // end if
  } // end if
  if (keysDown[K_DOWN]){
   if (this.speed < this.minSpeed){
   } // end if
  } // end if
 } // end checkKeys
 return tFrog;
} // end setupFrog

This is an interesting document. It contains nothing but the two class definitions. It is used because several other programs will use these two classes.

Using a library is simplicity itself. Here’s the frogFly.html file that puts these two elements together in a single game:

<html lang="en-US">
 <meta charset="UTF-8">
 <script type="text/javascript"
   src = "simpleGame.js">
 <script type = "text/javascript"
   src = "frogLib.js"></script>
 <script type="text/javascript">
 var scene;
 var frog;
 var fly;
 var leaves;
 function init(){
  scene = new Scene();
  frog = new Frog();
  fly = new Fly();
  leaves = new Sprite(scene, "leaves.png", 640, 480);
 } // end init
 function update(){
 } // end update();
<body onload = "init()">

This program doesn’t introduce much that’s new. It simply implements the elements defined in the library, according to these steps:

  1. Import the froglib.js library.

    The frogLib file is simply a JavaScript file. Import it in the same way you import the simpleGame.js file, with a separate <script> tag.

  2. Create the sprites.

    The leaves sprite is just an ordinary sprite. Build the frog and fly just like you did before, even though they’re defined in another file. (If the frog or fly doesn’t get created, make sure you imported the library correctly.)

  3. Manage change.

    The update() function takes responsibility for control of the game. This is where you manage all of the various sprite behaviors: Tell the frog to look for keystrokes (with the frog.checkKeys() method), and tell the fly to wriggle (with the fly.wriggle() method).

  4. Draw the sprites.

    Once you’ve handled everything that caused the sprites to change, draw the sprites on the screen. Draw each sprite by invoking its update() method. Sprites are drawn in order, so anything you want to have in the background should be drawn before items that will display in front. (The frog will appear on top of the background, so the frog should be drawn after the background on each screen update.)