利用HTML5 Canvas制作一个简单的打飞机游戏_html5教程技巧

之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。

　　闲话不多说，先上DEMO撒：飞机游戏 楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。

　　步入主题啦：打飞机游戏文件有index.html入口文件，allSprite.js精灵的逻辑处理文件，loading.js加载处理文件以及data.js（初始化的一些数据）。

　　首先，正常的游戏基本上都需要一个loading，loading页面就是用来预加载数据的，包括精灵表图片，音频等，因为这是个小游戏，要加载的就只有一些音频和图片。里面的加载代码主要就下面这些，其他是制作loading动画的，那个比较简单，就不贴了，如果有兴趣的直接在DEMO里看控制台就行了：

XML/HTML Code复制内容到剪贴板

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. },
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里面用一个数组保存文件的链接，然后判断这些链接是图片还是音频，如果是图片就用preLoadImg加载，预加载图片的代码很简单，就是new一个图片对象，然后把链接赋给它，加载完后再回调。音频的加载则是通过生成一个HTML5的audio dom对象，把链接赋给它，audio有一个事件“canplaythrough”，浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件，也就是说当canplaythrough被调用时，音频就已经被加载的差不多了，可以进行下一个音频的加载了。就这样当把所有东西都加载完后，再进行回调，开始游戏。

　　游戏开始了，一个游戏，会需要很多的对象，所以我就统一写成了一个精灵对象，不同对象之间的每一帧的运动情况直接用behavior来分别编写就行了。

XML/HTML Code复制内容到剪贴板

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;
50. this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);
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();}
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;ithis.behaviors.length;i++){
81. this.behaviors[i].execute(this,time);
82. }
83. }
84. }
85. }

写出精灵类后，就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了，painter分成两种，一种是普通的painter，一种就是精灵表painter，因为像爆炸动画，飞机开枪动画，都不是一张图片就能搞定的，所以就需要用到精灵表了：

而绘制这些就要为他们定制一个精灵表绘制器，下面这个是最简单的精灵表绘制器，针对游戏的复杂性可以相对的修改精灵表写法，直到合适，不过原理都大同小异，就是小修小改而已：

XML/HTML Code复制内容到剪贴板

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

而普通的绘制器就更简单了，直接写一个painter，把要画的什么东西都写进去就行了。

有了精灵类和精灵表绘制器后，我们就可以把星星，飞机，子弹，爆炸对象都写出来了：下面是整个allSprite.js的代码：

JavaScript Code复制内容到剪贴板

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;
58. this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);
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();}
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;ithis.behaviors.length;i++){
89. this.behaviors[i].execute(this,time);
90. }
91. }
92. }
93. }
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.cellIndexthis.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. }
129. //特制飞机精灵表绘制器
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. }
164. W.planBehavior = [
165. {execute:function(sprite,time){
166. if(sprite.toTop){
167. sprite.top = sprite.top
168. }
169. if(sprite.toLeft){
170. sprite.left = sprite.left
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;

     声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html5离线存储有哪些
• 深入解析asp.net中mvc4自定义404页面（...
• h5新增标签audio与video的使用
• 你值得了解的HTTP缓存机制（代码详解）
• 利用HTML5 Canvas制作一个简单的打飞机游...

• 什么是HTML5
• HTML5
• HTML5 Canvas
• HTML5 Canvas
• HTML5 Canvas