之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个 简单 的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技 术 不是很好，请见谅哈。
闲话不多说，先上DEMO撒：飞机游戏&nbs p; 楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。
步入主题啦：打飞机游戏文件有index.ht ML 入口文件，all sprite .js精灵的逻辑处理文件，loading.js加载处理文件以及data.js（初始化的一些数据）。
首先， 正常 的游戏基本上都需要一个loading，loading页面就是用来预 加载数据 的，包括精灵表图片，音频等，因为这是个小游戏，要加载的就只有一些音频和图片。里面的加载代码主要就下面这些，其他是 制作 loading动画的，那个比较简单，就不贴了，如果有兴趣的直接在DEMO里看控制台就行了：
XM L/HTML Code 复制内容到剪贴板
load img :function(datas){ VAR _this = this; var dat ai ndex = 0 ; li(); function li(){ if(datas[dataIndex].indexOf(" ;m P3 ") > =0){ var audio = document .createElement("audio"); document.body.ap PE ndChild(audio); audio. PR eload = "auto" ; audio.src = datas [dataIndex]; audio.oncan play t hr ough = function (){ this.oncanplaythrough = null ; dataIndex++; if( dataIndex === datas.length){ _this.percent = 100 ; }else { _this.percent = pars ei nt (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.Spr IT e = function (n am e , painter , behaviors , arg s){ if(name !== un define d) 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.velocit yy = 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 this.cacheCtx = this.cacheCanvas.getContext('2d'); this this.cacheCanvas.width = this.width+this.lightLength*2; this 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.re Store (); }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 -s prite.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(); br eak ; } } }, 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.be gin Path(); 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. stroke Style = " # 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){ sprite sprite.top = sprite.top < planHeight /2? sprite.top : sprite.top-sprite.velocityY; } if(sprite.toLeft){ sprite sprite.left = sprite.left < planWidth /2? sprite.left : sprite.left-sprite.velocityX; } if(sprite.toRight){ sprite sprite.left = sprite.left > canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX; } if(sprite.toBottom){ sprite 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); }
就是如此简单。
然后说下对象控制，打飞机游戏，会发射大量子弹，产生大量对象，包括爆炸啊，飞机啊，子弹等，如果不停地进行对象的生成和销毁，会让浏览器的负荷变得很大，运行了一段时间后就会卡出翔了。所以，我们要用可以循环 利用 的对象来解决这个问题，不进行对象的销毁，对所有对象进行保存，循环利用。
我的做法就是，在游戏初始化的时候，直接生成一定数量的对象， 存放 在数组里面。当我们需要一个对象的时候，就从里面取，当用完后，再放回数组里面。数组里的所有对象都有一个属性，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; } }
好吧，基本上就这样了。技术或许还不够好，纯碎做个记录，如果代码有不当正处，欢迎指出，共 同学 习。
源 码地址： https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/planGame
总结
以上是 为你收集整理的 利用HTML5 Canvas制作一个简单的打飞机游戏 全部内容，希望文章能够帮你解决 利用HTML5 Canvas制作一个简单的打飞机游戏 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用HTML5 Canvas制作一个简单的打飞机游戏的详细内容...