之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。

闲话不多说，先上DEMO撒：飞机游戏   楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。

步入主题啦：打飞机游戏文件有index.html入口文件，allSprite.js精灵的逻辑处理文件，loading.js加载处理文件以及data.js(初始化的一些数据)。

首先，正常的游戏基本上都需要一个loading，loading页面就是用来预加载数据的，包括精灵表图片，音频等，因为这是个小游戏，要加载的就只有一些音频和图片。里面的加载代码主要就下面这些，其他是制作loading动画的，那个比较简单，就不贴了，如果有兴趣的直接在DEMO里看控制台就行了：

XML/HTML Code复制内容到剪贴板

loadImg:function(datas){

var_this= this;

vardataIndex=0;

li();

function li(){

if(datas[dataIndex].indexOf("mp3")>=0){

varaudio=document.createElement("audio");

document.body.appendChild(audio);

audio.preload="auto";

audio.src=datas[dataIndex];

audio.oncanplaythrough=function(){

this.oncanplaythrough=null;

dataIndex++;

if(dataIndex===datas.length){

_this.percent=100;

}else {

_this.percent=parseInt(dataIndex/datas.length*100);

li.call(_this);

}

}

}else {

preLoadImg(datas[dataIndex] , function(){

dataIndex++;

if(dataIndex===datas.length){

_this.percent=100;

} else {

_this.percent=parseInt(dataIndex/datas.length*100);

li.call(_this);

}

})

}

}

},

//再贴出preLoadImg的方法

function preLoadImg(src , callback){

varimg=newImage();

img.src= src;

if(img.complete){

callback.call(img);

}else {

img.οnlοad=function(){

callback.call(img);

}

}

}

我先在data.js里面用一个数组保存文件的链接，然后判断这些链接是图片还是音频，如果是图片就用preLoadImg加载，预加载图片的代码很简单，就是new一个图片对象，然后把链接赋给它，加载完后再回调。音频的加载则是通过生成一个HTML5的audio dom对象，把链接赋给它，audio有一个事件“canplaythrough”，浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件，也就是说当canplaythrough被调用时，音频就已经被加载的差不多了，可以进行下一个音频的加载了。就这样当把所有东西都加载完后，再进行回调，开始游戏。

游戏开始了，一个游戏，会需要很多的对象，所以我就统一写成了一个精灵对象，不同对象之间的每一帧的运动情况直接用behavior来分别编写就行了。

XML/HTML Code复制内容到剪贴板

W.Sprite=function(name , painter , behaviors , args){

if(name !== undefined)this.name= name;

if(painter !== undefined)this.painter= painter;

this.top=0;

this.left=0;

this.width=0;

this.height=0;

this.velocityX=3;

this.velocityY=2;

this.visible=true;

this.animating=false;

this.behaviors= behaviors;

this.rotateAngle=0;

this.blood=50;

this.fullBlood=50;

if(name==="plan"){

this.rotateSpeed=0.05;

this.rotateLeft=false;

this.rotateRight=false;

this.fire=false;

this.firePerFrame=10;

this.fireLevel=1;

}else if(name==="star"){

this.width=Math.random()*2;

this.speed=1*this.width/2;

this.lightLength=5;

this.cacheCanvas=document.createElement("canvas");

thisthis.cacheCtx= this.cacheCanvas.getContext('2d');

thisthis.cacheCanvas.width= this.width+this.lightLength*2;

thisthis.cacheCanvas.height= this.width+this.lightLength*2;

this.painter.cache(this);

}else if(name==="badPlan"){

this.badKind=1;

this.speed=2;

this.rotateAngle=Math.PI;

}else if(name==="missle"){

this.width=missleWidth;

}else if(name==="boom"){

this.width=boomWidth;

}else if(name==="food"){

this.width=40;

this.speed=3;

this.kind="LevelUP"

}

this.toLeft=false;

this.toTop=false;

this.toRight=false;

this.toBottom=false;

this.outArcRadius=Math.sqrt((this.width/2*this.width/2)*2);

if(args){

for(var arg in args){

this[arg] = args[arg];

}

}

}

