In the blog: Node.js static http server with GZIP support (for Heroku)
Subscribe for code updates

jQuery Game Loop
and Super Lightweight HTML5 Game Engine

This GameLoop maintains a constant game speed with maximum FPS.

On slow hardware, the display FPS will drop, but the game will maintain the tick frequency and will provide that to your game world.
The game runs seamlessly on fast hardware, with the maximum FPS you have set.

This is a demo page and some install instructions; the newest live demo will always be here.
For the fresh code and to see how amazingly free it is, go to Github.
Also, you might find other interesting things on my blog at wimagguc.com.

Demo

Use the buttons or the W, A, S, D keys to change direction.

Install

This package contains the Game Loop and a sample Game World that you can use to develop your game.

Your Game World object maintains all the states and entities of your game. In this there have to be three main functions to:
The Game Loop provides a cycle that will call the world's update and display functions with the FPS set.

To install this package and create your game, you will need the following:

Install 1/3: create the Game Loop and the Game World objects

My Game World needs two more classes: the CanvasHandler handles all canvas functions (eg. creating it and drawing the objects onto), whereas the Entities is a helper object to describe Pacman and Directions.

Create the gameLoop and demoWorld objects (note that the FPS is set to 25). After the document has been loaded, you are safe to start the gameLoop.
<script src="./js/wimagguc-gameloop.js"></script>
<script src="./js/wimagguc-pacman-entities.js"></script>
<script src="./js/wimagguc-world-demo-canvashandler.js"></script>
<script src="./js/wimagguc-world-demo.js"></script>
<script type="text/javascript">
  // To initialize the game you need:
  // - The gameLoop object that controls the game
  // - Your object the contains all the information of the world
  var gameLoop  = new Wimagguc.GameLoop(25);
  var demoWorld = new Wimagguc.DemoWorld();

  $( document).ready( function() {
    // Start the gameLoop; it will create an ID when it starts for the
    // first time
    var gameLoopID = gameLoop.start();
    
    // Initialize the world with the ID from the gameLoop so that you
    // can use multiple worlds with the same loop on the same page
    demoWorld.init('demoWorldContainer', gameLoopID, 25);
  });
</script>

Install 2/3: HTML5 canvas setup

The HTML5 canvas is the field the game will be displayed on. Place an empty div somewhere on the screen. You can use CSS to make this container prettier (the actual canvas will be attached to this object).
<div id="demoWorldContainer"></div>
Internet Explorer also needs a helper object for canvas support.
<!--[if IE]>
<script type="text/javascript" src="../excanvas.js"></script>
<![endif]-->

Install 3/3: add extra buttons and event handlers for user input

I added some buttons: start/stop, left/right/up/down, for the game controls.
The JS can be added the same place you create the gameLoop and gameWorld objects; the buttons go wherever they belong to in the HTML.
<script type="text/javascript">
  $( document).ready( function() {
    // Add event handlers for the buttons to start and stop the game loop
    $('#stopButton').bind('click',  gameLoop.stop);
    $('#startButton').bind('click', gameLoop.start);
			
    // It's a good idea to stop the game when the user doesn't see it anyway
    $(window).bind('blur',  gameLoop.stop);
    $(window).bind('focus', gameLoop.start);

    // Add event handlers for your gameWorld's function
    $('#directionLeft').bind('click', function() {
      if (gameLoop.isRunning()) { demoWorld.directionChangeWithButtons(1); }
    });
    
    $('#directionRight').bind('click', function() {
      if (gameLoop.isRunning()) { demoWorld.directionChangeWithButtons(2); }
    });
	
    $('#directionUp').bind('click', function() {
      if (gameLoop.isRunning()) { demoWorld.directionChangeWithButtons(3); }
    });
    
    $('#directionDown').bind('click', function() {
      if (gameLoop.isRunning()) { demoWorld.directionChangeWithButtons(4); }
    });

  });
</script>
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
			
<button class="direction" id="directionLeft">Left</button>
<button class="direction" id="directionRight">Right</button>
<button class="direction" id="directionUp">Up</button>
<button class="direction" id="directionDown">Down</button>

Lincense

Use it as is. Show me if you did something cool.

This code uses the jQuery Javascript library. To read more about it, go to jquery.com

Created By Richard Dancsi

Blog, updates: http://www.wimagguc.com/
Twitter, everyday reads: wimagguc
Google+, hanging out:

Subscribe for code updates

A rather infrequent newsletter about code updates, new free resources and every few months, a recap of the latest blog posts. Powered by MailChimp.