指尖大冒险H5小游戏

前些天看了一篇很赞的文章，又因为想学习phaser，所以有了这个案例，在线预览可以点下方链接。

本案例中，核心原理是按文章中所提到的内容制作，整体遵循“大道至简”的原则开发，其实是懒的去封装模块。。。

在线预览

文中代码可以访问本人github
------

关键技术点

除去上面提到的文章中的技术点外，还有几处需要注意的地方：

1. 元素渲染层级

开发时候不注意的话，某些情况下可能会出现后面的装饰物，被前面的挡住，或者是机器人被石头挡住等尴尬的局面。对此，不同的框架不同的处理方式，以phaser为例，使用sort及分组来进行处理

stoneStopFlagGroup.sort('y',Phaser.Group.SORT_ASCENDING);

//普通阶梯组
stonesGroup = game.add.group();

//阻碍阶梯组
stoneStopGroup = game.add.group();

//装饰组
stoneStopFlagGroup = game.add.group();

//全局组，包括robot，各种阶梯，装饰
groupItem = game.add.group();

 

2. 行走动画

看素材里，原本是有这段动画的，也就是sprite中的0-9帧，但原案例中不知什么原因去掉了，这里我重新加上了这部分动画。
重新加上后，就有了行走与跳跃动画切换的问题，如何调整使得动作连贯不突兀，就需要使用不同框架的童鞋自行研究了。
phaser中，尝试出来的最连贯的写法：

robot.animations.stop('walk',20,false);
robot.animations.play('stand',30,false);
robot.animations.play('jump',30,false);

 

 3. 断点续传

其实就是一开始只加载数量不多的阶梯，然后随着进度加多加多再加多，达到玩不完的效果
此处要注意结合渲染层级，保证后续添加进来的阶梯能正确的绘制，而不会挡住机器人。

function randomNum(num){
  //无阻碍阶梯数组
  stoneRandomNum = stoneRandomNum.concat(utils.createRandomArr(num,2,0));
  //阻碍阶梯数组
  stoneRandomNum2 = stoneRandomNum2.concat(utils.getRandomPool(num,3));
  //阻碍阶梯装饰品
  stoneRandomFlag = stoneRandomFlag.concat(utils.createRandomArr(num,6,1));
}

function addRandomNum(num){
  var len = stoneRandomNum.length;
  randomNum(num);
  //创建无阻碍阶梯
  stoneCreate(stoneRandomNum,len);
  //创建阻碍阶梯
  stoneStopCreate(stoneRandomNum,stoneRandomNum2,len);
}

 

问题

代码中的阶梯掉落处理比较耗费资源，有想法的童鞋可以给点优化建议

//阶梯掉落处理
function dropStone(pos){
  (function(){
    setTimeout(function(){
      if(currentPos == pos){
        gameoverFun();
      }
      var stone = stoneArr[pos];
      game.add.tween(stone).to( { x:stone.x,y:stone.y + game.height },stoneDropStep, Phaser.Easing.Quadratic.In).start();
      for(var i=0;i<stoneStopArr.length;i++){
        if(stoneStopArr[i] && (stoneStopArr[i].y == stone.y)){
          game.add.tween(stoneStopArr[i]).to( { x:stoneStopArr[i].x,y:stoneStopArr[i].y + game.height },stoneDropStep, Phaser.Easing.Quadratic.In).start();
          game.add.tween(stoneStopFlagArr[i]).to( { x:stoneStopFlagArr[i].x,y:stoneStopFlagArr[i].y + game.height },stoneDropStep, Phaser.Easing.Quadratic.In).start();
        }
      }
    },500);
  })(pos);
}