HTML and CSS Reference
In-Depth Information
6. The flow related to choosing the building starts from HUD . The selecion of a building
triggers the readyToPlaceBuilding event. The Board object captures this event
and toggles the isAddingBuilding state:
// Event Handlings
Board.prototype.readyToPlaceBuilding = function(e) {
this.upcomingBuildingType = e.buildingType;
this.isAddingBuilding = true;
};
7. When the mouse moves on the board during the state of adding a building, we show
the selector on the ile where the cursor is poining to:
Board.prototype.onMouseMove = function(e) {
if (!this.isAddingBuilding){ return; }
var pos = this.globalToLocal(e.stageX, e.stageY);
// convert to tile row and col
var rowCol = this.screenToRowCol(pos.x, pos.y);
var pos = this.rowColToScreen(rowCol.row, rowCol.col);
this.selection.visible = true;
// finally set the position
this.selection.x = pos.x;
this.selection.y = pos.y;
};
8. When we perform a mouse click on the board, we determine which ile it is and
place a building on that ile:
Board.prototype.onClick = function(e) {
if (!this.isAddingBuilding){ return; }
//coordinate conversion
var pos = this.globalToLocal(e.stageX, e.stageY);
var rowCol = this.screenToRowCol(pos.x, pos.y);
var row = rowCol.row;
var col = rowCol.col;
// check out of bound
if (row < 0 || row >= this.rows || col < 0 || col >= this.cols)
{ return; }
if (this.buildingMap[col][row] === undefined) {
this.addBuildingAtTile(this.upcomingBuildingType, col, row);
 
Search WWH ::




Custom Search