请选择 进入手机版 | 继续访问电脑版
查看: 6862|回复: 229

[新手教程] HTML5游戏-坦克大战+推箱子程序解析

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-1-12 14:04:38 | 显示全部楼层 |阅读模式
功能描述:
  该游戏实质上是坦克大战+推箱子。玩家控制坦克,在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关,共三个关卡。
  继上一个HTML5游戏小demo《HTML5超级玛丽游戏demo》后,这次开发的游戏添加了更多元素并增强了可玩性,该游戏同样基于本人开发的HTML5游戏框架cnGameJS。

游戏说明:
  上下左右方向键控制移动,空格键发射炮弹,推动所有物资箱子( o_goods.jpg )到目的地( o_destination.jpg ),则可过关。

QQ截图20170112103649.jpg QQ截图20170112103700.jpg

  代码分析:
  由于该游戏分了几个关卡,所以这里首先来看看关卡管理器是如果管理各个关卡的:

  1. /*    关卡管理器    */
  2. var LevelManager=(function(){
  3.     var optionsObj={};//所有关卡参数对象
  4.     return {
  5.         add:function(levelObj,gameObj){
  6.             var srcArr=[];
  7.             for(name in levelObj.srcObj){
  8.                 if(levelObj.srcObj.hasOwnProperty(name)){
  9.                     srcArr.push(levelObj.srcObj[name]);
  10.                 }
  11.             }
  12.             var opt=optionsObj[levelObj.level]={};
  13.             opt.gameObj=gameObj;
  14.             opt.srcArray=srcArr;
  15.             opt.startOptions=levelObj.startOptions||{};
  16.             opt.startOptions.mapMatrix=levelObj.mapMatrix;
  17.             opt.startOptions.srcObj=levelObj.srcObj;
  18.             opt.startOptions.level=levelObj.level;
  19.         },
  20.         startLevel:function(num){
  21.             var op=optionsObj[num];
  22.             cnGame.loader.start(op.gameObj,op);   
  23.         }

  24.     }

  25. })();
复制代码

   在初始化阶段,我们首先创建自己的每个关卡的对象,然后调用add方法添加进关卡管理器,之后就可以调用startLevel开始该关卡。这样就可以方便我们之后在每个关卡中的跳转。另外每个关卡所用到的游戏对象也可以在这里传入。在该游戏中,由于每个关卡游戏的逻辑基本相同,因此使用相同的游戏对象。而该游戏的开始界面则使用另一个游戏对象。每个游戏对象的组织形式如下:

  1. var gameObj={

  2.     initialize:function(options){//初始化
  3.     },
  4.     update:function(){//更新
  5.     },
  6.     draw:function(){//绘制
  7.     }

  8. }
复制代码

  之后看看游戏对象gameObj具体的的初始化函数:

  1. /*    初始化    */
  2.         initialize:function(options){
  3.             srcObj=options.srcObj;
  4.             this.level=options.level;
  5.             this.enemyBeginX=options.enemyBeginX;
  6.             this.enemyBeginY=options.enemyBeginY;
  7.             this.map=new cnGame.Map(options.mapMatrix,{cellSize:[40,40]});
  8.             this.goods=[];
  9.             
  10.             cnGame.input.preventDefault(["left","right","up","down"]);
  11.             for(var i=0,len=options.goodsArr.length;i<len;i++){
  12.                 this.goods.push(new goods({src:srcObj.goods,width:40,height:40,x:options.goodsArr[i].x,y:options.goodsArr[i].y}));
  13.                 cnGame.spriteList.add(this.goods[this.goods.length-1]);
  14.             }
  15.             
  16.             this.player=new player({src:srcObj.player,width:40,height:40,x:40,y:cnGame.height-80});
  17.             cnGame.spriteList.add(this.player);
  18.             var newEnemy=new enemy({src:srcObj.enemy,width:40,height:40,x:this.enemyBeginX,y:this.enemyBeginY});
  19.             newEnemy.getRandomDir(dirArr);
  20.             cnGame.spriteList.add(newEnemy);
  21.         }
