H5动画：玩转大富翁

前言：
半年前，在公司接到了一个需求，类似于qq游戏中的大富翁，当初我对于游戏引擎还是完全处于小白状态，但是需求又不能不接，那就硬着头皮上吧。技术选型上，我首先放弃了游戏引擎，谁让我还是小白呢，项目上线时间又紧。现学现卖，万一中途出了什么岔子，那不是前功尽弃。所以最后我还是选择了最基本的css3和js去实验这个效果，虽然难度还是挺大，但毕竟这块至少咱不是小白啊。

初始化：
任何游戏和h5页面都会去做初始化这件事。既然这个小人物要在这张地图上跑来跑去，那么这张地图上的所有区块的位置我肯定得先知道。所以我做了一件很傻的事情，就是在每个区块上我都去加了一个div。虽然这种做法挺傻，但是效果还是很明显的。

图片.png

 //获取所有区块位置放入一个数组中
  let $a = $(".steps");
  let data = [];
  $a.each(function(i, elem) {
    var obj = {};
    obj.left = $(elem).offset().left + 10;
    obj.top = $(elem).offset().top;
    data.push(obj);
  })

步数问题：
接下来就是比较头疼的问题了，既然都知道了地图上所有区块的位置，那怎么让小人物能乖乖的根据筛子的点数，有规则的走起来，走完一圈后又该如何重置这个步数问题，不急不急，先让我理一下思路。

图片.png

 $(".person").animate(data[totalCount + i], 400, "linear");  //根据步数进行移动

if (window.sessionStorage.getItem("str") >= 22) {  //走完一圈用于步数的重置
       a = num - i;
       totalCount = str % 22;
       str = 0;
       i = 0;
     }

if (str < 11 || str > 21) {
            $(".start").css({ "left": "0rem", "bottom": "0rem" });
            $(".shade").css({ "left": "0rem", "bottom": "0rem" });
            $(".touzi").css({ "left": "1.25rem", "bottom": "1.1rem" });
            $('.wrap').scrollLeft(0);
          } else if (str >= 11 && str <= 21) {
            $(".start").css({ "left": "5.5rem", "bottom": "0.02rem" });
            $(".shade").css({ "left": "5.5rem", "bottom": "0.02rem" });
            $(".touzi").css({ "left": "3.4rem", "bottom": "2.5rem" });
            $('.wrap').scrollLeft(limit);
          }

总结： 由于特殊原因，具体的活动链接我就不放了。相对来说，这个活动还是不难的，相信大家稍微动动大脑，都可以做出来。