canvas编写飞机大战

整体分析

1、定义游戏状态
（1）游戏欢迎状态 START
（2）游戏加载状态 LOADING
（3）游戏运行状态 RUNNING
（4）游戏暂停状态 PAUSE
（5）游戏结束状态 GAMEOVER
2、定义游戏得分 score = 0
3、定义我方飞机生命值 life = 3
4、定义游戏开关 State = 0

代码实现

首先，我们先来编写背景，背景采用的思维方法是和和轮播图差不多的，就相当于将两张图片无缝轮播，速度保持一样，向下轮播，就实现了背景的移动效果，背景写好之后，在给个单机事件，表示单机之后，开始游戏。游戏状态从欢迎状态切换为加载状态，我们来看代码：

var canvas = document.getElementById("canvas");var can = canvas.getContext("2d");const START = 0;     //游戏欢迎状态const STARTTING = 1;   //游戏加载状态const RUNNING = 2;     //游戏运行状态const PAUSE = 3;       //游戏暂停状态const GAMEOVER = 4;        //游戏结束状态var state = START;     //定义游戏开关var WIDTH = 480;       //定义当前画布的高度和宽度var HEIGHT = 852;var score = 0;         //定义游戏得分var life = 3;          //定义我方飞机的生命值//加载背景图片var bg = new Image();bg.src = "images/background.png";//初始化背景的数据var BG = {imgs : bg,width : 480,height : 852}//定义背景对象的构造器function Bg(config){this.imgs = config.imgs;this.width = config.width;this.height = config.height;this.x1 = 0;this.y1 = 0;this.x2 = 0;this.y2 = -this.height;this.paint = function(){can.drawImage(this.imgs,this.x1,this.y1);can.drawImage(this.imgs,this.x2,this.y2);}this.step = function(){this.y1++;this.y2++;if(this.y1 == this.height){this.y1 = -this.height;}if(this.y2 == this.height){this.y2 = -this.height;}}}//创建背景对象var beijing = new Bg(BG);var logo = new Image();logo.src = "images/start.png";var loadings = [];loadings[0] = new Image();loadings[0].src = "images/game_loading1.png";loadings[1] = new Image();loadings[1].src = "images/game_loading2.png";loadings[2] = new Image();loadings[2].src = "images/game_loading3.png";loadings[3] = new Image();loadings[3].src = "images/game_loading4.png";//初始化动画图片的数据var LOADINGS = {imgs : loadings,length : loadings.length,width : 186,height : 38}//定义动画效果的构造器function Loading(config){this.imgs = config.imgs;this.length = config.length;this.width = config.width;this.height = config.height;//定义属性表示图片的索引值this.num = 0;//绘制图片this.paint = function(){can.drawImage(this.imgs[this.num],0,HEIGHT-this.height);}//速度this.time = 0;//定义动画方法this.step = function(){this.time++;if(this.time%3 == 0){this.num++;}if(this.num == this.length){// 动画执行完毕,进入下一阶段state = RUNNING;}}}//动画效果var loading = new Loading(LOADINGS);canvas.onclick = function(){if(state == START){state = STARTTING;}}

游戏加载状态完成之后，就是绘制我方飞机了，我方飞机的动态原理为两张图片来回切换，敌方大飞机的动态也是一样，都是几张不同的图片来回切换，造成视觉上的效果，看起来飞机就想动起来一样，我方飞机的移动原理是为canvas绑定一个鼠标移动事件（onmousemove），让飞机随着鼠标的移动来改变位置，代码如下：