Sprite.prototype= {

constructor:Sprite,

paint:function(){

if(this.name==="badPlan"){this.update();}

if(this.painter !== undefined && this.visible){

if(this.name!=="badPlan") {

this.update();

}

if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){

ctx.save();

ctx.translate(this.left , this.top);

ctx.rotate(this.rotateAngle);

this.painter.paint(this);

ctx.restore();

}else {

this.painter.paint(this);

}

}

},

update:function(time){

if(this.behaviors){

for(vari=0;i

this.behaviors[i].execute(this,time);

}

}

}

}

写出精灵类后，就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了，painter分成两种，一种是普通的painter，一种就是精灵表painter，因为像爆炸动画，飞机开枪动画，都不是一张图片就能搞定的，所以就需要用到精灵表了：

而绘制这些就要为他们定制一个精灵表绘制器，下面这个是最简单的精灵表绘制器，针对游戏的复杂性可以相对的修改精灵表写法，直到合适，不过原理都大同小异，就是小修小改而已：

XML/HTML Code复制内容到剪贴板

varSpriteSheetPainter=function(cells){

this.cells= cells || [];

this.cellIndex=0;

}

SpriteSheetPainter.prototype= {

advance:function(){

if(this.cellIndex=== this.cells.length-1){

this.cellIndex=0;

}

else this.cellIndex++;

},

paint:function(sprite){

varcell=this.cells[this.cellIndex];

context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);

}

}

而普通的绘制器就更简单了，直接写一个painter，把要画的什么东西都写进去就行了。

有了精灵类和精灵表绘制器后，我们就可以把星星，飞机，子弹，爆炸对象都写出来了：下面是整个allSprite.js的代码：

JavaScript Code复制内容到剪贴板

(function(W){

"use strict"

varplanWidth = 24,

planHeight = 24,

missleWidth = 70,

missleHeight = 70,

boomWidth = 60;

//精灵类

W.Sprite =function(name , painter , behaviors , args){

if(name !== undefined)this.name = name;

if(painter !== undefined)this.painter = painter;

this.top = 0;

this.left = 0;

this.width = 0;

this.height = 0;

this.velocityX = 3;

this.velocityY = 2;

this.visible =true;

this.animating =false;

this.behaviors = behaviors;

this.rotateAngle = 0;

this.blood = 50;

this.fullBlood = 50;

if(name==="plan"){

this.rotateSpeed = 0.05;

this.rotateLeft =false;

this.rotateRight =false;

this.fire =false;

this.firePerFrame = 10;

this.fireLevel = 1;

}elseif(name==="star"){

this.width = Math.random()*2;

this.speed = 1*this.width/2;

this.lightLength = 5;

this.cacheCanvas = document.createElement("canvas");

this.cacheCtx =this.cacheCanvas.getContext('2d');

this.cacheCanvas.width =this.width+this.lightLength*2;

this.cacheCanvas.height =this.width+this.lightLength*2;

this.painter.cache(this);

}elseif(name==="badPlan"){

this.badKind = 1;

this.speed = 2;

this.rotateAngle = Math.PI;

}elseif(name==="missle"){

this.width = missleWidth;

}elseif(name==="boom"){

this.width = boomWidth;

}elseif(name==="food"){

this.width = 40;

this.speed = 3;

this.kind ="LevelUP"

}

this.toLeft =false;

this.toTop =false;

this.toRight =false;

this.toBottom =false;

this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);

if(args){

for(vararginargs){

this[arg] = args[arg];

}

}

}

Sprite.prototype = {

constructor:Sprite,

paint:function(){

if(this.name==="badPlan"){this.update();}

if(this.painter !== undefined &&this.visible){

if(this.name!=="badPlan") {

this.update();

}

if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){

ctx.save();

ctx.translate(this.left ,this.top);

ctx.rotate(this.rotateAngle);

this.painter.paint(this);

ctx.restore();

}else{

this.painter.paint(this);

}

}

},

update:function(time){

if(this.behaviors){

for(vari=0;i

this.behaviors[i].execute(this,time);

}

}

}

}

