HTML and CSS Reference
In-Depth Information
Engage thrusters
We have prepared the graphics. Let's work on the code to add the level-choosing logic:
1. This is something related to the view, so we will put the code in the view.js ile.
The graphics are already defined and exported. We create the following method
to show scoreBoard in the game scene. The scoreboard symbol shows the
player's score:
game.view.showScoreBoard = function(){
this.scoreBoard = new lib.ScoreBoard();
this.scoreBoard.x = 10;
this.scoreBoard.y = 10;
game.stage.addChild(this.scoreBoard);
};
2. We create the following funcion to update the text with the latest score:
game.view.updateScore = function() {
this.scoreBoard.textField.text = game.score + '';
};
3. The level selecion interface is a litle bit longer. We detect the click on the let
and right arrows:
// level selection
var levelSelection = new lib.LevelSelection();
game.stage.addChild(levelSelection);
levelSelection.levels.stop();
levelSelection.rightButton.on('click', function(){
var next = levelSelection.levels.currentFrame + 1;
levelSelection.levels.gotoAndStop(next);
});
levelSelection.leftButton.on('click', function(){
var prev = levelSelection.levels.currentFrame - 1;
levelSelection.levels.gotoAndStop(prev);
});
4. Now, we only start the physics world after a level is selected. We update the game
start method to put the world level creaion logic inside the click event handler of
the play buton. We also need an isPlaying Boolean to control the game flow:
// start the game play
var isPlaying = false;
levelSelection.playButton.on('click', function() {
levelSelection.parent.removeChild(levelSelection);
 
Search WWH ::




Custom Search