基于HTML5的横版射击游戏发布附源码

 功能说明：

成都创新互联公司主营高密网站建设的网络公司,主营网站建设方案,app开发定制,高密h5微信小程序开发搭建,高密网站营销推广欢迎高密等地区企业咨询

基于HTML5的横版射击游戏，参考自flash游戏《双面特工》。左右方向键控制移动，下方向键蹲下，上方向键跳跃，空格键射击。体验前请先关闭输入法。

该游戏基于自己开发的HTML5游戏框架cnGameJS。

效果预览：

实现分析：

1.关于多层地图。

在上一个HTML5游戏《坦克后援队》中，所用的地图只为简单的单层地图，意思是地图中除了石头就是空地，仅仅只有一层的地图。但是这种单层地图具有比较大的局限性，如果需要实现场景类的游戏(例如超级玛丽和上面的游戏)，只有一层的地图往往是不够的，因为我们除了游戏主角所站的障碍物外，还有游戏背景等元素(例如后面的墙壁等)，因此我们需要为地图对象分层，从而达到多层展示的目的。

新增的layer对象：

每个layer对象维护该层的sprite，负责更新和绘制它们，并且可以获取指定坐标在该层的矩阵上的值。layer对象源码如下：

 
 
 
 
    
  
  
  
  
  1. /** 
    2. 
  
  
  
  
  2.         *层对象 
    3. 
  
  
  
  
  3.         **/                                
    4. 
  
  
  
  
  4.         var layer = function(id,mapMatrix, options) { 
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.             if (!(this instanceof arguments.callee)) { 
    7. 
  
  
  
  
  7.                 return new arguments.callee(id,mapMatrix, options); 
    8. 
  
  
  
  
  8.             } 
    9. 
  
  
  
  
  9.             this.init(id,mapMatrix, options); 
    10. 
  
  
  
  
  10.         } 
    11. 
  
  
  
  
  11.         layer.prototype={ 
    12. 
  
  
  
  
  12.              
    13. 
  
  
  
  
  13.             /** 
    14. 
  
  
  
  
  14.             *初始化 
    15. 
  
  
  
  
  15.             **/ 
    16. 
  
  
  
  
  16.             init: function(id,mapMatrix,options) { 
    17. 
  
  
  
  
  17.                 /** 
    18. 
  
  
  
  
  18.                 *默认对象 
    19. 
  
  
  
  
  19.                 **/     
    20. 
  
  
  
  
  20.                 var defaultObj = { 
    21. 
  
  
  
  
  21.                     cellSize: [32, 32],   //方格宽，高 
    22. 
  
  
  
  
  22.                     x: 0,                      //layer起始x 
    23. 
  
  
  
  
  23.                     y: 0                  //layer起始y 
    24. 
  
  
  
  
  24.      
    25. 
  
  
  
  
  25.                 };     
    26. 
  
  
  
  
  26.                 optionsoptions = options || {}; 
    27. 
  
  
  
  
  27.                 options = cg.core.extend(defaultObj, options); 
    28. 
  
  
  
  
  28.                 this.id=options.id; 
    29. 
  
  
  
  
  29.                 this.mapMatrix = mapMatrix; 
    30. 
  
  
  
  
  30.                 this.cellSize = options.cellSize; 
    31. 
  
  
  
  
  31.                 this.x = options.x; 
    32. 
  
  
  
  
  32.                 this.y = options.y; 
    33. 
  
  
  
  
  33.                 this.row = mapMatrix.length; //有多少行 
    34. 
  
  
  
  
  34.                 thisthis.width=this.cellSize[0]* mapMatrix[0].length; 
    35. 
  
  
  
  
  35.                 thisthis.height=this.cellSize[1]* this.row; 
    36. 
  
  
  
  
  36.                 this.spriteList=new cg.SpriteList();//该层上的sprite列表 
    37. 
  
  
  
  
  37.                 this.imgsReference=options.imgsReference;//图片引用字典：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}} 
    38. 
  
  
  
  
  38.                 this.zIindex=options.zIndex; 
    39. 
  
  
  
  
  39.             }, 
    40. 
  
  
  
  
  40.             /** 
    41. 
  
  
  
  
  41.             *添加sprite 
    42. 
  
  
  
  
  42.             **/             
    43. 
  
  
  
  
  43.             addSprites:function(sprites){ 
    44. 
  
  
  
  
  44.                 if (cg.core.isArray(sprites)) { 
    45. 
  
  
  
  
  45.                     for (var i = 0, len = sprites.length; i < len; i++) { 
    46. 
  
  
  
  
  46.                         arguments.callee.call(this, sprites[i]); 
    47. 
  
  
  
  
  47.                     } 
    48. 
  
  
  
  
  48.                 } 
    49. 
  
  
  
  
  49.                 else{ 
    50. 
  
  
  
  
  50.                     this.spriteList.add(sprites); 
    51. 
  
  
  
  
  51.                     sprites.layer=this; 
    52. 
  
  
  
  
  52.                 }                 
    53. 
  
  
  
  
  53.                  
    54. 
  
  
  
  
  54.             }, 
    55. 
  
  
  
  
  55.             /** 
    56. 
  
  
  
  
  56.             *获取特定对象在layer中处于的方格的值 
    57. 
  
  
  
  
  57.             **/ 
    58. 
  
  
  
  
  58.             getPosValue: function(x, y) { 
    59. 
  
  
  
  
  59.                 if (cg.core.isObject(x)) { 
    60. 
  
  
  
  
  60.                     y = x.y; 
    61. 
  
  
  
  
  61.                     xx = x.x; 
    62. 
  
  
  
  
  62.                 } 
    63. 
  
  
  
  
  63.                 var isUndefined = cg.core.isUndefined; 
    64. 
  
  
  
  
  64.                 y = Math.floor(y / this.cellSize[1]); 
    65. 
  
  
  
  
  65.                 x = Math.floor(x / this.cellSize[0]); 
    66. 
  
  
  
  
  66.                 if (!isUndefined(this.mapMatrix[y]) && !isUndefined(this.mapMatrix[y][x])) { 
    67. 
  
  
  
  
  67.                     return this.mapMatrix[y][x]; 
    68. 
  
  
  
  
  68.                 } 
    69. 
  
  
  
  
  69.                 return undefined; 
    70. 
  
  
  
  
  70.             }, 
    71. 
  
  
  
  
  71.             /** 
    72. 
  
  
  
  
  72.             *获取特定对象在layer中处于的方格索引 
    73. 
  
  
  
  
  73.             **/ 
    74. 
  
  
  
  
  74.             getCurrentIndex: function(x, y) { 
    75. 
  
  
  
  
  75.                 if (cg.core.isObject(x)) { 
    76. 
  
  
  
  
  76.                     y = x.y; 
    77. 
  
  
  
  
  77.                     xx = x.x; 
    78. 
  
  
  
  
  78.                 } 
    79. 
  
  
  
  
  79.                 return [Math.floor(x / this.cellSize[0]), Math.floor(y / this.cellSize[1])]; 
    80. 
  
  
  
  
  80.             }, 
    81. 
  
  
  
  
  81.             /** 
    82. 
  
  
  
  
  82.             *获取特定对象是否刚好与格子重合 
    83. 
  
  
  
  
  83.             **/ 
    84. 
  
  
  
  
  84.             isMatchCell: function(x, y) { 
    85. 
  
  
  
  
  85.                 if (cg.core.isObject(x)) { 
    86. 
  
  
  
  
  86.                     y = x.y; 
    87. 
  
  
  
  
  87.                     xx = x.x; 
    88. 
  
  
  
  
  88.                 } 
    89. 
  
  
  
  
  89.                 return (x % this.cellSize[0] == 0) && (y % this.cellSize[1] == 0); 
    90. 
  
  
  
  
  90.             }, 
    91. 
  
  
  
  
  91.             /** 
    92. 
  
  
  
  
  92.             *设置layer对应位置的值 
    93. 
  
  
  
  
  93.             **/ 
    94. 
  
  
  
  
  94.             setPosValue: function(x, y, value) { 
    95. 
  
  
  
  
  95.                 this.mapMatrix[y][x] = value; 
    96. 
  
  
  
  
  96.             }, 
    97. 
  
  
  
  
  97.             /** 
    98. 
  
  
  
  
  98.             *更新层上的sprite列表 
    99. 
  
  
  
  
  99.             **/             
    100. 
  
  
  
  
  100.             update:function(duration){ 
    101. 
  
  
  
  
  101.                 this.spriteList.update(duration); 
    102. 
  
  
  
  
  102.                  
    103. 
  
  
  
  
  103.             }, 
    104. 
  
  
  
  
  104.             /** 
    105. 
  
  
  
  
  105.             *根据layer的矩阵绘制layer和该layer上的所有sprite 
    106. 
  
  
  
  
  106.             **/ 
    107. 
  
  
  
  
  107.             draw: function() { 
    108. 
  
  
  
  
  108.                 var mapMatrix = this.mapMatrix; 
    109. 
  
  
  
  
  109.                 var beginX = this.x; 
    110. 
  
  
  
  
  110.                 var beginY = this.y; 
    111. 
  
  
  
  
  111.                 var cellSize = this.cellSize; 
    112. 
  
  
  
  
  112.                 var currentRow; 
    113. 
  
  
  
  
  113.                 var currentCol 
    114. 
  
  
  
  
  114.                 var currentObj; 
    115. 
  
  
  
  
  115.                 var row = this.row; 
    116. 
  
  
  
  
  116.                 var img; 
    117. 
  
  
  
  
  117.                 var col; 
    118. 
  
  
  
  
  118.                 for (var i = beginY, ylen = beginY + row * cellSize[1]; i < ylen; i += cellSize[1]) {    //根据地图矩阵，绘制每个方格 
    119. 
  
  
  
  
  119.                     currentRow = (i - beginY) / cellSize[1]; 
    120. 
  
  
  
  
  120.                     col=mapMatrix[currentRow].length; 
    121. 
  
  
  
  
  121.                     for (var j = beginX, xlen = beginX + col * cellSize[0]; j < xlen; j += cellSize[0]) { 
    122. 
  
  
  
  
  122.                         currentCol = (j - beginX) / cellSize[0]; 
    123. 
  
  
  
  
  123.                         currentObj = this.imgsReference[mapMatrix[currentRow][currentCol]]; 
    124. 
  
  
  
  
  124.                         if(currentObj){ 
    125. 
  
  
  
  
  125.                             currentObjcurrentObj.x = currentObj.x || 0; 
    126. 
  
  
  
  
  126.                             currentObjcurrentObj.y = currentObj.y || 0; 
    127. 
  
  
  
  
  127.                             img = cg.loader.loadedImgs[currentObj.src]; 
    128. 
  
  
  
  
  128.                             //绘制特定坐标的图像 
    129. 
  
  
  
  
  129.                             cg.context.drawImage(img, currentObj.x, currentObj.y, cellSize[0], cellSize[1], j, i, cellSize[0], cellSize[1]);  
    130. 
  
  
  
  
  130.                         } 
    131. 
  
  
  
  
  131.                     } 
    132. 
  
  
  
  
  132.                 } 
    133. 
  
  
  
  
  133.                 //更新该layer上所有sprite 
    134. 
  
  
  
  
  134.                 this.spriteList.draw(); 
    135. 
  
  
  
  
  135.      
    136. 
  
  
  
  
  136.             } 
    137. 
  
  
  
  
  137.         } 
    138.

