搜索

首页 >web前端 >H5教程 >利用HTML5 Canvas制作一个简单的打飞机游戏_html5教程技巧

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

WBOY
WBOY原创
2016-05-16 15:46:342095浏览

之前在当耐特的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.   
  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;   
  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;ithis.behaviors.length;i++){   
  81.                 this.behaviors[i].execute(this,time);   
  82.             }   
  83.         }   
  84.     }   
  85. }   


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

2015511181533636.png (896×64)

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

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.   
  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;ithis.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.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.     }   
  128.   
  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.     }   
  163.   
  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;   
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：检测浏览器对HTML5和CSS3支持度的方法_html5教程技巧下一篇：HTML5的一个显示电池状态的API简介_html5教程技巧

相关文章

查看更多