导语： 女朋友想玩游戏了。 不多废话咱们直接来看效果。 想要源码的小伙伴关注微信公众号【web小馆】，回复“坦克大战”，下载游戏源码 实现还是挺简单的，只需要html，css，JavaScript就可以。 1，main.js 2，tank.js 游戏素材来自网上，侵权麻烦联系删除
女朋友最近越来越难搞，一会儿植物大战僵尸，一会儿坦克大战，作为一名暖男，必须安排一波，这不，它又来了。
安排！！1，效果图
吃到了暂停道具。
吃到了奖励生命一个。
打完所有的敌人进入下一关。
2，代码
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
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); }; /** * 坦克基类 * @returns */ 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; } } //坦克检测 /*if(enemyArray != null && enemyArray.length >0){ var enemySize = enemyArray.length; for(var i=0;i<enemySize;i++){ if(enemyArray[i] != this && CheckIntersect(enemyArray[i],this,0)){ this.hit = true; break; } } }*/ }; /** * 是否被击中 */ 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(); }; }; /** * 菜单选择坦克 * @returns */ var SelectTank = function(){ this.ys = [250, 281];//两个Y坐标，分别对应1p和2p this.x = 140; this.size = 27; }; SelectTank.prototype = new Tank(); /** * 玩家坦克 * @param context 画坦克的画布 * @returns */ 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(); /** * 敌方坦克1 * @param context 画坦克的画布 * @returns */ 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(); /** * 敌方坦克2 * @param context 画坦克的画布 * @returns */ 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(); /** * 敌方坦克3 * @param context 画坦克的画布 * @returns */ 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();
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
2855