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

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

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

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

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

1. loadImg:function(datas){   
2.             var _this = this;   
3.             var dataIndex = 0;   
4.             li();   
5.             function li(){   
6.                 if(datas[dataIndex].indexOf("mp3")>=0){   
7.                     var audio = document.createElement("audio");   
8.                     document.body.appendChild(audio);   
9.                     audio.preload = "auto";   
10.                     audio.src = datas[dataIndex];   
11.                     audio.oncanplaythrough = function(){   
12.                         this.oncanplaythrough = null;   
13.                         dataIndex++;   
14.                         if(dataIndex===datas.length){   
15.                             _this.percent = 100;   
16.                         }else {   
17.                             _this.percent = parseInt(dataIndex/datas.length*100);   
18.                             li.call(_this);   
19.                         }   
20.                     }   
21.                 }else {   
22.                     preLoadImg(datas[dataIndex] , function(){   
23.                         dataIndex++;   
24.                         if(dataIndex===datas.length){   
25.                             _this.percent = 100;   
26.                         } else {   
27.                             _this.percent = parseInt(dataIndex/datas.length*100);   
28.                             li.call(_this);   
29.                         }