How to Add Timing to Your HTML5 Game - dummies

How to Add Timing to Your HTML5 Game

By Andy Harris

Often the passage of time will be an element in your HTML5 games. Racing games are all about speed, or you may have a time limit for performing some task. The simpleGame library includes a very handy timer object that allows you to manage time easily. The Timer object is created like any other JavaScript object. It has three methods:

  • reset(): This function initializes the timer and starts the elapsed time counter.

  • getCurrentTime(): This function returns the current system time at the moment it’s called. (Note that the time is in a special integer format, and it will not be recognizable by human readers.)

  • getElapsedTime(): Returns the number of seconds since the timer was created or the last reset (whichever is more recent).

In JavaScript and most other languages, date and time information is generally stored in a special integer format. Time is actually counted as a huge integer showing the number of milliseconds since midnight January 1, 1970.

Although this may seem like a really complicated scheme, it’s actually perfect for your use because what you really want to know is how much time has elapsed between two events. If you want to actually get the current date and time in a human-readable format, look up the JavaScript Date object.

For an example of timing, look at timerDemo.html:

<html lang="en-US">
 <meta charset="UTF-8">
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
  var timer;
  var output;
  var game;
  function init(){
   game = new Scene();
   output = document.getElementById("output");
   timer = new Timer();
  } // end init
  function update(){
   currentTime = timer.getElapsedTime();
   output.innerHTML = currentTime;
  } // end update
  function reset(){
  } // end reset
<body onload = "init()">
 <div id="output">empty</div>
 <button onclick = "reset()">
  reset timer

This example demonstrates a simple timer. It displays the number of seconds the page has been running. The timer can be reset with the (cleverly named) Reset Timer button.


This program is relatively simple, but it illustrates some very powerful ideas. Use this process to build your own time-sensing game:

  1. Create a variable for the timer.

    This should be getting familiar. All the interesting elements are objects, and the timer is no exception. Create a variable called timer that will be an object of type Timer.

  2. Reset the timer.

    Be sure the timer starts out at zero.

  3. Get the elapsed time in every frame.

    In the update() function, call the timer’s getElapsedTime() method to find out how much time has passed and copy this value to the output area.

  4. Reset the timer when the user presses the button.

    When the user presses the reset button, call the timer’s reset() method to reset the elapsed time back to zero.

  5. Hide the main scene.

    This program uses the main loop from simpleGame, but it doesn’t really need to display the scene. For this reason, the Scene object has a hide() method. You can also display the scene later with its show() method.