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

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

vardataIndex=0;

li();

function li(){

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

varaudio=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){

varimg=newImage();

img.src= src;

if(img.complete){

callback.call(img);

}else {

img.οnlοad=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){