var heros = [];heros[0] = new Image();heros[0].src = "images/hero1.png";heros[1] = new Image();heros[1].src = "images/hero2.png";heros[2] = new Image();heros[2].src = "images/hero_blowup_n1.png";heros[3] = new Image();heros[3].src = "images/hero_blowup_n2.png";heros[4] = new Image();heros[4].src = "images/hero_blowup_n3.png";heros[5] = new Image();heros[5].src = "images/hero_blowup_n4.png";//我方飞机var HEROS = {imgs : heros,length : heros.length,width : 99,height : 124,frame : 2}//我方飞机的构造器function Hero(config){this.imgs = config.imgs;this.length = config.length;this.width = config.width;this.height = config.height;this.frame = config.frame;this.num = 0;this.x = WIDTH/2-this.width/2;this.y = HEIGHT-150;this.down = false;//当前为没有撞击的状态this.paint = function(){can.drawImage(this.imgs[this.num],this.x,this.y);}// 定义动画方法this.step = function(){if(!this.down){//如果没有被撞击if(this.num == 0){this.num = 1;}else{this.num = 0;}}else{this.num++;if(this.num == this.length){life--;if(life == 0){state = GAMEOVER;this.num = this.length-1;}else{hero = new Hero(HEROS);}}}}this.time = 0;this.shoot = function(){this.time++;if(this.time%3 == 0){bullets.push(new Bullet(BULLET));}}this.bang = function(){this.down = true;}}//创建我方飞机的对象var hero = new Hero(HEROS);//为<canvas>绑定onmousemove事件canvas.onmousemove = function(event){if(state == RUNNING){var x = event.offsetX;var y = event.offsetY;hero.x = x - hero.width/2;hero.y = y - hero.height/2;}}

再之后就是我方飞机的子弹了，将子弹的图片添加到画布上，将位置定位在飞机前方，然后创建一个存储子弹的数组，子弹的移动方法是控制y轴的大小来使子弹移动，当子弹移动到画布之外时将子弹删除：

//加载子弹的图片var bullet = new Image();bullet.src = "images/bullet1.png";//初始化子弹的数据var BULLET = {imgs : bullet,width : 9,height : 21}//创建子弹的构造器function Bullet(config){this.imgs = config.imgs;this.width = config.width;this.height = config.height;this.x = hero.x + hero.width/2 - this.width/2;this.y = hero.y - this.height - 10;this.paint = function(){can.drawImage(this.imgs,this.x,this.y);}this.step = function(){this.y-=10;}this.candel = false;this.bang = function(){this.candel = true;}}var bullets = [];function bulletsPaint(){for(var i=0;i<bullets.length;i++){bullets[i].paint();}}function bulletsStep(){for(var i=0;i<bullets.length;i++){bullets[i].step();}}function bulletsDel(){for(var i=0;i<bullets.length;i++){if(bullets[i].y < -bullets[i].height || bullets[i].candel){bullets.splice(i,1);}}}

子弹绘制好之后就是绘制敌方飞机了，同样的方法，先将图片添加到数组中，然后绘制上页面，原理和上面一样

