Dan Cox | @videlais

A (Very) Brief
Pre-History of
HTML5 Games

HTML5 games
are based
on a hack.

(Sort of.)

The core of nearly every HTML5 game engine is the requestFrameAnimation API.

requestFrameAnimation dates back to 2011.

(Check out the original working draft.)

requestFrameAnimation solves two problems:

setInterval() is often slightly off (due to CPU and rendering issues), and it doesn't work well with sub-milliseconds timing.

What does this have to do with HTML5 games?

Everything.

To understand the connection of requestFrameAnimation to HTML5 games,
we need to turn to Paul Irish.

(Seriously, look him up.)

Paul Irish introduced a simple but powerful chunk of code that is the seed of HTML5 games.


window.requestAnimFrame = (function(){
	return  window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame    ||
	function( callback ){
		window.setTimeout(callback, 1000 / 60);
	};
})();

(function animloop(){
	 requestAnimFrame(animloop);
	 render();
})();
				

Simple, right?

This polyfill looping connected to the requestFrameAnimation creates fine-tuned control of timing and rendering.

This concept is at the core of HTML5 games.

Its legacy can be seen in projects
like Phaser and pixi.js.

Used with the <canvas> HTML element,

requestFrameAnimation allows for tweening and timing for physics calculations.

Without requestFrameAnimation, there would be no controlled rendering.

And without Paul Irish (and many others!), there would be no HTML5 games as we know them.