经典坦克大战欢迎来到程序小院
玩法：
键盘（A W S D）键来控制方向,空格键发射子弹，N：下一关，P：上一关，Enter：开始，赶紧去闯关吧^^
开始游戏
<canvas id="wallCanvas" ></canvas>
<canvas id="tankCanvas" ></canvas>
<canvas id="grassCanvas" ></canvas>
<canvas id="overCanvas" ></canvas>
<canvas id="stageCanvas" ></canvas>
css
#canvasDiv canvas{
position:absolute;
}
#canvasDiv{
margin:0 auto;
}
.demo-scroll{
overflow-y: scroll;
width: 100%;
height: 100%;
}
.column {
float: left;
width: 50%;
padding: 0 2em;
min-height: 300px;
position: relative;
}
.column:nth-child(2) {
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}
.column p {
font-weight: 300;
font-size: 2em;
padding: 0;
margin: 0;
text-align: right;
line-height: 1.5;
}
js
/**
* 绘制地图
*/
this.draw = function(){
this.wallCtx.fillStyle = "#4a4a4a";
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);
}
}
}
};
源码
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/