之后我们可以很方便地创建不同的层，并添加到地图中：

 
 
 
 
    
  
  
  
  
  1. /*    背景矩阵    */ 
    2. 
  
  
  
  
  2. var bgMatrix = [ 
    3. 
  
  
  
  
  3.                     [1,1,1], 
    4. 
  
  
  
  
  4.                     [1,1,1], 
    5. 
  
  
  
  
  5.                     [1,1,1] 
    6. 
  
  
  
  
  6.                 ]; 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. this.map = new cnGame.Map({width:3000,height:3000}); 
    9. 
  
  
  
  
  9. var newnewLayer=new cnGame.Layer("bg",bgMatrix, { cellSize: [1000, 1000], width: this.map.width, height: this.map.height }); 
    10. 
  
  
  
  
  10. newLayer.imgsReference={ "1": { src: srcObj.bg }}; 
    11. 
  
  
  
  
  11. this.map.addLayer(newLayer); 
    12.

2.关于移动场景。

在上一次的HTML5《游戏超级玛丽游戏demo》中，我们通过使游戏玩家的移动转换为游戏场景的移动来实现玩家固定，场景移动的效果，但是这种实现方法有比较大的问题，因为它干涉了地图和玩家的xy值的变化，因此会带来很多不便。更好的实现方法是，保持玩家和地图的xy值不变，只改变绘制它们时原点的坐标。

