前言：
半年前，在公司接到了一个需求，类似于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);
}
总结： 由于特殊原因，具体的活动链接我就不放了。相对来说，这个活动还是不难的，相信大家稍微动动大脑，都可以做出来。
