HTML and CSS Reference
In-Depth Information
game.view.showPowerIndicator = function(x, y) {
this.power.visible = true;
this.power.x = x;
this.power.y = y;
};
game.view.hidePowerIndicator = function() {
this.power.visible = false;
};
game.view.rotatePowerIndicator = function(rotation) {
this.power.rotation = rotation;
};
game.view.updatePowerBar = function(value) {
this.power.powerBar.scaleY = Math.min(30, value); // maximum
30 scaleY
};
}).call(this, game, createjs);
2. Then, we move to the
game.js
ile. When the game starts, we iniialize the
power indicator:
game.view.initPowerIndicator();
3. We use the cursor's posiion to calculate the ball-throwing angle. We listen to
the
mousedown
event on the
canvas
tag:
game.stage.on('stagemousedown', function(e){
if (!isPlaying) { return; }
var position = game.physics.ballPosition();
game.view.showPowerIndicator(position.x, position.y);
var rotation = game.physics.launchAngle(e.stageX, e.stageY);
game.view.rotatePowerIndicator(rotation * 180 / Math.PI); //
convert to degree
game.tickWhenDown = cjs.Ticker.getTicks();
game.view.updatePowerBar(0);
});
game.stage.on('stagemousemove', function(e){
if (!isPlaying) { return; }
var rotation = game.physics.launchAngle(e.stageX, e.stageY);
game.view.rotatePowerIndicator(rotation * 180 / Math.PI); //
convert to degree
});
