主頁(yè) > 知識(shí)庫(kù) > 利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲

利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲
熱門(mén)標(biāo)簽：百度競(jìng)價(jià)點(diǎn)擊價(jià)格的計(jì)算公式 使用U盤(pán)裝系統(tǒng) 阿里云 網(wǎng)站建設(shè) 智能手機(jī) 硅谷的囚徒呼叫中心 美圖手機(jī) 檢查注冊(cè)表項(xiàng)

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

　　閑話不多說(shuō)，先上DEMO撒：飛機(jī)游戲   樓主寫(xiě)這個(gè)人純碎娛樂(lè)，沒(méi)想著寫(xiě)成多正式的游戲哈。

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

　　首先，正常的游戲基本上都需要一個(gè)loading，loading頁(yè)面就是用來(lái)預(yù)加載數(shù)據(jù)的，包括精靈表圖片，音頻等，因?yàn)檫@是個(gè)小游戲，要加載的就只有一些音頻和圖片。里面的加載代碼主要就下面這些，其他是制作loading動(dòng)畫(huà)的，那個(gè)比較簡(jiǎn)單，就不貼了，如果有興趣的直接在DEMO里看控制臺(tái)就行了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. loadImg:function(datas){   
  2.             var _this = this;   
  3.             var dataIndex = 0;   
  4.             li();   
  5.             function li(){   
  6.                 if(datas[dataIndex].indexOf("mp3")>=0){   
  7.                     var audio = document.createElement("audio");   
  8.                     document.body.appendChild(audio);   
  9.                     audio.preload = "auto";   
  10.                     audio.src = datas[dataIndex];   
  11.                     audio.oncanplaythrough = function(){   
  12.                         this.oncanplaythrough = null;   
  13.                         dataIndex++;   
  14.                         if(dataIndex===datas.length){   
  15.                             _this.percent = 100;   
  16.                         }else {   
  17.                             _this.percent = parseInt(dataIndex/datas.length*100);   
  18.                             li.call(_this);   
  19.                         }   
  20.                     }   
  21.                 }else {   
  22.                     preLoadImg(datas[dataIndex] , function(){   
  23.                         dataIndex++;   
  24.                         if(dataIndex===datas.length){   
  25.                             _this.percent = 100;   
  26.                         } else {   
  27.                             _this.percent = parseInt(dataIndex/datas.length*100);   
  28.                             li.call(_this);   
  29.                         }   
  30.                     })   
  31.                 }   
  32.             }   
  33.         },   
  34.   
  35. //再貼出preLoadImg的方法   
  36. function preLoadImg(src , callback){   
  37.     var img = new Image();   
  38.     img.src = src;   
  39.     if(img.complete){   
  40.         callback.call(img);   
  41.     }else {   
  42.         img.onload = function(){   
  43.             callback.call(img);   
  44.         }   
  45.     }   
  46. }     


我先在data.js里面用一個(gè)數(shù)組保存文件的鏈接，然后判斷這些鏈接是圖片還是音頻，如果是圖片就用preLoadImg加載，預(yù)加載圖片的代碼很簡(jiǎn)單，就是new一個(gè)圖片對(duì)象，然后把鏈接賦給它，加載完后再回調(diào)。音頻的加載則是通過(guò)生成一個(gè)HTML5的audio dom對(duì)象，把鏈接賦給它，audio有一個(gè)事件“canplaythrough”，瀏覽器預(yù)計(jì)能夠在不停下來(lái)進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時(shí)，會(huì)發(fā)生 canplaythrough 事件，也就是說(shuō)當(dāng)canplaythrough被調(diào)用時(shí)，音頻就已經(jīng)被加載的差不多了，可以進(jìn)行下一個(gè)音頻的加載了。就這樣當(dāng)把所有東西都加載完后，再進(jìn)行回調(diào)，開(kāi)始游戲。

 

