HTML and CSS Reference
In-Depth Information
without any dependencies; doing so, however, means that this topic would contain more nongame-related code
and spend less time on actual game development.
When building a game in JavaScript, you don't need to reinvent the wheel for traditional patterns used in
game development. Although JavaScript has its quirks as a language, it's extremely malleable and can be mol-
ded to fit most programming styles you like. This doesn't mean that you can build a performant game any way
you want; certain styles of development lend themselves well to JavaScript's asynchronous, single-threaded
nature better than others.
Designing the Basic Engine API
The primary guts of the engine are housed in a single file called
quintus.js
. To make the engine do anything
useful, additional modules need to be pulled in for functions such as rendering and input. The Quintus engine
has a few specific requirements:
1.
You need to have multiple instances of the engine running on the same page. This requirement ensures
that the engine acts as a self-contained unit and doesn't interfere with itself or other parts of the page.
2.
Where possible, the engine should provide sensible defaults for options to prevent the need for a lot of
configuration to get something up and running.
3.
The engine should be flexible enough to be usable for both simple examples and more complex games
as well as allow support for different rendering engines (for example Canvas, CSS, SVG, and potentially
WebGL).
Working backward from these requirements,
Listing 9-1
shows a simple API for how a basic animated ex-
ample could be written.
Listing 9-1:
A simple Quintus API example
var MyExample = Quintus();
MyExample.load('assetName.png',function() {
var object = new MyExample.CanvasSprite({
asset: 'assetName.png', x: 0, y: 0
});
object.update = function(dt) {
// Code to update the object
};
MyExample.gameLoop(function(dt) {
this.clear();
object.update(dt);
object.render(this.ctx);
});
});
This simple example loads a single asset and creates a single object that is updated and drawn on the screen.
Although this might suffice for a limited example, a more full-featured use case would require the addition
of stage and scene functionality that automatically handles the updating and rendering of a number of objects.
