battlecity/js/map.js

155 lines
5.3 KiB
JavaScript
Raw Normal View History

2016-11-29 23:42:29 +08:00
var Map = function(wCtx,gCtx){
this.level = 1;
this.mapLevel = null;
this.wallCtx = wCtx;
this.grassCtx = gCtx;
this.offsetX = 32; //主游戏区的X偏移量
this.offsetY = 16;//主游戏区的Y偏移量
this.wTileCount = 26; //主游戏区的宽度地图块数
this.HTileCount = 26;//主游戏区的高度地图块数
this.tileSize = 16; //地图块的大小
this.homeSize = 32; //家图标的大小
this.num = new Num(this.wallCtx);
this.mapWidth = 416;
this.mapHeight = 416;
this.setMapLevel = function(level){
this.level = level;
var tempMap = eval("map"+this.level);
this.mapLevel = new Array();
for(var i=0;i<tempMap.length;i++){
this.mapLevel[i] = new Array();
for(var j=0;j<tempMap[i].length;j++){
this.mapLevel[i][j] = tempMap[i][j];
}
}
};
/**
* 绘制地图
*/
this.draw = function(){
this.wallCtx.fillStyle = "#7f7f7f";
this.wallCtx.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
this.wallCtx.fillStyle = "#000";
this.wallCtx.fillRect(this.offsetX,this.offsetY,this.mapWidth,this.mapHeight);//主游戏区
this.grassCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
for(var i=0;i<this.HTileCount;i++){
for(var j=0;j<this.wTileCount;j++){
if(this.mapLevel[i][j] == WALL || this.mapLevel[i][j] == GRID || this.mapLevel[i][j] == WATER || this.mapLevel[i][j] == ICE){
this.wallCtx.drawImage(RESOURCE_IMAGE,this.tileSize*(this.mapLevel[i][j]-1) + POS["map"][0], POS["map"][1],this.tileSize,this.tileSize,j*this.tileSize + this.offsetX, i*this.tileSize + this.offsetY,this.tileSize,this.tileSize) ;
}else if(this.mapLevel[i][j] == GRASS){
this.grassCtx.drawImage(RESOURCE_IMAGE,this.tileSize*(this.mapLevel[i][j]-1) + POS["map"][0], POS["map"][1],this.tileSize,this.tileSize,j*this.tileSize + this.offsetX, i*this.tileSize + this.offsetY,this.tileSize,this.tileSize);
}else if(this.mapLevel[i][j] == HOME){
this.wallCtx.drawImage(RESOURCE_IMAGE,POS["home"][0], POS["home"][1], this.homeSize, this.homeSize, j*this.tileSize + this.offsetX, i*this.tileSize + this.offsetY, this.homeSize, this.homeSize) ;
}
}
}
this.drawNoChange();
this.drawEnemyNum(maxEnemy);
this.drawLevel();
this.drawLives(0,1);
this.drawLives(0,2);
};
/**
* 画固定不变的部分
*/
this.drawNoChange = function(){
this.wallCtx.drawImage(RESOURCE_IMAGE, POS["score"][0], POS["score"][1], 30, 32, 464, 256, 30, 32);//player1
this.wallCtx.drawImage(RESOURCE_IMAGE, 30 + POS["score"][0], POS["score"][1], 30, 32, 464, 304, 30, 32);//player2
//30,32旗帜的size, 464, 352旗帜在canvas中位置
this.wallCtx.drawImage(RESOURCE_IMAGE, 60 + POS["score"][0], POS["score"][1], 30, 32, 464, 352, 32, 30);//画旗帜
};
/**
* 画关卡数
*/
this.drawLevel = function(){
this.num.draw(this.level,468, 384);
};
/**
* 画右侧敌方坦克数
* @param enemyNum 地方坦克总数
*/
this.drawEnemyNum = function(enemyNum){
var x = 466;
var y = 34;
var enemySize = 16;
for(var i=1;i<=enemyNum;i++){
var tempX = x;
var tempY = y + parseInt((i+1)/2)*enemySize;
if(i%2 == 0){
tempX = x + enemySize;
}
this.wallCtx.drawImage(RESOURCE_IMAGE,92 + POS["score"][0],POS["score"][1],14, 14,tempX, tempY,14, 14);
}
};
/**
* 清除右侧敌方坦克数从最下面开始清楚
* @param totolEnemyNum 敌方坦克的总数
* @param enemyNum 已出现的敌方坦克数
*/
this.clearEnemyNum = function(totolEnemyNum,enemyNum){
var x = 466;
var y = 34 + this.offsetY;
if(enemyNum <= 0){
return ;
}
var enemySize = 16;
this.wallCtx.fillStyle = "#7f7f7f";
var tempX = x + (enemyNum % 2)*enemySize;
var tempY = y + (Math.ceil(totolEnemyNum/2)-1)*enemySize - (parseInt((enemyNum-1)/2))*enemySize;
this.wallCtx.fillRect(tempX,tempY,14,14);
};
/**
* 画坦克的生命数
* @param lives 生命数
* @param which 坦克索引1代表玩家1 2代表玩家2
*/
this.drawLives = function(lives,which){
var x = 482;
var y = 272;
if(which == 2){
y = 320;
}
this.wallCtx.fillStyle = "#7f7f7f";
this.wallCtx.fillRect(x,y,this.num.size,this.num.size);
this.num.draw(lives,x,y);
//this.wallCtx.drawImage(RESOURCE_IMAGE,POS["num"][0]+lives*14,POS["num"][1],14, 14,x, y,14, 14);
};
/**
* 更新地图
* @param indexArr 需要更新的地图索引数组二维数组[[1,1],[2,2]]
* @param target 更新之后的数值
*/
this.updateMap = function(indexArr,target){
if(indexArr != null && indexArr.length > 0){
var indexSize = indexArr.length;
for(var i=0;i<indexSize;i++){
var index = indexArr[i];
this.mapLevel[index[0]][index[1]] = target;
if(target > 0){
this.wallCtx.drawImage(RESOURCE_IMAGE,this.tileSize*(target-1) + POS["map"][0], POS["map"][1],this.tileSize,this.tileSize,index[1]*this.tileSize + this.offsetX, index[0]*this.tileSize + this.offsetY,this.tileSize,this.tileSize) ;
}else{
this.wallCtx.fillStyle = "#000";
this.wallCtx.fillRect(index[1]*this.tileSize + this.offsetX, index[0]*this.tileSize + this.offsetY,this.tileSize,this.tileSize);
}
}
}
};
this.homeHit = function(){
this.wallCtx.drawImage(RESOURCE_IMAGE,POS["home"][0]+this.homeSize, POS["home"][1], this.homeSize, this.homeSize, 12*this.tileSize + this.offsetX, 24*this.tileSize + this.offsetY, this.homeSize, this.homeSize) ;
};
};