如何利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲

這篇文章主要介紹“如何利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲”，在日常操作中，相信很多人在如何利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

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

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

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

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

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

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

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)單了，直接寫一個(gè)painter，把要畫的什么東西都寫進(jìn)去就行了。

有了精靈類和精靈表繪制器后，我們就可以把星星，飛機(jī)，子彈，爆炸對(duì)象都寫出來了：下面是整個(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)單。

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

　　所以，我們要通過keydown和keyup來實(shí)現(xiàn)飛機(jī)的運(yùn)動(dòng)，原理很容易理解：當(dāng)我們按下往左的方向鍵時(shí)，我們給飛機(jī)一個(gè)往左的狀態(tài)，也就是讓飛機(jī)的toLeft屬性為true，而在動(dòng)畫循環(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)也一樣的原理，這樣寫的話，就能夠讓飛機(jī)多種狀態(tài)于一生了。可以同時(shí)開槍同時(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)單。

　　然后說下對(duì)象控制，打飛機(jī)游戲，會(huì)發(fā)射大量子彈，產(chǎn)生大量對(duì)象，包括爆炸啊，飛機(jī)啊，子彈等，如果不停地進(jìn)行對(duì)象的生成和銷毀，會(huì)讓瀏覽器的負(fù)荷變得很大，運(yùn)行了一段時(shí)間后就會(huì)卡出翔了。所以，我們要用可以循環(huán)利用的對(duì)象來解決這個(gè)問題，不進(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，也就說明該對(duì)象正在使用著，不能拿來用，所以繼續(xù)遍歷，直到遍歷到visible為false的炮彈對(duì)象，說明這個(gè)對(duì)象暫時(shí)沒人用。然后就可以拿過來重新設(shè)置屬性，投入使用了。當(dāng)炮彈擊中敵人或者打出畫布外的時(shí)候，把炮彈的visible設(shè)成false，又成了一個(gè)沒人用的炮彈在數(shù)組里存放起來等待下一次調(diào)用。

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

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

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

到此，關(guān)于“如何利用HTML5 Canvas制作一個(gè)簡(jiǎn)單的打飛機(jī)游戲”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！