之前在当耐特的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");             this this.cacheCtx  = this.cacheCanvas.getContext('2d');             this this.cacheCanvas.width  = this.width this.lightLength*2;             this this.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.length ;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;         //精灵类        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" );                 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 );            } 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.length;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 =  new  Date();                } else  {                     var  newd =  new  Date();                     var  tc = newd- this .dateCount;                     if (tc>40){                         this .advance();                         this .dateCount = newd;                    }                }                 if ( this .cellIndex< this .cells.length ||  this .isloop){                     var  cell =  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);                }  else   if ( 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 =  new  Date();                } else  {                     var  newd =  new  Date();                     var  tc = newd- this .dateCount;                     if (tc>sprite.firePerFrame){                         this .advance();                         this .dateCount = newd;                    }                }                 var  cell =  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<planHeight/2? sprite.top : sprite.top-sprite.velocityY;                }                 if (sprite.toLeft){                    sprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;                }                 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;                }    <