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:
update the game (with n tick)
display the game's actual state
handle user input
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:
The HTML5 canvas your graphics will be displayed on
A game world object that describes all the states and entities of your game
A game loop started and set up to work with your game
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.
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>