var enemy1 = [];// 小飞机enemy1[0] = new Image();enemy1[0].src = "images/enemy1.png";enemy1[1] = new Image();enemy1[1].src = "images/enemy1_down1.png";enemy1[2] = new Image();enemy1[2].src = "images/enemy1_down2.png";enemy1[3] = new Image();enemy1[3].src = "images/enemy1_down3.png";enemy1[4] = new Image();enemy1[4].src = "images/enemy1_down4.png";var enemy2 = [];// 中飞机enemy2[0] = new Image();enemy2[0].src = "images/enemy2.png";enemy2[1] = new Image();enemy2[1].src = "images/enemy2_down1.png";enemy2[2] = new Image();enemy2[2].src = "images/enemy2_down2.png";enemy2[3] = new Image();enemy2[3].src = "images/enemy2_down3.png";enemy2[4] = new Image();enemy2[4].src = "images/enemy2_down4.png";var enemy3 = [];// 大飞机enemy3[0] = new Image();enemy3[0].src = "images/enemy3_n1.png";enemy3[1] = new Image();enemy3[1].src = "images/enemy3_n2.png";enemy3[2] = new Image();enemy3[2].src = "images/enemy3_down1.png";enemy3[3] = new Image();enemy3[3].src = "images/enemy3_down2.png";enemy3[4] = new Image();enemy3[4].src = "images/enemy3_down3.png";enemy3[5] = new Image();enemy3[5].src = "images/enemy3_down4.png";enemy3[6] = new Image();enemy3[6].src = "images/enemy3_down5.png";enemy3[7] = new Image();enemy3[7].src = "images/enemy3_down6.png";//初始化敌方飞机的数据var ENEMY1 = {imgs : enemy1,length : enemy1.length,width : 57,height : 51,type : 1,frame : 1,life : 1,score : 1}var ENEMY2 = {imgs : enemy2,length : enemy2.length,width : 69,height : 95,type : 2,frame : 1,life : 3,score : 3}var ENEMY3 = {imgs : enemy3,length : enemy3.length,width : 169,height : 258,type : 3,frame : 2,life : 20,score : 10}//创建敌方飞机的构造器function Enemy(config){this.imgs = config.imgs;this.length = config.length;this.width = config.width;this.height = config.height;this.type = config.type;this.frame = config.frame;this.life = config.life;this.score = config.score;this.x = Math.random() * (WIDTH - this.width);// 0 - (画布宽-飞机宽)this.y = -this.height;this.num = 0;this.down = false;this.candel = false;this.paint = function(){can.drawImage(this.imgs[this.num],this.x,this.y);}this.step = function(){if(!this.down){//正常this.num++;this.num = this.num%this.frame;this.y+=2;}else{this.num++;if(this.num == this.length){this.candel = true;this.num = this.length-1;}}}//是否被撞击this.checkHit = function(wo){return wo.y + wo.height > this.y&& wo.x + wo.width > this.x&& wo.y < this.y + this.height&& wo.x < this.x + this.width;}// 新增方法bang() - 用于被撞击后的逻辑this.bang = function(){this.life--;if(this.life == 0){this.down = true;score += this.score;}}}//存储所有敌方飞机var enemies = [];//用于创建敌方飞机function enterEnemies(){var rand = Math.floor(Math.random()*100);if(rand <= 7){// 小飞机enemies.push(new Enemy(ENEMY1));}else if(rand == 8){// 中飞机enemies.push(new Enemy(ENEMY2));}else if(rand == 9){// 大飞机 - 只允许数组的第一个元素为大飞机if(enemies[0].type != 3 && enemies.length > 0){enemies.splice(0,0,new Enemy(ENEMY3));}}}//敌方飞机function paintEnemies(){for(var i=0;i<enemies.length;i++){enemies[i].paint();}}//控制敌方飞机运动function stepEnemies(){for(var i=0;i<enemies.length;i++){enemies[i].step();}}//删除敌方飞机function delEnemies(){for(var i=0;i<enemies.length;i++){// 敌方飞机的y值 > 画布的高度if(enemies[i].y > HEIGHT||enemies[i].candel){enemies.splice(i,1);}}}

敌方飞机绘制好之后就是飞机之间的碰撞以及子弹和飞机之间的碰撞，碰撞的原理为当我方飞机到达敌方飞机的那个矩形范围时触发函数，代码如下：

//撞击function hitEnemies(){for(var i=0;i<enemies.length;i++){if(enemies[i].checkHit(hero)){enemies[i].bang();hero.bang();}// 子弹撞击敌方飞机for(var j=0;j<bullets.length;j++){if(enemies[i].checkHit(bullets[j])){enemies[i].bang();bullets[j].bang();}}}}//游戏得分与我方飞机的生命值function paintText(){can.font = "bold 24px 微软雅黑";can.fillText("SCORE: "+score,10,30);can.fillText("LIFE: "+life,390,30);}//游戏暂停阶段canvas.onmouseover = function(){//从暂停恢复到运行if(state == PAUSE){state = RUNNING;}}canvas.onmouseout = function(){//从运行切换到暂停if(state == RUNNING){state = PAUSE;}}var pause = new Image();pause.src = "images/game_pause_nor.png";//GAMEOVERfunction paintOver(){can.font = "bold 48px 微软雅黑";can.fillText("GAME OVER",100,320);}

