点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：动视网责编：小采时间：2020-11-27 15:25:12

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

利用HTML5Canvas制作一个简单的打飞机游戏:这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。自己凭着玩的心情重新写了一个。仅供娱乐哈。

推荐度：

点击下载本文 文档为doc格式

导读利用HTML5Canvas制作一个简单的打飞机游戏:这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。自己凭着玩的心情重新写了一个。仅供娱乐哈。

这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下

之前在当耐特的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; 
 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来分别编写就行了。

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){ 
 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); 
 } 
 } 
 } 
}

写出精灵类后，就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了，painter分成两种，一种是普通的painter，一种就是精灵表painter，因为像爆炸动画，飞机开枪动画，都不是一张图片就能搞定的，所以就需要用到精灵表了：

而绘制这些就要为他们定制一个精灵表绘制器，下面这个是最简单的精灵表绘制器，针对游戏的复杂性可以相对的修改精灵表写法，直到合适，不过原理都大同小异，就是小修小改而已：

XML/HTML Code复制内容到剪贴板

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的代码：

JavaScript Code复制内容到剪贴板

(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;i<this.behaviors.length;i++){ 
 this.behaviors[i].execute(this,time); 
 } 
 } 
 } 
 } 

 // 精灵表绘制器
 W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){ 
 this.cells = cells || []; 
 this.cellIndex = 0; 
 this.dateCount = null; 
 this.isloop = isloop; 
 this.endCallback = endCallback; 
 this.spritesheet = spritesheet; 
 } 
 SpriteSheetPainter.prototype = { 
 advance:function(){ 
 this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1); 
 }, 
 paint:function(sprite){ 
 if(this.dateCount===null){ 
 this.dateCount = new Date(); 
 }else { 
 var newd = new Date(); 
 var tc = newd-this.dateCount; 
 if(tc>40){ 
 this.advance(); 
 this.dateCount = newd; 
 } 
 } 
 if(this.cellIndex<this.cells.length || this.isloop){ 
 var cell = this.cells[this.cellIndex]; 
 ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/2 , sprite.top-sprite.width/2 , cell.w , cell.h); 
 } else if(this.endCallback){ 
 this.endCallback.call(sprite); 
 this.cellIndex = 0; 
 } 
 } 
 } 

 //特制飞机精灵表绘制器
 W.controllSpriteSheetPainter = function(cells , spritesheet){ 
 this.cells = cells || []; 
 this.cellIndex = 0; 
 this.dateCount = null; 
 this.isActive = false; 
 this.derection = true; 
 this.spritesheet = spritesheet; 
 } 
 controllSpriteSheetPainter.prototype = { 
 advance:function(){ 
 if(this.isActive){ 
 this.cellIndex++; 
 if(this.cellIndex === this.cells.length){ 
 this.cellIndex = 0; 
 this.isActive = false; 
 } 
 } 
 }, 
 paint:function(sprite){ 
 if(this.dateCount===null){ 
 this.dateCount = new Date(); 
 }else { 
 var newd = new Date(); 
 var tc = newd-this.dateCount; 
 if(tc>sprite.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.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY; 
 } 
 if(sprite.toLeft){ 
 sprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX; 
 } 
 if(sprite.toRight){ 
 sprite.left = sprite.left>canvas.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<sprite.fireLevel;i++){ 
 this.addMissle(sprite , sprite.rotateAngle-i*missleAngle); 
 this.addMissle(sprite , sprite.rotateAngle+i*missleAngle); 
 } 

 var audio = document.getElementsByTagName("audio"); 
 for(var i=0;i<audio.length;i++){ 
 console.log(audio[i].paused) 
 if(audio[i].src.indexOf("shot")>=0&&audio[i].paused){ 
 audio[i].play(); 
 break; 
 } 
 } 
 }, 
 addMissle:function(sprite , angle){ 
 for(var j=0;j<missles.length;j++){ 
 if(!missles[j].visible){ 
 missles[j].left = sprite.left; 
 missles[j].top = sprite.top; 
 missles[j].rotateAngle = angle; 
 var missleSpeed = 20; 
 missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle); 
 missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle); 
 missles[j].visible = true; 
 break; 
 } 
 } 
 } 
 } 
 ] 

 W.starBehavior = [ 
 {execute:function(sprite,time){ 
 if(sprite.top > 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<sprite.fireLevel;i++){ 
 this.addMissle(sprite , sprite.rotateAngle-i*missleAngle); 
 this.addMissle(sprite , sprite.rotateAngle+i*missleAngle); 
 } 
 }, 
 addMissle:function(sprite , angle){ 
 for(var j=0;j<missles.length;j++){ 
 if(!missles[j].visible){ 
 missles[j].left = sprite.left; 
 missles[j].top = sprite.top; 
 missles[j].rotateAngle = angle; 
 var missleSpeed = 20; 
 missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle); 
 missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle); 
 missles[j].visible = true; 
 break; 
 } 
 } 
 } 
 }]; 

 W.badPlanPainter = { 
 paint:function(sprite){ 
 var img = new Image(); 
 img.src="../planGame/image/ship.png"
 switch(sprite.badKind){ 
 case 1:ctx.drawImage(img , 96 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth); 
 break; 

 case 2:ctx.drawImage(img , 120 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth); 
 break; 

 case 3:ctx.drawImage(img , 144 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth); 
 break; 
 } 

 ctx.strokeStyle = "#FFF"; 
 ctx.fillStyle = "#F00"; 
 var bloodHeight = 1; 
 ctx.strokeRect(-planWidth/2-1 , planHeight+bloodHeight+3 , planWidth+2 , bloodHeight+2); 
 ctx.fillRect(planWidth/2-planWidth*sprite.blood/sprite.fullBlood , planHeight+bloodHeight+3 , planWidth*sprite.blood/sprite.fullBlood , bloodHeight); 
 } 
 } 

 W.planSize = function(){ 
 return { 
 w:planWidth, 
 h:planHeight 
 } 
 } 
})(window);

