欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-01 14:41:08
...
之前在当耐特的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. },
  34. //再贴出preLoadImg的方法
  35. function preLoadImg(src , callback){
  36. var img = new Image();
  37. img.src = src;
  38. if(img.complete){
  39. callback.call(img);
  40. }else {
  41. img.onload = function(){
  42. callback.call(img);
  43. }
  44. }
  45. }


我先在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;
  49. this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);
  50. if(args){
  51. for(var arg in args){
  52. this[arg] = args[arg];
  53. }
  54. }
  55. }
  56. Sprite.prototype = {
  57. constructor:Sprite,
  58. paint:function(){
  59. if(this.name==="badPlan"){this.update();}
  60. if(this.painter !== undefined && this.visible){
  61. if(this.name!=="badPlan") {
  62. this.update();
  63. }
  64. if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){
  65. ctx.save();
  66. ctx.translate(this.left , this.top);
  67. ctx.rotate(this.rotateAngle);
  68. this.painter.paint(this);
  69. ctx.restore();
  70. }else {
  71. this.painter.paint(this);
  72. }
  73. }
  74. },
  75. update:function(time){
  76. if(this.behaviors){
  77. for(var i=0;ithis.behaviors.length;i++){
  78. this.behaviors[i].execute(this,time);
  79. }
  80. }
  81. }
  82. }


写出精灵类后,就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了,painter分成两种,一种是普通的painter,一种就是精灵表painter,因为像爆炸动画,飞机开枪动画,都不是一张图片就能搞定的,所以就需要用到精灵表了:
利用HTML5 Canvas制作一个简单的打飞机游戏_html5教程技巧

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

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

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;
  57. this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);
  58. if(args){
  59. for(var arg in args){
  60. this[arg] = args[arg];
  61. }
  62. }
  63. }
  64. Sprite.prototype = {
  65. constructor:Sprite,
  66. paint:function(){
  67. if(this.name==="badPlan"){this.update();}
  68. if(this.painter !== undefined && this.visible){
  69. if(this.name!=="badPlan") {
  70. this.update();
  71. }
  72. if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){
  73. ctx.save();
  74. ctx.translate(this.left , this.top);
  75. ctx.rotate(this.rotateAngle);
  76. this.painter.paint(this);
  77. ctx.restore();
  78. }else {
  79. this.painter.paint(this);
  80. }
  81. }
  82. },
  83. update:function(time){
  84. if(this.behaviors){
  85. for(var i=0;ithis.behaviors.length;i++){
  86. this.behaviors[i].execute(this,time);
  87. }
  88. }
  89. }
  90. }
  91. // 精灵表绘制器
  92. W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){
  93. this.cells = cells || [];
  94. this.cellIndex = 0;
  95. this.dateCount = null;
  96. this.isloop = isloop;
  97. this.endCallback = endCallback;
  98. this.spritesheet = spritesheet;
  99. }
  100. SpriteSheetPainter.prototype = {
  101. advance:function(){
  102. this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);
  103. },
  104. paint:function(sprite){
  105. if(this.dateCount===null){
  106. this.dateCount = new Date();
  107. }else {
  108. var newd = new Date();
  109. var tc = newd-this.dateCount;
  110. if(tc>40){
  111. this.advance();
  112. this.dateCount = newd;
  113. }
  114. }
  115. if(this.cellIndexthis.cells.length || this.isloop){
  116. var cell = this.cells[this.cellIndex];
  117. 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);
  118. } else if(this.endCallback){
  119. this.endCallback.call(sprite);
  120. this.cellIndex = 0;
  121. }
  122. }
  123. }
  124. //特制飞机精灵表绘制器
  125. W.controllSpriteSheetPainter = function(cells , spritesheet){
  126. this.cells = cells || [];
  127. this.cellIndex = 0;
  128. this.dateCount = null;
  129. this.isActive = false;
  130. this.derection = true;
  131. this.spritesheet = spritesheet;
  132. }
  133. controllSpriteSheetPainter.prototype = {
  134. advance:function(){
  135. if(this.isActive){
  136. this.cellIndex++;
  137. if(this.cellIndex === this.cells.length){
  138. this.cellIndex = 0;
  139. this.isActive = false;
  140. }
  141. }
  142. },
  143. paint:function(sprite){
  144. if(this.dateCount===null){
  145. this.dateCount = new Date();
  146. }else {
  147. var newd = new Date();
  148. var tc = newd-this.dateCount;
  149. if(tc>sprite.firePerFrame){
  150. this.advance();
  151. this.dateCount = newd;
  152. }
  153. }
  154. var cell = this.cells[this.cellIndex];
  155. ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);
  156. }
  157. }
  158. W.planBehavior = [
  159. {execute:function(sprite,time){
  160. if(sprite.toTop){
  161. sprite.top = sprite.top
  162. }
  163. if(sprite.toLeft){
  164. sprite.left = sprite.left
  165. }
  166. if(sprite.toRight){
  167. sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;
  168. }
  169. if(sprite.toBottom){
  170. sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;
  171. }
  172. if(sprite.rotateLeft){
  173. sprite.rotateAngle -= sprite.rotateSpeed;
  174. }
  175. if(sprite.rotateRight){
  176. sprite.rotateAngle += sprite.rotateSpeed; 利用HTML5 Canvas制作一个简单的打飞机游戏_html5教程技巧

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


相关标签: HTML5 Canvas