　　游戲開(kāi)始了，一個(gè)游戲，會(huì)需要很多的對(duì)象，所以我就統(tǒng)一寫(xiě)成了一個(gè)精靈對(duì)象，不同對(duì)象之間的每一幀的運(yùn)動(dòng)情況直接用behavior來(lái)分別編寫(xiě)就行了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. W.Sprite = function(name , painter , behaviors , args){   
  2.     if(name !== undefined) this.name = name;   
  3.     if(painter !== undefined) this.painter = painter;   
  4.     this.top = 0;   
  5.     this.left = 0;   
  6.     this.width = 0;   
  7.     this.height = 0;   
  8.     this.velocityX = 3;   
  9.     this.velocityY = 2;   
  10.     this.visible = true;   
  11.     this.animating = false;   
  12.     this.behaviors = behaviors;   
  13.     this.rotateAngle = 0;   
  14.     this.blood = 50;   
  15.     this.fullBlood = 50;   
  16.     if(name==="plan"){   
  17.         this.rotateSpeed = 0.05;   
  18.         this.rotateLeft = false;   
  19.         this.rotateRight = false;   
  20.         this.fire = false;   
  21.         this.firePerFrame = 10;   
  22.         this.fireLevel = 1;   
  23.     }else if(name==="star"){   
  24.         this.width = Math.random()*2;   
  25.         this.speed = 1*this.width/2;   
  26.         this.lightLength = 5;   
  27.         this.cacheCanvas = document.createElement("canvas");   
  28.         thisthis.cacheCtx = this.cacheCanvas.getContext('2d');   
  29.         thisthis.cacheCanvas.width = this.width+this.lightLength*2;   
  30.         thisthis.cacheCanvas.height = this.width+this.lightLength*2;   
  31.         this.painter.cache(this);   
  32.     }else if(name==="badPlan"){   
  33.         this.badKind = 1;   
  34.         this.speed = 2;   
  35.         this.rotateAngle = Math.PI;   
  36.     }else if(name==="missle"){   
  37.         this.width = missleWidth;   
  38.     }else if(name==="boom"){   
  39.         this.width = boomWidth;   
  40.     }else if(name==="food"){   
  41.         this.width = 40;   
  42.         this.speed = 3;   
  43.         this.kind = "LevelUP"  
  44.     }   
  45.     this.toLeft = false;   
  46.     this.toTop = false;   
  47.     this.toRight = false;   
  48.     this.toBottom = false;   
  49.   
  50.     this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);   
  51.   
  52.     if(args){   
  53.         for(var arg in args){   
  54.             this[arg] = args[arg];   
  55.         }   
  56.     }   
  57. }   
  58. Sprite.prototype = {   
  59.     constructor:Sprite,   
  60.     paint:function(){   
  61.         if(this.name==="badPlan"){this.update();}   
  62.   
  63.         if(this.painter !== undefined && this.visible){   
  64.             if(this.name!=="badPlan") {   
  65.                 this.update();   
  66.             }   
  67.             if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){   
  68.                 ctx.save();   
  69.                 ctx.translate(this.left , this.top);   
  70.                 ctx.rotate(this.rotateAngle);   
  71.                 this.painter.paint(this);   
  72.                 ctx.restore();   
  73.             }else {   
  74.                 this.painter.paint(this);   
  75.             }   
  76.         }   
  77.     },   
  78.     update:function(time){   
  79.         if(this.behaviors){   
  80.             for(var i=0;i<this.behaviors.length;i++){   
  81.                 this.behaviors[i].execute(this,time);   
  82.             }   
  83.         }   
  84.     }   
  85. }   


