应用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; 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; } }
好吧,根本上就这样了。技术或许还不足好,纯碎做个记载,假如代码有不妥正处,欢迎指出,共同学习。
相关引荐:
HTML5 Video/Audio播放当地文件
以上就是利用HTML5 Canvas制作一个简便的打飞机游戏的具体内容,更多请关注百分百源码网其它相关文章!