复制代码
 
   初始化函数中,我们需要初始化的参数有:地图对象,物资数组,玩家对象,还有敌人对象。地图对象可以使用cnGameJS的map,而玩家和敌人对象则继承cnGameJS的sprite。
  在每次gameObj的update中,我们需要判断是否所有物资对象已经就位,如果是,则可以跳入下一关。

  1. if(_map.isMatchCell(_goods)&&(_map.getPosValue(_goods)==3)){//判断所有物资是否已到达目的地
  2.                     finishedNum+=1;
  3.                     if(finishedNum==_goodsArr.length){
  4.                         this.toNextLevel();
  5.                     }
  6.                 }
复制代码
   
   另外,在每次update 中,还需要判断子弹是否击中敌人,击中玩家,或物资:

  1. if(isGoods(list[j])||(isEnemy(list[j])&&list[i].from=="player")||(isPlayer(list[j])&&list[i].from=="enemy")){}
复制代码
  
  如果击中的是敌人或玩家,则把对应对象从spriteList里删除,这样下次就不会更新和绘制该对象。另外每次子弹击中物体,就产生一个spriteSheet的爆炸动画

  1. /*    击中后的爆炸动画效果    */
  2. bullet.prototype.explode=function(){
  3.     var self=this;
  4.     this.isExploding=true;
  5.     var spriteSheet=new cnGame.SpriteSheet("boom",srcObj.boom,{width:280,height:40,frameSize:[40,40],frameDuration:40,onFinish:function(){self.isDisappear=true}});
  6.     this.setCurrentAnimation(spriteSheet);
  7.     this.speedX=0;
  8.     this.speedY=0;
  9. }
复制代码

 
  该动画的spriteSheet图片如下:
  o_boom.jpg

  生成的动画其实就是每次从不同位置开始把该图片绘制在canvas上。
  另外,不同于上次的游戏超级玛丽,该游戏属于地图型。因此在游戏开始阶段就需要设计地图并绘制。地图通过二维矩阵生成,例如第一关的游戏地图对应的二维矩阵如下:
  1. /* 地图矩阵:0.空地 1.墙壁 2.石头 3.目的地 4.敌人基地*/
  2.     mapMatrix:[
  3.                     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  4.                     [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
  5.                     [1,0,1,0,0,2,2,0,0,0,2,2,0,0,0,1],
  6.                     [1,0,1,0,0,0,2,0,0,0,4,0,0,0,2,1],
  7.                     [1,0,1,0,0,0,0,0,2,0,0,0,0,0,0,1],
  8.                     [1,0,2,0,0,0,0,0,2,0,0,0,0,0,0,1],
  9.                     [1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
  10.                     [1,1,1,1,1,1,1,0,0,0,1,1,1,2,2,1],
  11.                     [1,0,0,0,0,2,0,0,0,0,1,3,0,0,0,1],
  12.                     [1,0,0,0,0,2,0,2,0,0,1,0,0,0,0,1],
  13.                     [1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
  14.                     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  15.                    ]
复制代码

  关于cnGameJS中的map对象如何生成地图,并提供常用接口。

  cnGameJS游戏框架以及游戏源码请回复下载
游客,如果您要查看本帖隐藏内容请回复
最佳答案
0 
啷哩个啷儿 发表于 2017-1-12 14:34:16 | 显示全部楼层

RE: HTML5游戏-坦克大战+推箱子程序解析

RE: HTML5游戏-坦克大战+推箱子程序解析
最佳答案
0 
jiangzi 发表于 2017-1-12 20:41:04 | 显示全部楼层
HTML5游戏-坦克大战+推箱子程序
最佳答案
0 
yyn 发表于 2017-1-13 10:24:50 | 显示全部楼层
谢谢分享,辛苦了
最佳答案
0 
qq849962492 发表于 2017-1-13 10:43:17 | 显示全部楼层
6666666666666666
最佳答案
0 
limitmhw 发表于 2017-1-13 10:43:59 | 显示全部楼层
6666666666666666666666
最佳答案
0 
亚伦安娜 发表于 2017-1-13 10:53:27 | 显示全部楼层
HTML5游戏-坦克大战+推箱子
最佳答案
0 
晴天 发表于 2017-1-13 10:56:44 | 显示全部楼层
HTML5游戏-坦克大战+推箱子程序解析
最佳答案
0 
hearne 发表于 2017-1-13 10:57:36 | 显示全部楼层
感谢楼主分享
最佳答案
0 
我回家风铃 发表于 2017-1-13 11:06:24 | 显示全部楼层
000000000000000
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

【重要通知】9秒威客搬家啦!!!

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表