Multiply Defense - HTML5 Game Development - page 136

5. The other case to remove a box is when the player successfully matches a box with
the calculaion's result. We need to ind a box with the given number. Let's add the
following funcion to the gameView object:
game.gameView = {
findNumberBoxWithValue: function(value) {
for (var i=0, len=this.numberBoxes.length; i<len; i++) {
var box = this.numberBoxes[i];
if (box.value === value) {
return box;
}
}
},
// existing gameView code goes here
};
6. On every player's input, we will tell the game logic to check the matching. Put the
following checkResult call inside the input click handlers:
control.onclick = function() {
// existing code goes here.
game.checkResult();
};
7. The game logic will ask the game view to find a box with the given value. If this box
exists, the game removes the box with a success signal:
game.checkResult = function() {
var box = game.gameView.findNumberBoxWithValue(game.calculation.
result);
if (box) {
game.gameView.showCircle(box.x, box.y);
game.gameView.removeNumberBox(box);
game.calculation.clearInputs();
}
};
8. When removing iles, we want to make it clear and obvious. We will show a circle for
a few seconds to let players know they did something correctly:
game.gameView = {
showCircle: function(x, y) {
var circle = new createjs.Bitmap('images/circle.png');
circle.x = x || 0;
circle.y = y || 0;
game.stage.addChild(circle);
createjs.Tween.get(circle).wait(500).to({alpha:0}, 1000).
call(function(){
game.stage.removeChild(circle);
});