HTML and CSS Reference
In-Depth Information
game.stage.on('stagemouseup', function(e){
if (!isPlaying) { return; }
game.view.hidePowerIndicator();
game.tickWhenUp = cjs.Ticker.getTicks();
ticksDiff = game.tickWhenUp - game.tickWhenDown;
game.physics.shootBall(e.stageX, e.stageY, ticksDiff);
setTimeout(game.spawnBall, 500);
});
4. We need to update the power indicator to reflect the power value. We need to
do this inside the
tick
funcion:
game.tick = function(){
// existing code goes here.
// launch power preview
var ticksDiff = cjs.Ticker.getTicks() - game.tickWhenDown;
game.view.updatePowerBar(ticksDiff);
};
Let's test the game in the browser. When we press and hold the mouse buton, the power
arrow indicator displays the power bar growing unil we release the mouse. If we move
the mouse, the arrow always points from the ball to where the cursor is. The following
screenshot shows this effect:
