导语：
女朋友最近越来越难搞，一会儿植物大战僵尸，一会儿坦克大战，作为一名暖男，必须安排一波，这不，它又来了。
女朋友想玩游戏了。
安排！！
不多废话咱们直接来看效果。
1，效果图
吃到了暂停道具。
吃到了奖励生命一个。
打完所有的敌人进入下一关。
想要源码的小伙伴关注微信公众号【web小馆】，回复“坦克大战”，下载游戏源码
2，代码
实现还是挺简单的，只需要html，css，JavaScript就可以。
audio用于存放游戏的音效。
css用于存放游戏界面，还有样式。
images用于存放游戏里面各种各样的图片，比如坦克和砖头。
js坦克的动态攻击，和道具出现，作用等等。
（1）index.html
<!DOCTYPE html>
<html lang="zh" class="no-js demo-1">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.min.js"></script>
<script src="js/Helper.js"></script>
<script src="js/keyboard.js"></script>
<script src="js/const.js"></script>
<script src="js/level.js"></script>
<script src="js/crackAnimation.js"></script>
<script src="js/prop.js"></script>
<script src="js/bullet.js"></script>
<script src="js/tank.js"></script>
<script src="js/num.js"></script>
<script src="js/menu.js"></script>
<script src="js/map.js"></script>
<script src="js/Collision.js"></script>
<script src="js/stage.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<style type="text/css"> #canvasDiv canvas{ position:absolute; } </style>
</head>
<body>
<div class="container">
<head><h3>操作说明：玩家1：wasd上左下右，space射击；玩家2：方向键，enter射击。n下一关，p上一关。</h3></head>
<div class="main clearfix">
<div id="canvasDiv" >
<canvas id="wallCanvas" ></canvas>
<canvas id="tankCanvas" ></canvas>
<canvas id="grassCanvas" ></canvas>
<canvas id="overCanvas" ></canvas>
<canvas id="stageCanvas" ></canvas>
</div>
</div>
</div><!-- /container -->
</body>
</html>
（2）js
1，main.js
var ctx;//2d画布
var wallCtx;//地图画布
var grassCtx;//草地画布
var tankCtx;//坦克画布
var overCtx;//结束画布
var menu = null;//菜单
var stage = null;//舞台
var map = null;//地图
var player1 = null;//玩家1
var player2 = null;//玩家2
var prop = null;
var enemyArray = [];//敌方坦克
var bulletArray = [];//子弹数组
var keys = [];//记录按下的按键
var crackArray = [];//爆炸数组
var gameState = GAME_STATE_MENU;//默认菜单状态
var level = 1;
var maxEnemy = 20;//敌方坦克总数
var maxAppearEnemy = 5;//屏幕上一起出现的最大数
var appearEnemy = 0; //已出现的敌方坦克
var mainframe = 0;
var isGameOver = false;
var overX = 176;
var overY = 384;
var emenyStopTime = 0;
var homeProtectedTime = -1;
var propTime = 300;
$(document).ready(function(){
initScreen();
initObject();
setInterval(gameLoop,20);
});
function initScreen(){
var canvas = $("#stageCanvas");
ctx = canvas[0].getContext("2d");
canvas.attr({ "width":SCREEN_WIDTH});
canvas.attr({ "height":SCREEN_HEIGHT});
wallCtx = $("#wallCanvas")[0].getContext("2d");
grassCtx = $("#grassCanvas")[0].getContext("2d");
$("#wallCanvas").attr({ "width":SCREEN_WIDTH});
$("#wallCanvas").attr({ "height":SCREEN_HEIGHT});
$("#grassCanvas").attr({ "width":SCREEN_WIDTH});
$("#grassCanvas").attr({ "height":SCREEN_HEIGHT});
tankCtx = $("#tankCanvas")[0].getContext("2d");
$("#tankCanvas").attr({ "width":SCREEN_WIDTH});
$("#tankCanvas").attr({ "height":SCREEN_HEIGHT});
overCtx = $("#overCanvas")[0].getContext("2d");
$("#overCanvas").attr({ "width":SCREEN_WIDTH});
$("#overCanvas").attr({ "height":SCREEN_HEIGHT});
$("#canvasDiv").css({ "width":SCREEN_WIDTH});
$("#canvasDiv").css({ "height":SCREEN_HEIGHT});
$("#canvasDiv").css({ "background-color":"#000000"});
}
function initObject(){
menu = new Menu(ctx);
stage = new Stage(ctx,level);
map = new Map(wallCtx,grassCtx);
player1 = new PlayTank(tankCtx);
player1.x = 129 + map.offsetX;
player1.y = 385 + map.offsetY;
player2 = new PlayTank(tankCtx);
player2.offsetX = 128; //player2的图片x与图片1相距128
player2.x = 256 + map.offsetX;
player2.y = 385 + map.offsetY;
appearEnemy = 0; //已出现的敌方坦克
enemyArray = [];//敌方坦克
bulletArray = [];//子弹数组
keys = [];//记录按下的按键
crackArray = [];//爆炸数组
isGameOver = false;
overX = 176;
overY = 384;
overCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
emenyStopTime = 0;
homeProtectedTime = -1;
propTime = 1000;
}
function gameLoop(){
switch(gameState){
case GAME_STATE_MENU:
menu.draw();
break;
case GAME_STATE_INIT:
stage.draw();
if(stage.isReady == true){
gameState = GAME_STATE_START;
}
break;
case GAME_STATE_START:
drawAll();
if(isGameOver ||(player1.lives <=0 && player2.lives <= 0)){
gameState = GAME_STATE_OVER;
map.homeHit();
PLAYER_DESTROY_AUDIO.play();
}
if(appearEnemy == maxEnemy && enemyArray.length == 0){
gameState = GAME_STATE_WIN;
}
break;
case GAME_STATE_WIN:
nextLevel();
break;
case GAME_STATE_OVER:
gameOver();
break;
}
}
$(document).keydown(function(e){
switch(gameState){
case GAME_STATE_MENU:
if(e.keyCode == keyboard.ENTER){
gameState = GAME_STATE_INIT;
//只有一个玩家
if(menu.playNum == 1){
player2.lives = 0;
}
}else{
var n = 0;
if(e.keyCode == keyboard.DOWN){
n = 1;
}else if(e.keyCode == keyboard.UP){
n = -1;
}
menu.next(n);
}
break;
case GAME_STATE_START:
if(!keys.contain(e.keyCode)){
keys.push(e.keyCode);
}
//射击
if(e.keyCode == keyboard.SPACE && player1.lives > 0){
player1.shoot(BULLET_TYPE_PLAYER);
}else if(e.keyCode == keyboard.ENTER && player2.lives > 0){
player2.shoot(BULLET_TYPE_ENEMY);
}else if(e.keyCode == keyboard.N){
nextLevel();
}else if(e.keyCode == keyboard.P){
preLevel();
}
break;
}
});
$(document).keyup(function(e){
keys.remove(e.keyCode);
});
function initMap(){
map.setMapLevel(level);;
map.draw();
drawLives();
}
function drawLives(){
map.drawLives(player1.lives,1);
map.drawLives(player2.lives,2);
}
function drawBullet(){
if(bulletArray != null && bulletArray.length > 0){
for(var i=0;i<bulletArray.length;i++){
var bulletObj = bulletArray[i];
if(bulletObj.isDestroyed){
bulletObj.owner.isShooting = false;
bulletArray.removeByIndex(i);
i--;
}else{
bulletObj.draw();
}
}
}
}
function keyEvent(){
if(keys.contain(keyboard.W)){
player1.dir = UP;
player1.hit = false;
player1.move();
}else if(keys.contain(keyboard.S)){
player1.dir = DOWN;
player1.hit = false;
player1.move();
}else if(keys.contain(keyboard.A)){
player1.dir = LEFT;
player1.hit = false;
player1.move();
}else if(keys.contain(keyboard.D)){
player1.dir = RIGHT;
player1.hit = false;
player1.move();
}
if(keys.contain(keyboard.UP)){
player2.dir = UP;
player2.hit = false;
player2.move();
}else if(keys.contain(keyboard.DOWN)){
player2.dir = DOWN;
player2.hit = false;
player2.move();
}else if(keys.contain(keyboard.LEFT)){
player2.dir = LEFT;
player2.hit = false;
player2.move();
}else if(keys.contain(keyboard.RIGHT)){
player2.dir = RIGHT;
player2.hit = false;
player2.move();
}
}
function addEnemyTank(){
if(enemyArray == null || enemyArray.length >= maxAppearEnemy || maxEnemy == 0){
return ;
}
appearEnemy++;
var rand = parseInt(Math.random()*3);
var obj = null;
if(rand == 0){
obj = new EnemyOne(tankCtx);
}else if(rand == 1){
obj = new EnemyTwo(tankCtx);
}else if(rand == 2){
obj = new EnemyThree(tankCtx);
}
obj.x = ENEMY_LOCATION[parseInt(Math.random()*3)] + map.offsetX;
obj.y = map.offsetY;
obj.dir = DOWN;
enemyArray[enemyArray.length] = obj;
//更新地图右侧坦克数
map.clearEnemyNum(maxEnemy,appearEnemy);
}
function drawEnemyTanks(){
if(enemyArray != null || enemyArray.length > 0){
for(var i=0;i<enemyArray.length;i++){
var enemyObj = enemyArray[i];
if(enemyObj.isDestroyed){
enemyArray.removeByIndex(i);
i--;
}else{
enemyObj.draw();
}
}
}
if(emenyStopTime > 0){
emenyStopTime --;
}
}
function drawAll(){
tankCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
if(player1.lives>0){
player1.draw();
}
if(player2.lives > 0){
player2.draw();
}
drawLives();
if(appearEnemy<maxEnemy){
if(mainframe % 100 == 0){
addEnemyTank();
mainframe = 0;
}
mainframe++;
}
drawEnemyTanks();
drawBullet();
drawCrack();
keyEvent();
if(propTime<=0){
drawProp();
}else{
propTime --;
}
if(homeProtectedTime > 0){
homeProtectedTime --;
}else if(homeProtectedTime == 0){
homeProtectedTime = -1;
homeNoProtected();
}
}
function drawCrack(){
if(crackArray != null && crackArray.length > 0){
for(var i=0;i<crackArray.length;i++){
var crackObj = crackArray[i];
if(crackObj.isOver){
crackArray.removeByIndex(i);
i--;
if(crackObj.owner == player1){
player1.renascenc(1);
}else if(crackObj.owner == player2){
player2.renascenc(2);
}
}else{
crackObj.draw();
}
}
}
}
function gameOver(){
overCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
overCtx.drawImage(RESOURCE_IMAGE,POS["over"][0],POS["over"][1],64,32,overX+map.offsetX,overY+map.offsetY,64,32);
overY -= 2 ;
if(overY <= parseInt(map.mapHeight/2)){
initObject();
//只有一个玩家
if(menu.playNum == 1){
player2.lives = 0;
}
gameState = GAME_STATE_MENU;
}
}
function nextLevel(){
level ++;
if(level == 22){
level = 1;
}
initObject();
//只有一个玩家
if(menu.playNum == 1){
player2.lives = 0;
}
stage.init(level);
gameState = GAME_STATE_INIT;
}
function preLevel(){
level --;
if(level == 0){
level = 21;
}
initObject();
//只有一个玩家
if(menu.playNum == 1){
player2.lives = 0;
}
stage.init(level);
gameState = GAME_STATE_INIT;
}
function drawProp(){
var rand = Math.random();
if(rand < 0.4 && prop == null){
prop = new Prop(overCtx);
prop.init();
}
if(prop != null){
prop.draw();
if(prop.isDestroyed){
prop = null;
propTime = 1000;
}
}
}
function homeNoProtected(){
var mapChangeIndex = [[23,11],[23,12],[23,13],[23,14],[24,11],[24,14],[25,11],[25,14]];
map.updateMap(mapChangeIndex,WALL);
};
2，tank.js
var Tank = function(){
this.x = 0;
this.y = 0;
this.size = 32;//坦克的大小
this.dir = UP;//方向0：上 1：下 2：左3：右
this.speed = 1;//坦克的速度
this.frame = 0;//控制敌方坦克切换方向的时间
this.hit = false; //是否碰到墙或者坦克
this.isAI = false; //是否自动
this.isShooting = false;//子弹是否在运行中
this.bullet = null;//子弹
this.shootRate = 0.6;//射击的概率
this.isDestroyed = false;
this.tempX = 0;
this.tempY = 0;
this.move = function(){
//如果是AI坦克，在一定时间或者碰撞之后切换方法
if(this.isAI && emenyStopTime > 0 ){
return;
}
this.tempX = this.x;
this.tempY = this.y;
if(this.isAI){
this.frame ++;
if(this.frame % 100 == 0 || this.hit){
this.dir = parseInt(Math.random()*4);//随机一个方向
this.hit = false;
this.frame = 0;
}
}
if(this.dir == UP){
this.tempY -= this.speed;
}else if(this.dir == DOWN){
this.tempY += this.speed;
}else if(this.dir == RIGHT){
this.tempX += this.speed;
}else if(this.dir == LEFT){
this.tempX -= this.speed;
}
this.isHit();
if(!this.hit){
this.x = this.tempX;
this.y = this.tempY;
}
};
this.isHit = function(){
//临界检测
if(this.dir == LEFT){
if(this.x <= map.offsetX){
this.x = map.offsetX;
this.hit = true;
}
}else if(this.dir == RIGHT){
if(this.x >= map.offsetX + map.mapWidth - this.size){
this.x = map.offsetX + map.mapWidth - this.size;
this.hit = true;
}
}else if(this.dir == UP ){
if(this.y <= map.offsetY){
this.y = map.offsetY;
this.hit = true;
}
}else if(this.dir == DOWN){
if(this.y >= map.offsetY + map.mapHeight - this.size){
this.y = map.offsetY + map.mapHeight - this.size;
this.hit = true;
}
}
if(!this.hit){
//地图检测
if(tankMapCollision(this,map)){
this.hit = true;
}
}
//坦克检测
};
this.isShot = function(){
};
this.shoot = function(type){
if(this.isAI && emenyStopTime > 0 ){
return;
}
if(this.isShooting){
return ;
}else{
var tempX = this.x;
var tempY = this.y;
this.bullet = new Bullet(this.ctx,this,type,this.dir);
if(this.dir == UP){
tempX = this.x + parseInt(this.size/2) - parseInt(this.bullet.size/2);
tempY = this.y - this.bullet.size;
}else if(this.dir == DOWN){
tempX = this.x + parseInt(this.size/2) - parseInt(this.bullet.size/2);
tempY = this.y + this.size;
}else if(this.dir == LEFT){
tempX = this.x - this.bullet.size;
tempY = this.y + parseInt(this.size/2) - parseInt(this.bullet.size/2);
}else if(this.dir == RIGHT){
tempX = this.x + this.size;
tempY = this.y + parseInt(this.size/2) - parseInt(this.bullet.size/2);
}
this.bullet.x = tempX;
this.bullet.y = tempY;
if(!this.isAI){
ATTACK_AUDIO.play();
}
this.bullet.draw();
//将子弹加入的子弹数组中
bulletArray.push(this.bullet);
this.isShooting = true;
}
};
this.distroy = function(){
this.isDestroyed = true;
crackArray.push(new CrackAnimation(CRACK_TYPE_TANK,this.ctx,this));
TANK_DESTROY_AUDIO.play();
};
};
var SelectTank = function(){
this.ys = [250, 281];//两个Y坐标，分别对应1p和2p
this.x = 140;
this.size = 27;
};
SelectTank.prototype = new Tank();
var PlayTank = function(context){
this.ctx = context;
this.lives = 3;//生命值
this.isProtected = true;//是否受保护
this.protectedTime = 500;//保护时间
this.offsetX = 0;//坦克2与坦克1的距离
this.speed = 2;//坦克的速度
this.draw = function(){
this.hit = false;
this.ctx.drawImage(RESOURCE_IMAGE,POS["player"][0]+this.offsetX+this.dir*this.size,POS["player"][1],this.size,this.size,this.x,this.y,this.size,this.size);
if(this.isProtected){
var temp = parseInt((500-this.protectedTime)/5)%2;
this.ctx.drawImage(RESOURCE_IMAGE,POS["protected"][0],POS["protected"][1]+32*temp,32, 32,this.x,this.y,32, 32);
this.protectedTime--;
if(this.protectedTime == 0){
this.isProtected = false;
}
}
};
this.distroy = function(){
this.isDestroyed = true;
crackArray.push(new CrackAnimation(CRACK_TYPE_TANK,this.ctx,this));
PLAYER_DESTROY_AUDIO.play();
};
this.renascenc = function(player){
this.lives -- ;
this.dir = UP;
this.isProtected = true;
this.protectedTime = 500;
this.isDestroyed = false;
var temp= 0 ;
if(player == 1){
temp = 129;
}else{
temp = 256;
}
this.x = temp + map.offsetX;
this.y = 385 + map.offsetY;
};
};
PlayTank.prototype = new Tank();
var EnemyOne = function(context){
this.ctx = context;
this.isAppear = false;
this.times = 0;
this.lives = 1;
this.isAI = true;
this.speed = 1.5;
this.draw = function(){
this.times ++;
if(!this.isAppear){
var temp = parseInt(this.times/5)%7;
this.ctx.drawImage(RESOURCE_IMAGE,POS["enemyBefore"][0]+temp*32,POS["enemyBefore"][1],32,32,this.x,this.y,32,32);
if(this.times == 34){
this.isAppear = true;
this.times = 0;
this.shoot(2);
}
}else{
this.ctx.drawImage(RESOURCE_IMAGE,POS["enemy1"][0]+this.dir*this.size,POS["enemy1"][1],32,32,this.x,this.y,32,32);
//以一定的概率射击
if(this.times %50 ==0){
var ra = Math.random();
if(ra < this.shootRate){
this.shoot(2);
}
this.times = 0;
}
this.move();
}
};
};
EnemyOne.prototype = new Tank();
var EnemyTwo = function(context){
this.ctx = context;
this.isAppear = false;
this.times = 0;
this.lives = 2;
this.isAI = true;
this.speed = 1;
this.draw = function(){
this.times ++;
if(!this.isAppear){
var temp = parseInt(this.times/5)%7;
this.ctx.drawImage(RESOURCE_IMAGE,POS["enemyBefore"][0]+temp*32,POS["enemyBefore"][1],32,32,this.x,this.y,32,32);
if(this.times == 35){
this.isAppear = true;
this.times = 0;
this.shoot(2);
}
}else{
this.ctx.drawImage(RESOURCE_IMAGE,POS["enemy2"][0]+this.dir*this.size,POS["enemy2"][1],32,32,this.x,this.y,32,32);
//以一定的概率射击
if(this.times %50 ==0){
var ra = Math.random();
if(ra < this.shootRate){
this.shoot(2);
}
this.times = 0;
}
this.move();
}
};
};
EnemyTwo.prototype = new Tank();
var EnemyThree = function(context){
this.ctx = context;
this.isAppear = false;
this.times = 0;
this.lives = 3;
this.isAI = true;
this.speed = 0.5;
this.draw = function(){
this.times ++;
if(!this.isAppear){
var temp = parseInt(this.times/5)%7;
this.ctx.drawImage(RESOURCE_IMAGE,POS["enemyBefore"][0]+temp*32,POS["enemyBefore"][1],32,32,this.x,this.y,32,32);
if(this.times == 35){
this.isAppear = true;
this.times = 0;
this.shoot(2);
}
}else{
this.ctx.drawImage(RESOURCE_IMAGE,POS["enemy3"][0]+this.dir*this.size+(3-this.lives)*this.size*4,POS["enemy3"][1],32,32,this.x,this.y,32,32);
//以一定的概率射击
if(this.times %50 ==0){
var ra = Math.random();
if(ra < this.shootRate){
this.shoot(2);
}
this.times = 0;
}
this.move();
}
};
};
EnemyThree.prototype = new Tank();
游戏素材来自网上，侵权麻烦联系删除