寫(xiě)出精靈類后，就可以通過(guò)編寫(xiě)每個(gè)的painter以及behavior來(lái)生成不同的對(duì)象了。接下來(lái)就是寫(xiě)painter了，painter分成兩種，一種是普通的painter，一種就是精靈表painter，因?yàn)橄癖▌?dòng)畫(huà)，飛機(jī)開(kāi)槍動(dòng)畫(huà)，都不是一張圖片就能搞定的，所以就需要用到精靈表了：

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. var SpriteSheetPainter = function(cells){   
  2.             this.cells = cells || [];   
  3.             this.cellIndex = 0;   
  4.         }   
  5.         SpriteSheetPainter.prototype = {   
  6.             advance:function(){   
  7.                 if(this.cellIndex === this.cells.length-1){   
  8.                     this.cellIndex = 0;   
  9.                 }   
  10.                 else this.cellIndex++;   
  11.             },   
  12.             paint:function(sprite){   
  13.                 var cell = this.cells[this.cellIndex];   
  14.                 context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);   
  15.             }   
  16.         }     

而普通的繪制器就更簡(jiǎn)單了，直接寫(xiě)一個(gè)painter，把要畫(huà)的什么東西都寫(xiě)進(jìn)去就行了。

有了精靈類和精靈表繪制器后，我們就可以把星星，飛機(jī)，子彈，爆炸對(duì)象都寫(xiě)出來(lái)了：下面是整個(gè)allSprite.js的代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. (function(W){   
  2.     "use strict"  
  3.     var planWidth = 24,   
  4.         planHeight = 24,   
  5.         missleWidth = 70,   
  6.         missleHeight = 70,   
  7.         boomWidth = 60;   
  8.     //精靈類   
  9.     W.Sprite = function(name , painter , behaviors , args){   
  10.         if(name !== undefined) this.name = name;   
  11.         if(painter !== undefined) this.painter = painter;   
  12.         this.top = 0;   
  13.         this.left = 0;   
  14.         this.width = 0;   
  15.         this.height = 0;   
  16.         this.velocityX = 3;   
  17.         this.velocityY = 2;   
  18.         this.visible = true;   
  19.         this.animating = false;   
  20.         this.behaviors = behaviors;   
  21.         this.rotateAngle = 0;   
  22.         this.blood = 50;   
  23.         this.fullBlood = 50;   
  24.         if(name==="plan"){   
  25.             this.rotateSpeed = 0.05;   
  26.             this.rotateLeft = false;   
  27.             this.rotateRight = false;   
  28.             this.fire = false;   
  29.             this.firePerFrame = 10;   
  30.             this.fireLevel = 1;   
  31.         }else if(name==="star"){   
  32.             this.width = Math.random()*2;   
  33.             this.speed = 1*this.width/2;   
  34.             this.lightLength = 5;   
  35.             this.cacheCanvas = document.createElement("canvas");   
  36.             this.cacheCtx = this.cacheCanvas.getContext('2d');   
  37.             this.cacheCanvas.width = this.width+this.lightLength*2;   
  38.             this.cacheCanvas.height = this.width+this.lightLength*2;   
  39.             this.painter.cache(this);   
  40.         }else if(name==="badPlan"){   
  41.             this.badKind = 1;   
  42.             this.speed = 2;   
  43.             this.rotateAngle = Math.PI;   
  44.         }else if(name==="missle"){   
  45.             this.width = missleWidth;   
  46.         }else if(name==="boom"){   
  47.             this.width = boomWidth;   
  48.         }else if(name==="food"){   
  49.             this.width = 40;   
  50.             this.speed = 3;   
  51.             this.kind = "LevelUP"  
  52.         }   
  53.         this.toLeft = false;   
  54.         this.toTop = false;   
  55.         this.toRight = false;   
  56.         this.toBottom = false;   
  57.   
  58.         this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);   
  59.   
  60.         if(args){   
  61.             for(var arg in args){   
  62.                 this[arg] = args[arg];   
  63.             }   
  64.         }   
  65.     }   
  66.     Sprite.prototype = {   
  67.         constructor:Sprite,   
  68.         paint:function(){   
  69.             if(this.name==="badPlan"){this.update();}   
  70.   
  71.             if(this.painter !== undefined && this.visible){   
  72.                 if(this.name!=="badPlan") {   
  73.                     this.update();   
  74.                 }   
  75.                 if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){   
  76.                     ctx.save();   
  77.                     ctx.translate(this.left , this.top);   
  78.                     ctx.rotate(this.rotateAngle);   
  79.                     this.painter.paint(this);   
  80.                     ctx.restore();   
  81.                 }else {   
  82.                     this.painter.paint(this);   
  83.                 }   
  84.             }   
  85.         },   
  86.         update:function(time){   
  87.             if(this.behaviors){   
  88.                 for(var i=0;i<this.behaviors.length;i++){   
  89.                     this.behaviors[i].execute(this,time);   
  90.                 }   
  91.             }   
  92.         }   
  93.     }   
  94.   
  95.     // 精靈表繪制器   
  96.     W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){   
  97.         this.cells = cells || [];   
  98.         this.cellIndex = 0;   
  99.         this.dateCount = null;   
  100.         this.isloop = isloop;   
  101.         this.endCallback = endCallback;   
  102.         this.spritesheet = spritesheet;   
  103.     }   
  104.     SpriteSheetPainter.prototype = {   
  105.         advance:function(){   
  106.             this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);   
  107.         },   
  108.         paint:function(sprite){   
  109.             if(this.dateCount===null){   
  110.                 this.dateCount = new Date();   
  111.             }else {   
  112.                 var newd = new Date();   
  113.                 var tc = newd-this.dateCount;   
  114.                 if(tc>40){   
  115.                     this.advance();   
  116.                     this.dateCount = newd;   
  117.                 }   
  118.             }   
  119.             if(this.cellIndex<this.cells.length || this.isloop){   
  120.                 var cell = this.cells[this.cellIndex];   
  121.                 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);   
  122.             } else if(this.endCallback){   
  123.                 this.endCallback.call(sprite);   
  124.                 this.cellIndex = 0;   
  125.             }   
  126.         }   
  127.     }   
  128.   
  129.     //特制飛機(jī)精靈表繪制器   
  130.     W.controllSpriteSheetPainter = function(cells , spritesheet){   
  131.         this.cells = cells || [];   
  132.         this.cellIndex = 0;   
  133.         this.dateCount = null;   
  134.         this.isActive = false;   
  135.         this.derection = true;   
  136.         this.spritesheet = spritesheet;   
  137.     }   
  138.     controllSpriteSheetPainter.prototype = {   
  139.         advance:function(){   
  140.             if(this.isActive){   
  141.                 this.cellIndex++;   
  142.                 if(this.cellIndex === this.cells.length){   
  143.                     this.cellIndex = 0;   
  144.                     this.isActive = false;   
  145.                 }   
  146.             }   
  147.         },   
  148.         paint:function(sprite){   
  149.             if(this.dateCount===null){   
  150.                 this.dateCount = new Date();   
  151.             }else {   
  152.                 var newd = new Date();   
  153.                 var tc = newd-this.dateCount;   
  154.                 if(tc>sprite.firePerFrame){   
  155.                     this.advance();   
  156.                     this.dateCount = newd;   
  157.                 }   
  158.             }   
  159.             var cell = this.cells[this.cellIndex];   
  160.             ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);   
  161.         }   
  162.     }   
  163.   
  164.     W.planBehavior = [   
  165.         {execute:function(sprite,time){   
  166.             if(sprite.toTop){   
  167.                 sprite.top = sprite.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY;   
  168.             }   
  169.             if(sprite.toLeft){   
  170.                 sprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;   
  171.             }   
  172.             if(sprite.toRight){   
  173.                 sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;   
  174.             }   
  175.             if(sprite.toBottom){   
  176.                 sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;   
  177.             }   
  178.             if(sprite.rotateLeft){   
  179.                 sprite.rotateAngle -= sprite.rotateSpeed;   
  180.             }   
  181.             if(sprite.rotateRight){   
  182.                 sprite.rotateAngle += sprite.rotateSpeed;   
  183.             }   
  184.             if(sprite.fire&&!sprite.painter.isActive){   
  185.                 sprite.painter.isActive = true;   
  186.                 this.shot(sprite);   
  187.   
  188.             }   
  189.         },   
  190.         shot:function(sprite){   
  191.             this.addMissle(sprite , sprite.rotateAngle);   
  192.             var missleAngle = 0.1   
  193.             for(var i=1;i<sprite.fireLevel;i++){   
  194.                 this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);   
  195.                 this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);   
  196.             }   
  197.   
  198.             var audio = document.getElementsByTagName("audio");   
  199.             for(var i=0;i<audio.length;i++){   
  200.                 console.log(audio[i].paused)   
  201.                 if(audio[i].src.indexOf("shot")>=0&&audio[i].paused){   
  202.                     audio[i].play();   
  203.                     break;   
  204.                 }   
  205.             }   
  206.         },   
  207.         addMissle:function(sprite , angle){   
  208.                 for(var j=0;j<missles.length;j++){   
  209.                     if(!missles[j].visible){   
  210.                         missles[j].left = sprite.left;   
  211.                         missles[j].top = sprite.top;   
  212.                         missles[j].rotateAngle = angle;   
  213.                         var missleSpeed = 20;   
  214.                         missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);   
  215.                         missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);   
  216.                         missles[j].visible = true;   
  217.                         break;   
  218.                     }   
  219.                 }   
  220.             }   
  221.         }   
  222.     ]   
  223.   
  224.     W.starBehavior = [   
  225.         {execute:function(sprite,time){   
  226.             if(sprite.top > canvas.height){   
  227.                 sprite.left = Math.random()*canvas.width;   
  228.                 sprite.top = Math.random()*canvas.height - canvas.height;   
  229.             }   
  230.             sprite.top += sprite.speed;   
  231.         }}   
  232.     ]   
  233.   
  234.     W.starPainter = {   
  235.         paint:function(sprite){   
  236.             ctx.drawImage(sprite.cacheCanvas , sprite.left-sprite.width/2-sprite.lightLength , sprite.top-sprite.width/2-sprite.lightLength)   
  237.         },   
  238.   
  239.         cache:function(sprite){   
  240.             sprite.cacheCtx.save();   
  241.             var opacity = 0.5,addopa = 1/sprite.lightLength;   
  242.             sprite.cacheCtx.fillStyle = "rgba(255,255,255,0.8)";   
  243.             sprite.cacheCtx.beginPath();   
  244.             sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2 , 0 , 2*Math.PI);   
  245.             sprite.cacheCtx.fill();   
  246.             for(var i=1;i<=sprite.lightLength;i+=2){   
  247.                 opacity-=addopa;   
  248.                 sprite.cacheCtx.fillStyle = "rgba(255,255,255,"+opacity+")";   
  249.                 sprite.cacheCtx.beginPath();   
  250.                 sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2+i , 0 , 2*Math.PI);   
  251.                 sprite.cacheCtx.fill();   
  252.             }   
  253.         }   
  254.     }   
  255.   
  256.     W.foodBehavior = [   
  257.         {execute:function(sprite,time){   
  258.             sprite.top += sprite.speed;   
  259.             if(sprite.top > canvas.height+sprite.width){   
  260.                 sprite.visible = false;   
  261.             }   
  262.         }}   
  263.     ]   
  264.   
  265.     W.foodPainter = {   
  266.         paint:function(sprite){   
  267.             ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"  
  268.             ctx.font="15px 微軟雅黑"  
  269.             ctx.textAlign = "center";   
  270.             ctx.textBaseline = "middle";   
  271.             ctx.fillText(sprite.kind , sprite.left , sprite.top);   
  272.         }   
  273.     }   
  274.   
  275.   
  276.   
  277.     W.missleBehavior = [{   
  278.         execute:function(sprite,time){   
  279.             sprite.left -= sprite.velocityX;   
  280.             sprite.top -= sprite.velocityY;   
  281.             if(sprite.left<-missleWidth/2||sprite.top<-missleHeight/2||sprite.left>canvas.width+missleWidth/2||sprite.top<-missleHeight/2){   
  282.                 sprite.visible = false;   
  283.             }   
  284.         }   
  285.     }];   
  286.   
  287.     W.misslePainter = {   
  288.         paint:function(sprite){   
  289.             var img = new Image();   
  290.             img.src="../planGame/image/plasma.png"  
  291.             ctx.drawImage(img , -missleWidth/2+1 , -missleHeight/2+1 , missleWidth , missleHeight);   
  292.         }   
  293.     }   
  294.   
  295.     W.badPlanBehavior = [{   
  296.         execute:function(sprite,time){   
  297.             if(sprite.top > canvas.height || !sprite.visible){   
  298.                 var random = Math.random();   
  299.   
  300.                 if(point>=200&&point<400){   
  301.                     sprite.fullBlood = 150;   
  302.                     if(random<0.1){   
  303.                         sprite.badKind = 2;   
  304.                         sprite.fullBlood = 250;   
  305.                     }   
  306.                 }else if(point>=400&&point<600){   
  307.                     sprite.fullBlood = 250;   
  308.                     if(random<0.2){   
  309.                         sprite.badKind = 2;   
  310.                         sprite.fullBlood = 400;   
  311.                     }   
  312.                     if(random<0.1){   
  313.                         sprite.badKind = 3;   
  314.                         sprite.fullBlood = 600;   
  315.                     }   
  316.                 }else if(point>=600){   
  317.                     sprite.fullBlood = 500;   
  318.                     if(random<0.4){   
  319.                         sprite.badKind = 2;   
  320.                         sprite.fullBlood = 700;   
  321.                     }   
  322.                     if(random<0.2){   
  323.                         sprite.badKind = 3;   
  324.                         sprite.fullBlood = 1000;   
  325.                     }   
  326.                 }   
  327.   
  328.                 sprite.visible = true;   
  329.                 sprite.blood = sprite.fullBlood;   
  330.                 sprite.left = Math.random()*(canvas.width-2*planWidth)+planWidth;   
  331.                 sprite.top = Math.random()*canvas.height - canvas.height;   
  332.             }   
  333.             sprite.top += sprite.speed;   
  334.         },   
  335.         shot:function(sprite){   
  336.             this.addMissle(sprite , sprite.rotateAngle);   
  337.             var missleAngle = 0.1   
  338.             for(var i=1;i<sprite.fireLevel;i++){   
  339.                 this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);   
  340.                 this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);   
  341.             }   
  342.         },   
  343.         addMissle:function(sprite , angle){   
  344.             for(var j=0;j<missles.length;j++){   
  345.                 if(!missles[j].visible){   
  346.                     missles[j].left = sprite.left;   
  347.                     missles[j].top = sprite.top;   
  348.                     missles[j].rotateAngle = angle;   
  349.                     var missleSpeed = 20;   
  350.                     missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);   
  351.                     missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);   
  352.                     missles[j].visible = true;   
  353.                     break;   
  354.                 }   
  355.             }   
  356.         }   
  357.     }];   
  358.   
  359.     W.badPlanPainter = {   
  360.         paint:function(sprite){   
  361.             var img = new Image();   
  362.             img.src="../planGame/image/ship.png"  
  363.             switch(sprite.badKind){   
  364.                 case 1:ctx.drawImage(img , 96 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);   
  365.                 break;   
  366.   
  367.                 case 2:ctx.drawImage(img , 120 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);   
  368.                 break;   
  369.   
  370.                 case 3:ctx.drawImage(img , 144 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);   
  371.                 break;   
  372.             }   
  373.   
  374.             ctx.strokeStyle = "#FFF";   
  375.             ctx.fillStyle = "#F00";   
  376.             var bloodHeight = 1;   
  377.             ctx.strokeRect(-planWidth/2-1 , planHeight+bloodHeight+3 , planWidth+2 , bloodHeight+2);   
  378.             ctx.fillRect(planWidth/2-planWidth*sprite.blood/sprite.fullBlood , planHeight+bloodHeight+3 , planWidth*sprite.blood/sprite.fullBlood , bloodHeight);   
  379.         }   
  380.     }   
  381.   
  382.     W.planSize = function(){   
  383.         return {   
  384.             w:planWidth,   
  385.             h:planHeight   
  386.         }       
  387.     }   
  388. })(window);   