这些绘制方法之类的都相对比较简单。

　　主要说一下飞机的运动以及对象数量的控制，飞机怎么运动？毫无疑问，通过键盘控制它运动，可能很多人就会想到通过keydown这个方法按下的时候通过判断keyCode来让飞机持续运动。但是有个问题，keydown事件不支持多键按下，也就是说，当你按下X键时，keyCode是88，与此同时你按下方向键后，keyCode会瞬间变成37，也就是说，如果你单纯的想靠keydown来控制飞机运动，飞机就只能做一件事，要么只可以往某个方向移动，要么只会开枪。

　　所以，我们要通过keydown和keyup来实现飞机的运动，原理很容易理解：当我们按下往左的方向键时，我们给飞机一个往左的状态，也就是让飞机的toLeft属性为true，而在动画循环中，判断飞机的状态，如果toLeft为true则飞机的x值不停地减少，飞机也就会不停地往左移动，然后当我们抬起手指时触发keyup事件，我们就再keyup事件中解除飞机往左的状态。飞机也就停止往左移动了。其他状态也一样的原理，这样写的话，就能够让飞机多种状态于一生了。可以同时开枪同时到处跑了。

实现的代码如下：

XML/HTML Code复制内容到剪贴板

//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.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY; 
 } 
 if(sprite.toLeft){ 
 spritesprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX; 
 } 
 if(sprite.toRight){ 
 spritesprite.left = sprite.left>canvas.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才能保证音效的不间断性：

XML/HTML Code复制内容到剪贴板

var audio = document.getElementsByTagName("audio"); 
 for(var i=0;i<audio.length;i++){ 
 console.log(audio[i].paused) 
 if(audio[i].src.indexOf("boom")>=0&&audio[i].paused){ 
 audio[i].play(); 
 break; 
 } 
 }

好吧，基本上就这样了。技术或许还不够好，纯碎做个记录，如果代码有不当正处，欢迎指出，共同学习。

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

推荐度：

点击下载本文 文档为doc格式

标签：游戏的游戏 html

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