之前在当耐特的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;

　　var dataIndex = 0;

　　li();

　　function li(){

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

　　var audio = 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){

　　var img = new Image();

　　img.src = src;

　　if(img.complete){

　　callback.call(img);

　　}else {

　　img.onload = 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(var i=0;i

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

　　}

　　}

　　}

　　}

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

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

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

　　var SpriteSheetPainter = 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){

　　var cell = 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"

　　var planWidth = 24,

　　planHeight = 24,

　　missleWidth = 70,

　　missleHeight = 70,

　　boomWidth = 60;<