How to Build Animation with simpleGame.js Your HTML5 Game - dummies

How to Build Animation with simpleGame.js Your HTML5 Game

By Andy Harris

It’s possible to build a library that simplifies all of the various HTML5 game engine features. Consider using the library: simpleGame.js. This library is easy to use and is fully capable of sophisticated game development. To get started, you really need to understand only two objects:

  • The scene: This object starts with an HTML canvas object and adds the main loop. The scene is the unifying object that controls the game.

  • Sprites: These objects are the elements that move around on the screen. Most of the game elements are sprites. Each sprite must belong to a single scene, but you can have as many sprites as you want. A sprite is based on an image.


This code is actually a lot more sophisticated than it looks. Here’s what it does:

  • It adds a canvas to the page. The gray rectangle is actually a canvas tag that’s been automatically added to the page.

  • It begins a game loop. This program has a game loop already running at 20 frames per second.

  • It contains a sprite. The ball image is a sprite, which has the capability to move any speed in any direction and other interesting features like collision detection built in.

  • The ball is moving. It automatically wraps to the other side of the screen when it leaves one side.

Here’s the entire code listing:

<html lang="en-US">
 <meta charset="UTF-8">
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
 //simple game with a single moving ball
 var scene;
 var ball;
 function init(){
  scene = new Scene();
  ball = new Sprite(scene, "redBall.png", 50, 50);
 } // end init
 function update(){
 } // end update
<body onload = "init()">

You begin with a basic HTML5 page and add a few features to turn it into a gaming environment.

How to build your game page

Begin by building the underlying page:

  1. Begin with an HTML5 page.

    You can use the same tools you’ve been using for your other web development. Build a basic HTML5 template like you do for any other HTML5 document.

  2. Import the simpleGame.js library.

    This library is available for free from the website. Use a <script> tag to import the library. Set the src property to the name of the library (simpleGame.js).

  3. Keep the HTML simple.

    You don’t need much. The game engine will create a canvas containing the scene. You might put a title, instructions, or other tools like scoreboards on the page, but the game engine will do most of the work.

  4. Call init() when the body loads.

    It’s very common to have a function called when the body loads. Add onload = “init()” to the body tag to call the init() method.

  5. Create a second script tag to contain your code.

    You need to have a second script tag for custom code. Place this after the tag that imports the library.

  6. Place two functions in your script.

    All simpleGame programs will have at least two functions: init() happens on startup, and update() happens once per frame.

How to initialize your game

The initialization part of the game happens as the page loads. It’s mainly taken up with setting up sprites and other resources. Here’s the code:

 var scene;
 var ball;
 function init(){
  scene = new Scene();
  ball = new Sprite(scene, "redBall.png", 50, 50);
 } // end init

Most games will use a similar style of initialization. Here’s how you set up the game:

  1. Define a variable to contain the scene.

    Every simpleGame game will have at least one scene object. Define the scene outside any functions, so it is available to all of them. You will actually create the scene inside the init() function.

  2. Define a variable for each sprite.

    Every sprite in your game will need to belong to a global variable as well. You’ll create the sprites in the init() function, but you need to make the variable available to all functions.

  3. Build the init() function.

    This function is called by body onload. It will run after the page has loaded into memory.

  4. Create the scene.

    To build the scene, create an instance of the scene class. What you’re really saying is “Make me a Scene object and call this particular instance ‘scene.’” The scene doesn’t require any parameters.

  5. Create the ball sprite.

    The ball is a Sprite instance. To make a sprite, you need a few more bits of information. You need a scene, an image filename, width, and height.

  6. Set the ball’s movement angle.

    You can change the angle the ball moves. The angles are measured in degrees like on a map.

  7. Set the ball’s movement speed.

    You can also determine the speed of the ball.

  8. Start the scene.

    When you’re done setting everything up, tell the scene to start.

Update the game animation

After you start the scene, a timer will begin. Twenty times a second, it will call a function on your page called update(). So, you need to have such a function, and it needs to have some code for your game to run.

The update() function is not terribly difficult either.

 function update(){
 } // end update

The update() function typically does three things:

  • Clears the previous screen: The first order of business is to clean up any mess caused by the last screen. The Scene object has a clear() function for exactly this purpose.

  • Checks for events: Typically, you check for events, like user input, sprites crashing into each other, sprites leaving the screen, or whatever. For this simple animation, the only event is a sprite leaving the screen, and the behavior associated with this action has been automated.

  • Updates each sprite: The final part of the screen update is updating the sprites. When you update a sprite, it will draw in its new position.

Here’s what happens if you don’t clear the screen. All the sprite motion will be drawn on the canvas, and it looks like a big smear rather than a moving ball.