HTML and CSS Reference
In-Depth Information
7. Let's move to the
game.js
ile. We deine the game-staring logic that sets up the
EaselJS stage and Ticker. It creates the world and sets up the debug draw. The
tick
method calls the
physics.update
method:
;(function(game, cjs){
game.start = function() {
cjs.EventDispatcher.initialize(game); // allow the game object
to listen and dispatch custom events.
game.canvas = document.getElementById('canvas');
game.stage = new cjs.Stage(game.canvas);
cjs.Ticker.setFPS(60);
cjs.Ticker.addEventListener('tick', game.stage); // add game.
stage to ticker make the stage.update call automatically.
cjs.Ticker.addEventListener('tick', game.tick); // gameloop
game.physics.createWorld();
game.physics.showDebugDraw();
};
game.tick = function(){
if (cjs.Ticker.getPaused()) { return; } // run when not paused
game.physics.update();
};
game.start();
}).call(this, game, createjs);
After these steps, we should have a result as shown in the following screenshot. It is a physics
world with two bodies. One body stays in posiion and the other one falls to the botom.
