应用HTML5Canvas实现打飞机游戏-
发布时间：09/01 来源：未知 浏览：
关键词：
以前在当耐特的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");
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){
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写出精灵类后，就可以通过编写每个的painter以及behavior来生成不一样的对象了。接下来就是写painter了，painter分成两种，一种是普通的painter，一种就是精灵表painter，由于像爆炸动画，飞机开枪动画，都不是一张图片就能搞定的，所以就需要用到精灵表了：
而绘制这些就要为他们定制一个精灵表绘制器，下面这个是最简略的精灵表绘制器，针对游戏的复杂性可以相对的修改精灵表写法，直到合适，不外道理都大同小异，就是小修小改罢了：
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的代码：
(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;i40){
this.advance();
this.dateCount = newd;
}
}
if(this.cellIndexsprite.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.topcanvas.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;
}
if(sprite.rotateRight){
sprite.rotateAngle += sprite.rotateSpeed;
}
if(sprite.fire&&!sprite.painter.isActive){
sprite.painter.isActive = true;
this.shot(sprite);
}
},
shot:function(sprite){
this.addMissle(sprite , sprite.rotateAngle);
var missleAngle = 0.1
for(var i=1;i canvas.height){
sprite.left = Math.random()*canvas.width;
sprite.top = Math.random()*canvas.height - canvas.height;
}
sprite.top += sprite.speed;
}}
]
W.starPainter = {
paint:function(sprite){
ctx.drawImage(sprite.cacheCanvas , sprite.left-sprite.width/2-sprite.lightLength , sprite.top-sprite.width/2-sprite.lightLength)
},
cache:function(sprite){
sprite.cacheCtx.save();
var opacity = 0.5,addopa = 1/sprite.lightLength;
sprite.cacheCtx.fillStyle = "rgba(255,255,255,0.8)";
sprite.cacheCtx.beginPath();
sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2 , 0 , 2*Math.PI);
sprite.cacheCtx.fill();
for(var i=1;i<=sprite.lightLength;i+=2){
opacity-=addopa;
sprite.cacheCtx.fillStyle = "rgba(255,255,255,"+opacity+")";
sprite.cacheCtx.beginPath();
sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2+i , 0 , 2*Math.PI);
sprite.cacheCtx.fill();
}
}
}
W.foodBehavior = [
{execute:function(sprite,time){
sprite.top += sprite.speed;
if(sprite.top > canvas.height+sprite.width){
sprite.visible = false;
}
}}
]
W.foodPainter = {
paint:function(sprite){
ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"
ctx.font="15px 微软雅黑"
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(sprite.kind , sprite.left , sprite.top);
}
}
W.missleBehavior = [{
execute:function(sprite,time){
sprite.left -= sprite.velocityX;
sprite.top -= sprite.velocityY;
if(sprite.left<-missleWidth/2||sprite.top<-missleHeight/2||sprite.left>canvas.width+missleWidth/2||sprite.top<-missleHeight/2){
sprite.visible = false;
}
}
}];
W.misslePainter = {
paint:function(sprite){
var img = new Image();
img.src="../planGame/image/plasma.png"
ctx.drawImage(img , -missleWidth/2+1 , -missleHeight/2+1 , missleWidth , missleHeight);
}
}
W.badPlanBehavior = [{
execute:function(sprite,time){
if(sprite.top > canvas.height || !sprite.visible){
var random = Math.random();
if(point>=200&&point<400){
sprite.fullBlood = 150;
if(random<0.1){
sprite.badKind = 2;
sprite.fullBlood = 250;
}
}else if(point>=400&&point<600){
sprite.fullBlood = 250;
if(random<0.2){
sprite.badKind = 2;
sprite.fullBlood = 400;
}
if(random<0.1){
sprite.badKind = 3;
sprite.fullBlood = 600;
}
}else if(point>=600){
sprite.fullBlood = 500;
if(random<0.4){
sprite.badKind = 2;
sprite.fullBlood = 700;
}
if(random<0.2){
sprite.badKind = 3;
sprite.fullBlood = 1000;
}
}
sprite.visible = true;
sprite.blood = sprite.fullBlood;
sprite.left = Math.random()*(canvas.width-2*planWidth)+planWidth;
sprite.top = Math.random()*canvas.height - canvas.height;
}
sprite.top += sprite.speed;
},
shot:function(sprite){
this.addMissle(sprite , sprite.rotateAngle);
var missleAngle = 0.1
for(var i=1;i这些绘制办法之类的都相对照较简略。
主要说一下飞机的运动以及对象数目的控制，飞机怎么运动？毫无疑难，通过键盘控制它运动，可能许多人就会想到通过keydown这个办法按下的时候通过推断keyCode来让飞机延续运动。但是有个题目，keydown事件不支撑多键按下，也就是说，当你按下X键时，keyCode是88，与此同时你按下标的目的键后，keyCode会眨眼酿成37，也就是说，要是你纯正的想靠keydown来控制飞机运动，飞机就只能做一件事，要末只可以往某个标的目的挪移，要末只会开枪。
所以，我们要通过keydown和keyup来实现飞机的运动，道理很容易了解：当我们按下往左的标的目的键时，我们给飞机一个往左的状态，也就是让飞机的toLeft属性为true，而在动画轮回中，推断飞机的状态，要是toLeft为true则飞机的x值不绝地减少，飞机也就会不绝地往左挪移，然后当我们抬起手指时触发keyup事件，我们就再keyup事件中解除飞机往左的状态。飞机也就休止往左挪移了。其他状态也同样的道理，这样写的话，就能够让飞机多种状态于一生了。可以同时开枪同时各处跑了。
实现的代码如下：
//keydown/keyup事件的绑定
window.onkeydown = function(event){
switch(event.keyCode){
case 88:myplan.fire = true;
break;
case 90:myplan.rotateLeft=true;
break;
case 67:myplan.rotateRight=true;
break;
case 37:myplan.toLeft = true;
break;
case 38:myplan.toTop = true;
break;
case 39:myplan.toRight = true;
break;
case 40:myplan.toBottom = true;
break;
}
}
window.onkeyup = function(event){
switch(event.keyCode){
case 88:myplan.fire = false;
break;
case 90:myplan.rotateLeft=false;
break;
case 67:myplan.rotateRight=false;
break;
case 37:myplan.toLeft = false;
break;
case 38:myplan.toTop = false;
break;
case 39:myplan.toRight = false;
break;
case 40:myplan.toBottom = false;
break;
}
}
//飞机每一帧的状态更新处置代码
execute:function(sprite,time){
if(sprite.toTop){
spritesprite.top = sprite.topcanvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;
}
if(sprite.toBottom){
spritesprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;
}
if(sprite.rotateLeft){
sprite.rotateAngle -= sprite.rotateSpeed;
}
if(sprite.rotateRight){
sprite.rotateAngle += sprite.rotateSpeed;
}
if(sprite.fire&&!sprite.painter.isActive){
sprite.painter.isActive = true;
this.shot(sprite);
} 就是如此简略。
然后说下对象控制，打飞机游戏，会发射批量子弹，发生批量对象，包含爆炸啊，飞机啊，子弹等，要是不绝地进行对象的生成和烧毁，会让阅读器的负荷变得很大，运转了一段工夫后就会卡出翔了。所以，我们要用可以轮回应用的对象来解决这个题目，不进行对象的烧毁，对所有对象进行保留，轮回应用。
我的做法就是，在游戏初始化的时候，直接生成一定数目的对象，寄存在数组里面。当我们需要一个对象的时候，就从里面取，当用完后，再放回数组里面。数组里的所有对象都有一个属性，visible，代表对象目前可否可用。
举个例子，当我的飞机发射一发炮弹，我需要一发炮弹，所以我就到炮弹数组里遍历，要是遍历到的炮弹visible为true，也就注明该对象正在运用着，不克不及拿来用，所以继续遍历，直到遍历到visible为false的炮弹对象，注明这个对象临时没人用。然后就可以拿过来从新设定属性，投入运用了。当炮弹击中敌人或者打出画布外的时候，把炮弹的visible设成false，又成了一个没人用的炮弹在数组里寄存起来期待下一次调取。
所以，我们要估算算好页面大约要用到多少个对象，然后就预先预备好对象，这样，在游戏进行中，不会有对象进行生成和烧毁，对游戏机能方面就有了提拔了。
最后再说下音频，游戏里面要用到多个一样的audio才干保障音效的不间断性：
var audio = document.getElementsByTagName("audio");
for(var i=0;i=0&&audio[i].paused){
audio[i].play();
break;
}
}好吧，根本上就这样了。技术也许还不足好，纯碎做个记载，要是代码有不妥正处，欢送指出，共同窗习。
以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！