view对象新增的方法：applyInView：

applyInView方法的作用是在不改变地图和玩家实际坐标的前提下，在绘制时使view固定，其他游戏元素相对于view移动，实现移动背景的效果。例如，我们需要使玩家相对于view中点固定，该map上的其他所有游戏元素相对于view移动，我们只需要在初始化时：

 
 
 
 
    
  
  
  
  
  1. this.view=new cnGame.View({map:this.map,x:0,y:0,width:cnGame.width,height:cnGame.height}); 
    2. 
  
  
  
  
  2.         this.view.centerElem(this.player,true); 
    3.

在绘制时：

 
 
 
 
    
  
  
  
  
  1. this.view.applyInView(function(){ 
    2. 
  
  
  
  
  2.             map.draw();         
    3. 
  
  
  
  
  3.         }); 
    4.

这样map内所有元素都会相对于view而移动。

而applyInView的实现原理也非常简单，它只是不断使绘制的原点和view的坐标等长且相反：

 
 
 
 
    
  
  
  
  
  1. /** 
    2. 
  
  
  
  
  2.             *使坐标相对于view 
    3. 
  
  
  
  
  3.             **/ 
    4. 
  
  
  
  
  4.             applyInView:function(func){     
    5. 
  
  
  
  
  5.                 cg.context.save(); 
    6. 
  
  
  
  
  6.                 cg.context.translate(-this.x, -this.y); 
    7. 
  
  
  
  
  7.                 func(); 
    8. 
  
  
  
  
  8.                 cg.context.restore(); 
    9. 
  
  
  
  
  9.             }, 
    10.

这样无论view的坐标如何变化，view在视觉上始终固定在canvas，其他元素的坐标在视觉上始终相对于view。

该游戏所有源码下载地址：点击下载

原文：http://www.cnblogs.com/Cson/archive/2012/03/15/2398129.html

分享题目：基于HTML5的横版射击游戏发布附源码
本文路径：http://www.shufengxianlan.com/qtweb/news21/22771.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App开发知识

各行业网站

成都网站改版　　 　成都服务器租用　　 　手机网站制作　　 　四川成都托管服务器　　 　腾讯香港空间　　 　成都网络营销公司　　 　手机网站制作　　 　成都制作网站　　 　成都木托盘　　 　宏昇商务服务　　 　彭山网站制作　　 　成都App定制　　 　网站解决方案　　 　高端网站设计　　 　成都主机托管　　 　高端网站设计　　 　自贡主机托管　　 　四川搅拌罐车　　 　广告媒介投放　　 　成都封阳台