Building an Isometric City Game - HTML5 Game Development - page 175

4. The setupMouseInteraction funcion is quite a long funcion. We set up a ghost
building to temporarily illustrate where the building is going to be placed. We also
define three event-handling callbacks. The skeleton of the temporary building is
as follows:
CityLayer.prototype.setupMouseInteraction = function() {
// a ghost building
var ghostBuilding = new game.CoinsGenerator();
ghostBuilding.alpha = 0.5;
ghostBuilding.visible = false;
this.addChild(ghostBuilding);
// change ghost building visual based on the building choice.
var _this = this;
game.on('newBuildingToBePlaced', function(){
// initial logic for every new building placement
});
// mouse move on city layer
game.stage.on('stagemousemove', function(e) {
// mouse over logic
});
this.on('click', function(e){
// click logic
});
};
5. We deined three funcions in the previous step without content. In the following
three steps, we will define their logic accordingly. The following is the code to
handle the newBuildingToBePlaced event inside the city layer:
game.on('newBuildingToBePlaced', function(){
_this.removeChild(ghostBuilding);
ghostBuilding = new game
[game.buildingTypeToBePlaced]();
ghostBuilding.alpha = 0.5;
ghostBuilding.visible = false;
_this.addChild(ghostBuilding);
});