利用HTML5 Canvas制作一个简单的打飞机游戏

                }   
            }   
        },   
  
//再贴出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;