之前在當耐特的DEMO里看到個打飛機的游戲，然后就把他的圖片和音頻扒了了下來。。。。自己憑著玩的心情重新寫了一個。僅供娛樂哈。。。。。。我沒有用框架，所有js都是自己寫的。。。。。。所以就可以來當個簡單的教程，對那些剛玩canvas的，或許能有些幫助，樓主玩canvas也不是很久，技術(shù)不是很好，請見諒哈。

?

　　閑話不多說，先上DEMO撒：飛機游戲? ?樓主寫這個人純碎娛樂，沒想著寫成多正式的游戲哈。

　　步入主題啦：打飛機游戲文件有index.html入口文件，allSprite.js精靈的邏輯處理文件，loading.js加載處理文件以及data.js（初始化的一些數(shù)據(jù)）。

　　首先，正常的游戲基本上都需要一個loading，loading頁面就是用來預(yù)加載數(shù)據(jù)的，包括精靈表圖片，音頻等，因為這是個小游戲，要加載的就只有一些音頻和圖片。里面的加載代碼主要就下面這些，其他是制作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里面用一個數(shù)組保存文件的鏈接，然后判斷這些鏈接是圖片還是音頻，如果是圖片就用preLoadImg加載，預(yù)加載圖片的代碼很簡單，就是new一個圖片對象，然后把鏈接賦給它，加載完后再回調(diào)。音頻的加載則是通過生成一個HTML5的audio dom對象，把鏈接賦給它，audio有一個事件“canplaythrough”，瀏覽器預(yù)計能夠在不停下來進行緩沖的情況下持續(xù)播放指定的音頻/視頻時，會發(fā)生 canplaythrough 事件，也就是說當canplaythrough被調(diào)用時，音頻就已經(jīng)被加載的差不多了，可以進行下一個音頻的加載了。就這樣當把所有東西都加載完后，再進行回調(diào)，開始游戲。

　　游戲開始了，一個游戲，會需要很多的對象，所以我就統(tǒng)一寫成了一個精靈對象，不同對象之間的每一幀的運動情況直接用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");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);}}}}

寫出精靈類后，游戲拍賣平臺就可以通過編寫每個的painter以及behavior來生成不同的對象了。接下來就是寫painter了，painter分成兩種，一種是普通的painter，一種就是精靈表painter，因為像爆炸動畫，飛機開槍動畫，都不是一張圖片就能搞定的，所以就需要用到精靈表了：

而繪制這些就要為他們定制一個精靈表繪制器，下面這個是最簡單的精靈表繪制器，針對游戲的復(fù)雜性可以相對的修改精靈表寫法，直到合適，不過原理都大同小異，就是小修小改而已：

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

?View Code

這些繪制方法之類的都相對比較簡單。

　　主要說一下飛機的運動以及對象數(shù)量的控制，飛機怎么運動？毫無疑問，通過鍵盤控制它運動，可能很多人就會想到通過keydown這個方法按下的時候通過判斷keyCode來讓飛機持續(xù)運動。但是有個問題，keydown事件不支持多鍵按下，也就是說，當你按下X鍵時，keyCode是88，與此同時你按下方向鍵后，keyCode會瞬間變成37，也就是說，如果你單純的想靠keydown來控制飛機運動，飛機就只能做一件事，要么只可以往某個方向移動，要么只會開槍。

　　所以，我們要通過keydown和keyup來實現(xiàn)飛機的運動，原理很容易理解：當我們按下往左的方向鍵時，我們給飛機一個往左的狀態(tài)，也就是讓飛機的toLeft屬性為true，而在動畫循環(huán)中，判斷飛機的狀態(tài)，如果toLeft為true則飛機的x值不停地減少，飛機也就會不停地往左移動，然后當我們抬起手指時觸發(fā)keyup事件，我們就再keyup事件中解除飛機往左的狀態(tài)。飛機也就停止往左移動了。其他狀態(tài)也一樣的原理，這樣寫的話，就能夠讓飛機多種狀態(tài)于一生了。可以同時開槍同時到處跑了。

實現(xiàn)的代碼如下：

//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;}} //飛機每一幀的狀態(tài)更新處理代碼 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);}

就是如此簡單。

　　然后說下對象控制，打飛機游戲，會發(fā)射大量子彈，產(chǎn)生大量對象，包括爆炸啊，飛機啊，子彈等，如果不停地進行對象的生成和銷毀，會讓瀏覽器的負荷變得很大，運行了一段時間后就會卡出翔了。所以，我們要用可以循環(huán)利用的對象來解決這個問題，不進行對象的銷毀，對所有對象進行保存，循環(huán)利用。

　　我的做法就是，在游戲初始化的時候，直接生成一定數(shù)量的對象，存放在數(shù)組里面。當我們需要一個對象的時候，就從里面取，當用完后，再放回數(shù)組里面。數(shù)組里的所有對象都有一個屬性，visible，代表對象當前是否可用。

　　舉個例子，當我的飛機發(fā)射一發(fā)炮彈，我需要一發(fā)炮彈，所以我就到炮彈數(shù)組里遍歷，如果遍歷到的炮彈visible為true，也就說明該對象正在使用著，不能拿來用，所以繼續(xù)遍歷，直到遍歷到visible為false的炮彈對象，說明這個對象暫時沒人用。然后就可以拿過來重新設(shè)置屬性，投入使用了。當炮彈擊中敵人或者打出畫布外的時候，把炮彈的visible設(shè)成false，又成了一個沒人用的炮彈在數(shù)組里存放起來等待下一次調(diào)用。

　　所以，我們要預(yù)算算好頁面大概要用到多少個對象，然后就預(yù)先準備好對象，這樣，在游戲進行中，不會有對象進行生成和銷毀，對游戲性能方面就有了提升了。

　　

　　最后再說下音頻，游戲里面要用到多個同樣的audio才能保證音效的不間斷性：

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

好吧，基本上就這樣了。技術(shù)或許還不夠好，純碎做個記錄，如果代碼有不當正處，歡迎指出，共同學習。

總結(jié)

以上是生活随笔為你收集整理的用canvas整个打飞机游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。