控制函数调用的总定时器

setInterval(function(){beijing.paint();beijing.step();if(state == START){can.drawImage(logo,20,0);}else if(state == STARTTING){loading.paint();loading.step();}else if(state == RUNNING){hero.paint();hero.step();hero.shoot();bulletsPaint();bulletsStep();bulletsDel();enterEnemies();paintEnemies();stepEnemies();delEnemies();hitEnemies();paintText();}else if(state == PAUSE){hero.paint();bulletsPaint();paintEnemies();paintText();can.drawImage(pause,10,10);   }else if(state == GAMEOVER){hero.paint();bulletsPaint();paintEnemies();paintText();paintOver();}},100);

完整代码如下

<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"/></head><body><div style="margin:0 auto;width:480px; height:852px;background:#323232; text-align:center;vertical-align:middle"><canvas id="canvas" width="480px" height="852px"></canvas></div></body><script>var canvas = document.getElementById("canvas");var can = canvas.getContext("2d");const START = 0;        //游戏欢迎状态const STARTTING = 1;   //游戏加载状态const RUNNING = 2;     //游戏运行状态const PAUSE = 3;       //游戏暂停状态const GAMEOVER = 4;        //游戏结束状态var state = START;     //定义游戏开关var WIDTH = 480;       //定义当前画布的高度和宽度var HEIGHT = 852;var score = 0;         //定义游戏得分var life = 3;          //定义我方飞机的生命值//加载背景图片var bg = new Image();bg.src = "images/background.png";//初始化背景的数据var BG = {imgs : bg,width : 480,height : 852}//定义背景对象的构造器function Bg(config){this.imgs = config.imgs;this.width = config.width;this.height = config.height;this.x1 = 0;this.y1 = 0;this.x2 = 0;this.y2 = -this.height;this.paint = function(){can.drawImage(this.imgs,this.x1,this.y1);can.drawImage(this.imgs,this.x2,this.y2);}this.step = function(){this.y1++;this.y2++;if(this.y1 == this.height){this.y1 = -this.height;}if(this.y2 == this.height){this.y2 = -this.height;}}}//创建背景对象var beijing = new Bg(BG);var logo = new Image();logo.src = "images/start.png";var loadings = [];loadings[0] = new Image();loadings[0].src = "images/game_loading1.png";loadings[1] = new Image();loadings[1].src = "images/game_loading2.png";loadings[2] = new Image();loadings[2].src = "images/game_loading3.png";loadings[3] = new Image();loadings[3].src = "images/game_loading4.png";//初始化动画图片的数据var LOADINGS = {imgs : loadings,length : loadings.length,width : 186,height : 38}//定义动画效果的构造器function Loading(config){this.imgs = config.imgs;this.length = config.length;this.width = config.width;this.height = config.height;//定义属性表示图片的索引值this.num = 0;//绘制图片this.paint = function(){can.drawImage(this.imgs[this.num],0,HEIGHT-this.height);}//速度this.time = 0;//定义动画方法this.step = function(){this.time++;if(this.time%3 == 0){this.num++;}if(this.num == this.length){// 动画执行完毕,进入下一阶段state = RUNNING;}}}//动画效果var loading = new Loading(LOADINGS);canvas.onclick = function(){if(state == START){state = STARTTING;}}var heros = [];heros[0] = new Image();heros[0].src = "images/hero1.png";heros[1] = new Image();heros[1].src = "images/hero2.png";heros[2] = new Image();heros[2].src = "images/hero_blowup_n1.png";heros[3] = new Image();heros[3].src = "images/hero_blowup_n2.png";heros[4] = new Image();heros[4].src = "images/hero_blowup_n3.png";heros[5] = new Image();heros[5].src = "images/hero_blowup_n4.png";//我方飞机var HEROS = {imgs : heros,length : heros.length,width : 99,height : 124,frame : 2}//我方飞机的构造器function Hero(config){this.imgs = config.imgs;this.length = config.length;this.width = config.width;this.height = config.height;this.frame = config.frame;this.num = 0;this.x = WIDTH/2-this.width/2;this.y = HEIGHT-150;this.down = false;//当前为没有撞击的状态this.paint = function(){can.drawImage(this.imgs[this.num],this.x,this.y);}// 定义动画方法this.step = function(){if(!this.down){//如果没有被撞击if(this.num == 0){this.num = 1;}else{this.num = 0;}}else{this.num++;if(this.num == this.length){life--;if(life == 0){state = GAMEOVER;this.num = this.length-1;}else{hero = new Hero(HEROS);}}}}this.time = 0;this.shoot = function(){this.time++;if(this.time%3 == 0){bullets.push(new Bullet(BULLET));}}this.bang = function(){this.down = true;}}//创建我方飞机的对象var hero = new Hero(HEROS);//为<canvas>绑定onmousemove事件canvas.onmousemove = function(event){if(state == RUNNING){var x = event.offsetX;var y = event.offsetY;hero.x = x - hero.width/2;hero.y = y - hero.height/2;}}//加载子弹的图片var bullet = new Image();bullet.src = "images/bullet1.png";//初始化子弹的数据var BULLET = {imgs : bullet,width : 9,height : 21}//创建子弹的构造器function Bullet(config){this.imgs = config.imgs;this.width = config.width;this.height = config.height;this.x = hero.x + hero.width/2 - this.width/2;this.y = hero.y - this.height - 10;this.paint = function(){can.drawImage(this.imgs,this.x,this.y);}this.step = function(){this.y-=10;}this.candel = false;this.bang = function(){this.candel = true;}}var bullets = [];function bulletsPaint(){for(var i=0;i<bullets.length;i++){bullets[i].paint();}}function bulletsStep(){for(var i=0;i<bullets.length;i++){bullets[i].step();}}function bulletsDel(){for(var i=0;i<bullets.length;i++){if(bullets[i].y < -bullets[i].height || bullets[i].candel){bullets.splice(i,1);}}}var enemy1 = [];// 小飞机enemy1[0] = new Image();enemy1[0].src = "images/enemy1.png";enemy1[1] = new Image();enemy1[1].src = "images/enemy1_down1.png";enemy1[2] = new Image();enemy1[2].src = "images/enemy1_down2.png";enemy1[3] = new Image();enemy1[3].src = "images/enemy1_down3.png";enemy1[4] = new Image();enemy1[4].src = "images/enemy1_down4.png";var enemy2 = [];// 中飞机enemy2[0] = new Image();enemy2[0].src = "images/enemy2.png";enemy2[1] = new Image();enemy2[1].src = "images/enemy2_down1.png";enemy2[2] = new Image();enemy2[2].src = "images/enemy2_down2.png";enemy2[3] = new Image();enemy2[3].src = "images/enemy2_down3.png";enemy2[4] = new Image();enemy2[4].src = "images/enemy2_down4.png";var enemy3 = [];// 大飞机enemy3[0] = new Image();enemy3[0].src = "images/enemy3_n1.png";enemy3[1] = new Image();enemy3[1].src = "images/enemy3_n2.png";enemy3[2] = new Image();enemy3[2].src = "images/enemy3_down1.png";enemy3[3] = new Image();enemy3[3].src = "images/enemy3_down2.png";enemy3[4] = new Image();enemy3[4].src = "images/enemy3_down3.png";enemy3[5] = new Image();enemy3[5].src = "images/enemy3_down4.png";enemy3[6] = new Image();enemy3[6].src = "images/enemy3_down5.png";enemy3[7] = new Image();enemy3[7].src = "images/enemy3_down6.png";//初始化敌方飞机的数据var ENEMY1 = {imgs : enemy1,length : enemy1.length,width : 57,height : 51,type : 1,frame : 1,life : 1,score : 1}var ENEMY2 = {imgs : enemy2,length : enemy2.length,width : 69,height : 95,type : 2,frame : 1,life : 3,score : 3}var ENEMY3 = {imgs : enemy3,length : enemy3.length,width : 169,height : 258,type : 3,frame : 2,life : 20,score : 10}//创建敌方飞机的构造器function Enemy(config){this.imgs = config.imgs;this.length = config.length;this.width = config.width;this.height = config.height;this.type = config.type;this.frame = config.frame;this.life = config.life;this.score = config.score;this.x = Math.random() * (WIDTH - this.width);// 0 - (画布宽-飞机宽)this.y = -this.height;this.num = 0;this.down = false;this.candel = false;this.paint = function(){can.drawImage(this.imgs[this.num],this.x,this.y);}this.step = function(){if(!this.down){//正常this.num++;this.num = this.num%this.frame;this.y+=2;}else{this.num++;if(this.num == this.length){this.candel = true;this.num = this.length-1;}}}//是否被撞击this.checkHit = function(wo){return wo.y + wo.height > this.y&& wo.x + wo.width > this.x&& wo.y < this.y + this.height&& wo.x < this.x + this.width;}// 新增方法bang() - 用于被撞击后的逻辑this.bang = function(){this.life--;if(this.life == 0){this.down = true;score += this.score;}}}//存储所有敌方飞机var enemies = [];//用于创建敌方飞机function enterEnemies(){var rand = Math.floor(Math.random()*100);if(rand <= 7){// 小飞机enemies.push(new Enemy(ENEMY1));}else if(rand == 8){// 中飞机enemies.push(new Enemy(ENEMY2));}else if(rand == 9){// 大飞机 - 只允许数组的第一个元素为大飞机if(enemies[0].type != 3 && enemies.length > 0){enemies.splice(0,0,new Enemy(ENEMY3));}}}//敌方飞机function paintEnemies(){for(var i=0;i<enemies.length;i++){enemies[i].paint();}}//控制敌方飞机运动function stepEnemies(){for(var i=0;i<enemies.length;i++){enemies[i].step();}}//删除敌方飞机function delEnemies(){for(var i=0;i<enemies.length;i++){// 敌方飞机的y值 > 画布的高度if(enemies[i].y > HEIGHT||enemies[i].candel){enemies.splice(i,1);}}}//撞击function hitEnemies(){for(var i=0;i<enemies.length;i++){if(enemies[i].checkHit(hero)){enemies[i].bang();hero.bang();}// 子弹撞击敌方飞机for(var j=0;j<bullets.length;j++){if(enemies[i].checkHit(bullets[j])){enemies[i].bang();bullets[j].bang();}}}}//游戏得分与我方飞机的生命值function paintText(){can.font = "bold 24px 微软雅黑";can.fillText("SCORE: "+score,10,30);can.fillText("LIFE: "+life,390,30);}//游戏暂停阶段canvas.onmouseover = function(){//从暂停恢复到运行if(state == PAUSE){state = RUNNING;}}canvas.onmouseout = function(){//从运行切换到暂停if(state == RUNNING){state = PAUSE;}}var pause = new Image();pause.src = "images/game_pause_nor.png";//GAMEOVERfunction paintOver(){can.font = "bold 48px 微软雅黑";can.fillText("GAME OVER",100,320);}setInterval(function(){beijing.paint();beijing.step();if(state == START){can.drawImage(logo,20,0);}else if(state == STARTTING){loading.paint();loading.step();}else if(state == RUNNING){hero.paint();hero.step();hero.shoot();bulletsPaint();bulletsStep();bulletsDel();enterEnemies();paintEnemies();stepEnemies();delEnemies();hitEnemies();paintText();}else if(state == PAUSE){hero.paint();bulletsPaint();paintEnemies();paintText();can.drawImage(pause,10,10); }else if(state == GAMEOVER){hero.paint();bulletsPaint();paintEnemies();paintText();paintOver();}},100);</script>
</html>