// 精灵表绘制器

W.SpriteSheetPainter =function(cells , isloop , endCallback , spritesheet){

this.cells = cells || [];

this.cellIndex = 0;

this.dateCount =null;

this.isloop = isloop;

this.endCallback = endCallback;

this.spritesheet = spritesheet;

}

SpriteSheetPainter.prototype = {

advance:function(){

this.cellIndex =this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);

},

paint:function(sprite){

if(this.dateCount===null){

this.dateCount =newDate();

}else{

varnewd =newDate();

vartc = newd-this.dateCount;

if(tc>40){

this.advance();

this.dateCount = newd;

}

}

if(this.cellIndex

varcell =this.cells[this.cellIndex];

ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/2 , sprite.top-sprite.width/2 , cell.w , cell.h);

}elseif(this.endCallback){

this.endCallback.call(sprite);

this.cellIndex = 0;

}

}

}

//特制飞机精灵表绘制器

W.controllSpriteSheetPainter =function(cells , spritesheet){

this.cells = cells || [];

this.cellIndex = 0;

this.dateCount =null;

this.isActive =false;

this.derection =true;

this.spritesheet = spritesheet;

}

controllSpriteSheetPainter.prototype = {

advance:function(){

if(this.isActive){

this.cellIndex++;

if(this.cellIndex ===this.cells.length){

this.cellIndex = 0;

this.isActive =false;

}

}

},

paint:function(sprite){

if(this.dateCount===null){

this.dateCount =newDate();

}else{

varnewd =newDate();

vartc = newd-this.dateCount;

if(tc>sprite.firePerFrame){

this.advance();

this.dateCount = newd;

}

}

varcell =this.cells[this.cellIndex];

ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);

}

}

W.planBehavior = [

{execute:function(sprite,time){

if(sprite.toTop){

sprite.top = sprite.top

}

if(sprite.toLeft){

sprite.left = sprite.left

}

if(sprite.toRight){

sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;

}

if(sprite.toBottom){

sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;

}

if(sprite.rotateLeft){

sprite.rotateAngle -= sprite.rotateSpeed;

}

if(sprite.rotateRight){

sprite.rotateAngle += sprite.rotateSpeed;

}

if(sprite.fire&&!sprite.painter.isActive){

sprite.painter.isActive =true;

this.shot(sprite);

}

},

shot:function(sprite){

this.addMissle(sprite , sprite.rotateAngle);

varmissleAngle = 0.1

for(vari=1;i

this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);

this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);

}

varaudio = document.getElementsByTagName("audio");

for(vari=0;i

console.log(audio[i].paused)

if(audio[i].src.indexOf("shot")>=0&&audio[i].paused){

audio[i].play();

break;

}

}

},

addMissle:function(sprite , angle){

for(varj=0;j

if(!missles[j].visible){

missles[j].left = sprite.left;

missles[j].top = sprite.top;

missles[j].rotateAngle = angle;

varmissleSpeed = 20;

missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);

missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);

missles[j].visible =true;

break;

}

}

}

}

]

W.starBehavior = [

{execute:function(sprite,time){

if(sprite.top > canvas.height){

sprite.left = Math.random()*canvas.width;

sprite.top = Math.random()*canvas.height - canvas.height;

}

sprite.top += sprite.speed;

}}

]

W.starPainter = {

paint:function(sprite){

ctx.drawImage(sprite.cacheCanvas , sprite.left-sprite.width/2-sprite.lightLength , sprite.top-sprite.width/2-sprite.lightLength)

},

cache:function(sprite){

sprite.cacheCtx.save();

varopacity = 0.5,addopa = 1/sprite.lightLength;

sprite.cacheCtx.fillStyle ="rgba(255,255,255,0.8)";

sprite.cacheCtx.beginPath();

sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2 , 0 , 2*Math.PI);

sprite.cacheCtx.fill();

for(vari=1;i<=sprite.lightLength;i+=2){

opacity-=addopa;

sprite.cacheCtx.fillStyle ="rgba(255,255,255,"+opacity+")";

sprite.cacheCtx.beginPath();

sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2+i , 0 , 2*Math.PI);

sprite.cacheCtx.fill();

}

}

}

