用canvas整个打飞机游戏

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

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

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

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

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来分别编写就行了。

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);
            }
        }
    }
}
参考：[http://nbcjzx.com/](http://nbcjzx.com/)