之前在當(dāng)耐特的DEMO里看到個打飛機(jī)的游戲,然后就把他的圖片和音頻扒了了下來。。。。自己憑著玩的心情重新寫了一個。僅供娛樂哈。。。。。。我沒有用框架,所有js都是自己寫的。。。。。。所以就可以來當(dāng)個簡單的教程,對那些剛玩canvas的,或許能有些幫助,樓主玩canvas也不是很久,技術(shù)不是很好,請見諒哈。
閑話不多說,先上DEMO撒:飛機(jī)游戲 樓主寫這個人純碎娛樂,沒想著寫成多正式的游戲哈。
步入主題啦:打飛機(jī)游戲文件有index.html入口文件,allSprite.js精靈的邏輯處理文件,loading.js加載處理文件以及data.js(初始化的一些數(shù)據(jù))。
首先,正常的游戲基本上都需要一個loading,loading頁面就是用來預(yù)加載數(shù)據(jù)的,包括精靈表圖片,音頻等,因?yàn)檫@是個小游戲,要加載的就只有一些音頻和圖片。里面的加載代碼主要就下面這些,其他是制作loading動畫的,那個比較簡單,就不貼了,如果有興趣的直接在DEMO里看控制臺就行了:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 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ù)計(jì)能夠在不停下來進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時,會發(fā)生 canplaythrough 事件,也就是說當(dāng)canplaythrough被調(diào)用時,音頻就已經(jīng)被加載的差不多了,可以進(jìn)行下一個音頻的加載了。就這樣當(dāng)把所有東西都加載完后,再進(jìn)行回調(diào),開始游戲。
游戲開始了,一個游戲,會需要很多的對象,所以我就統(tǒng)一寫成了一個精靈對象,不同對象之間的每一幀的運(yùn)動情況直接用behavior來分別編寫就行了。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 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,因?yàn)橄癖▌赢?,飛機(jī)開槍動畫,都不是一張圖片就能搞定的,所以就需要用到精靈表了:
而繪制這些就要為他們定制一個精靈表繪制器,下面這個是最簡單的精靈表繪制器,針對游戲的復(fù)雜性可以相對的修改精靈表寫法,直到合適,不過原理都大同小異,就是小修小改而已:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 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,把要畫的什么東西都寫進(jìn)去就行了。
有了精靈類和精靈表繪制器后,我們就可以把星星,飛機(jī),子彈,爆炸對象都寫出來了:下面是整個allSprite.js的代碼:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- (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);
這些繪制方法之類的都相對比較簡單。
主要說一下飛機(jī)的運(yùn)動以及對象數(shù)量的控制,飛機(jī)怎么運(yùn)動?毫無疑問,通過鍵盤控制它運(yùn)動,可能很多人就會想到通過keydown這個方法按下的時候通過判斷keyCode來讓飛機(jī)持續(xù)運(yùn)動。但是有個問題,keydown事件不支持多鍵按下,也就是說,當(dāng)你按下X鍵時,keyCode是88,與此同時你按下方向鍵后,keyCode會瞬間變成37,也就是說,如果你單純的想靠keydown來控制飛機(jī)運(yùn)動,飛機(jī)就只能做一件事,要么只可以往某個方向移動,要么只會開槍。
所以,我們要通過keydown和keyup來實(shí)現(xiàn)飛機(jī)的運(yùn)動,原理很容易理解:當(dāng)我們按下往左的方向鍵時,我們給飛機(jī)一個往左的狀態(tài),也就是讓飛機(jī)的toLeft屬性為true,而在動畫循環(huán)中,判斷飛機(jī)的狀態(tài),如果toLeft為true則飛機(jī)的x值不停地減少,飛機(jī)也就會不停地往左移動,然后當(dāng)我們抬起手指時觸發(fā)keyup事件,我們就再keyup事件中解除飛機(jī)往左的狀態(tài)。飛機(jī)也就停止往左移動了。其他狀態(tài)也一樣的原理,這樣寫的話,就能夠讓飛機(jī)多種狀態(tài)于一生了??梢酝瑫r開槍同時到處跑了。
實(shí)現(xiàn)的代碼如下:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- //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;
- }
- }
-
-
- //飛機(jī)每一幀的狀態(tài)更新處理代碼
- 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);
-
- }
就是如此簡單。
然后說下對象控制,打飛機(jī)游戲,會發(fā)射大量子彈,產(chǎn)生大量對象,包括爆炸啊,飛機(jī)啊,子彈等,如果不停地進(jìn)行對象的生成和銷毀,會讓瀏覽器的負(fù)荷變得很大,運(yùn)行了一段時間后就會卡出翔了。所以,我們要用可以循環(huán)利用的對象來解決這個問題,不進(jìn)行對象的銷毀,對所有對象進(jìn)行保存,循環(huán)利用。
我的做法就是,在游戲初始化的時候,直接生成一定數(shù)量的對象,存放在數(shù)組里面。當(dāng)我們需要一個對象的時候,就從里面取,當(dāng)用完后,再放回?cái)?shù)組里面。數(shù)組里的所有對象都有一個屬性,visible,代表對象當(dāng)前是否可用。
舉個例子,當(dāng)我的飛機(jī)發(fā)射一發(fā)炮彈,我需要一發(fā)炮彈,所以我就到炮彈數(shù)組里遍歷,如果遍歷到的炮彈visible為true,也就說明該對象正在使用著,不能拿來用,所以繼續(xù)遍歷,直到遍歷到visible為false的炮彈對象,說明這個對象暫時沒人用。然后就可以拿過來重新設(shè)置屬性,投入使用了。當(dāng)炮彈擊中敵人或者打出畫布外的時候,把炮彈的visible設(shè)成false,又成了一個沒人用的炮彈在數(shù)組里存放起來等待下一次調(diào)用。
所以,我們要預(yù)算算好頁面大概要用到多少個對象,然后就預(yù)先準(zhǔn)備好對象,這樣,在游戲進(jìn)行中,不會有對象進(jìn)行生成和銷毀,對游戲性能方面就有了提升了。
最后再說下音頻,游戲里面要用到多個同樣的audio才能保證音效的不間斷性:
復(fù)制代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 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ù)或許還不夠好,純碎做個記錄,如果代碼有不當(dāng)正處,歡迎指出,共同學(xué)習(xí)。
源碼地址:https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/planGame