W.foodBehavior = [

{execute:function(sprite,time){

sprite.top += sprite.speed;

if(sprite.top > canvas.height+sprite.width){

sprite.visible =false;

}

}}

]

W.foodPainter = {

paint:function(sprite){

ctx.fillStyle ="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"

ctx.font="15px 微软雅黑"

ctx.textAlign ="center";

ctx.textBaseline ="middle";

ctx.fillText(sprite.kind , sprite.left , sprite.top);

}

}

W.missleBehavior = [{

execute:function(sprite,time){

sprite.left -= sprite.velocityX;

sprite.top -= sprite.velocityY;

if(sprite.leftcanvas.width+missleWidth/2||sprite.top

sprite.visible =false;

}

}

}];

W.misslePainter = {

paint:function(sprite){

varimg =newImage();

img.src="../planGame/image/plasma.png"

ctx.drawImage(img , -missleWidth/2+1 , -missleHeight/2+1 , missleWidth , missleHeight);

}

}

W.badPlanBehavior = [{

execute:function(sprite,time){

if(sprite.top > canvas.height || !sprite.visible){

varrandom = Math.random();

if(point>=200&&point<400){

sprite.fullBlood = 150;

if(random<0.1){

sprite.badKind = 2;

sprite.fullBlood = 250;

}

}elseif(point>=400&&point<600){

sprite.fullBlood = 250;

if(random<0.2){

sprite.badKind = 2;

sprite.fullBlood = 400;

}

if(random<0.1){

sprite.badKind = 3;

sprite.fullBlood = 600;

}

}elseif(point>=600){

sprite.fullBlood = 500;

if(random<0.4){

sprite.badKind = 2;

sprite.fullBlood = 700;

}

if(random<0.2){

sprite.badKind = 3;

sprite.fullBlood = 1000;

}

}

sprite.visible =true;

sprite.blood = sprite.fullBlood;

sprite.left = Math.random()*(canvas.width-2*planWidth)+planWidth;

sprite.top = Math.random()*canvas.height - canvas.height;

}

sprite.top += sprite.speed;

},

shot:function(sprite){

this.addMissle(sprite , sprite.rotateAngle);

varmissleAngle = 0.1

for(vari=1;i

this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);

this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);

}

},

addMissle:function(sprite , angle){

for(varj=0;j

if(!missles[j].visible){

missles[j].left = sprite.left;

missles[j].top = sprite.top;

missles[j].rotateAngle = angle;

varmissleSpeed = 20;

missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);

missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);

missles[j].visible =true;

break;

}

}

}

}];

W.badPlanPainter = {

paint:function(sprite){

varimg =newImage();

img.src="../planGame/image/ship.png"

switch(sprite.badKind){

case1:ctx.drawImage(img , 96 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);

break;

case2:ctx.drawImage(img , 120 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);

break;

case3:ctx.drawImage(img , 144 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);

break;

}

ctx.strokeStyle ="#FFF";

ctx.fillStyle ="#F00";

varbloodHeight = 1;

ctx.strokeRect(-planWidth/2-1 , planHeight+bloodHeight+3 , planWidth+2 , bloodHeight+2);

ctx.fillRect(planWidth/2-planWidth*sprite.blood/sprite.fullBlood , planHeight+bloodHeight+3 , planWidth*sprite.blood/sprite.fullBlood , bloodHeight);

}

}

W.planSize =function(){

return{

w:planWidth,

h:planHeight

}

}

})(window);

这些绘制方法之类的都相对比较简单。

主要说一下飞机的运动以及对象数量的控制，飞机怎么运动？毫无疑问，通过键盘控制它运动，可能很多人就会想到通过keydown这个方法按下的时候通过判断keyCode来让飞机持续运动。但是有个问题，keydown事件不支持多键按下，也就是说，当你按下X键时，keyCode是88，与此同时你按下方向键后，keyCode会瞬间变成37，也就是说，如果你单纯的想靠keydown来控制飞机运动，飞机就只能做一件事，要么只可以往某个方向移动，要么只会开枪。