這些繪制方法之類的都相對(duì)比較簡(jiǎn)單。

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

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //keydown/keyup事件的綁定     
  2.   window.onkeydown = function(event){   
  3.             switch(event.keyCode){   
  4.                 case 88:myplan.fire = true;   
  5.                 break;   
  6.                 case 90:myplan.rotateLeft=true;   
  7.                 break;   
  8.                 case 67:myplan.rotateRight=true;   
  9.                 break;   
  10.                 case 37:myplan.toLeft = true;   
  11.                 break;   
  12.                 case 38:myplan.toTop = true;   
  13.                 break;   
  14.                 case 39:myplan.toRight = true;   
  15.                 break;   
  16.                 case 40:myplan.toBottom = true;   
  17.                 break;   
  18.             }   
  19.         }   
  20.   
  21.         window.onkeyup = function(event){   
  22.             switch(event.keyCode){   
  23.                 case 88:myplan.fire = false;   
  24.                 break;   
  25.                 case 90:myplan.rotateLeft=false;   
  26.                 break;   
  27.                 case 67:myplan.rotateRight=false;   
  28.                 break;   
  29.                 case 37:myplan.toLeft = false;   
  30.                 break;   
  31.                 case 38:myplan.toTop = false;   
  32.                 break;   
  33.                 case 39:myplan.toRight = false;   
  34.                 break;   
  35.                 case 40:myplan.toBottom = false;   
  36.                 break;   
  37.             }   
  38.         }       
  39.   
  40.   
  41. //飛機(jī)每一幀的狀態(tài)更新處理代碼   
  42. execute:function(sprite,time){   
  43.             if(sprite.toTop){   
  44.                 spritesprite.top = sprite.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY;   
  45.             }   
  46.             if(sprite.toLeft){   
  47.                 spritesprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;   
  48.             }   
  49.             if(sprite.toRight){   
  50.                 spritesprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;   
  51.             }   
  52.             if(sprite.toBottom){   
  53.                 spritesprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;   
  54.             }   
  55.             if(sprite.rotateLeft){   
  56.                 sprite.rotateAngle -= sprite.rotateSpeed;   
  57.             }   
  58.             if(sprite.rotateRight){   
  59.                 sprite.rotateAngle += sprite.rotateSpeed;   
  60.             }   
  61.             if(sprite.fire&&!sprite.painter.isActive){   
  62.                 sprite.painter.isActive = true;   
  63.                 this.shot(sprite);   
  64.   
  65.             }     

就是如此簡(jiǎn)單。

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

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

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

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

　　

　　最后再說(shuō)下音頻，游戲里面要用到多個(gè)同樣的audio才能保證音效的不間斷性：
復(fù)制代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. var audio = document.getElementsByTagName("audio");   
  2.                                             for(var i=0;i<audio.length;i++){   
  3.                                                 console.log(audio[i].paused)   
  4.                                                 if(audio[i].src.indexOf("boom")>=0&&audio[i].paused){   
  5.                                                     audio[i].play();   
  6.                                                     break;   
  7.                                                 }   
  8.                                             }  

 

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

源碼地址：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/planGame

標(biāo)簽：湖北 湘潭 懷化 山南 煙臺(tái) 賀州 通遼 黃山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266