所以，我们要通过keydown和keyup来实现飞机的运动，原理很容易理解：当我们按下往左的方向键时，我们给飞机一个往左的状态，也就是让飞机的toLeft属性为true，而在动画循环中，判断飞机的状态，如果toLeft为true则飞机的x值不停地减少，飞机也就会不停地往左移动，然后当我们抬起手指时触发keyup事件，我们就再keyup事件中解除飞机往左的状态。飞机也就停止往左移动了。其他状态也一样的原理，这样写的话，就能够让飞机多种状态于一生了。可以同时开枪同时到处跑了。

实现的代码如下：

XML/HTML Code复制内容到剪贴板

//keydown/keyup事件的绑定

window.οnkeydοwn=function(event){

switch(event.keyCode){

case88:myplan.fire=true;

break;

case90:myplan.rotateLeft=true;

break;

case67:myplan.rotateRight=true;

break;

case37:myplan.toLeft=true;

break;

case38:myplan.toTop=true;

break;

case39:myplan.toRight=true;

break;

case40:myplan.toBottom=true;

break;

}

}

window.οnkeyup=function(event){

switch(event.keyCode){

case88:myplan.fire=false;

break;

case90:myplan.rotateLeft=false;

break;

case67:myplan.rotateRight=false;

break;

case37:myplan.toLeft=false;

break;

case38:myplan.toTop=false;

break;

case39:myplan.toRight=false;

break;

case40:myplan.toBottom=false;

break;

}

}

//飞机每一帧的状态更新处理代码

execute:function(sprite,time){

if(sprite.toTop){

spritesprite.top= sprite.top

}

if(sprite.toLeft){

spritesprite.left= sprite.left

}

if(sprite.toRight){

spritesprite.left= sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;

}

if(sprite.toBottom){

spritesprite.top= sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;

}

if(sprite.rotateLeft){

sprite.rotateAngle-=sprite.rotateSpeed;

}

if(sprite.rotateRight){

sprite.rotateAngle += sprite.rotateSpeed;

}

if(sprite.fire&&!sprite.painter.isActive){

sprite.painter.isActive=true;

this.shot(sprite);

}

就是如此简单。

然后说下对象控制，打飞机游戏，会发射大量子弹，产生大量对象，包括爆炸啊，飞机啊，子弹等，如果不停地进行对象的生成和销毁，会让浏览器的负荷变得很大，运行了一段时间后就会卡出翔了。所以，我们要用可以循环利用的对象来解决这个问题，不进行对象的销毁，对所有对象进行保存，循环利用。

我的做法就是，在游戏初始化的时候，直接生成一定数量的对象，存放在数组里面。当我们需要一个对象的时候，就从里面取，当用完后，再放回数组里面。数组里的所有对象都有一个属性，visible，代表对象当前是否可用。

举个例子，当我的飞机发射一发炮弹，我需要一发炮弹，所以我就到炮弹数组里遍历，如果遍历到的炮弹visible为true，也就说明该对象正在使用着，不能拿来用，所以继续遍历，直到遍历到visible为false的炮弹对象，说明这个对象暂时没人用。然后就可以拿过来重新设置属性，投入使用了。当炮弹击中敌人或者打出画布外的时候，把炮弹的visible设成false，又成了一个没人用的炮弹在数组里存放起来等待下一次调用。

所以，我们要预算算好页面大概要用到多少个对象，然后就预先准备好对象，这样，在游戏进行中，不会有对象进行生成和销毁，对游戏性能方面就有了提升了。

最后再说下音频，游戏里面要用到多个同样的audio才能保证音效的不间断性：

复制代码

XML/HTML Code复制内容到剪贴板

varaudio=document.getElementsByTagName("audio");

for(vari=0;i

console.log(audio[i].paused)

if(audio[i].src.indexOf("boom")>=0&&audio[i].paused){

audio[i].play();

break;

}

}

好吧，基本上就这样了。技术或许还不够好，纯碎做个记录，如果代码有不当正处，欢迎指出，共同学习。