前言：
半年前轧房，在公司接到了一個(gè)需求，類似于qq游戲中的大富翁绍绘，當(dāng)初我對(duì)于游戲引擎還是完全處于小白狀態(tài)奶镶，但是需求又不能不接，那就硬著頭皮上吧陪拘。技術(shù)選型上厂镇，我首先放棄了游戲引擎，誰(shuí)讓我還是小白呢左刽，項(xiàng)目上線時(shí)間又緊∞嘈牛現(xiàn)學(xué)現(xiàn)賣，萬(wàn)一中途出了什么岔子悠反，那不是前功盡棄残黑。所以最后我還是選擇了最基本的css3和js去實(shí)驗(yàn)這個(gè)效果馍佑，雖然難度還是挺大，但畢竟這塊至少咱不是小白啊梨水。
初始化：
任何游戲和h5頁(yè)面都會(huì)去做初始化這件事拭荤。既然這個(gè)小人物要在這張地圖上跑來(lái)跑去，那么這張地圖上的所有區(qū)塊的位置我肯定得先知道疫诽。所以我做了一件很傻的事情舅世，就是在每個(gè)區(qū)塊上我都去加了一個(gè)div。雖然這種做法挺傻奇徒，但是效果還是很明顯的雏亚。
圖片.png
//獲取所有區(qū)塊位置放入一個(gè)數(shù)組中
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);
})
步數(shù)問(wèn)題：
接下來(lái)就是比較頭疼的問(wèn)題了，既然都知道了地圖上所有區(qū)塊的位置摩钙，那怎么讓小人物能乖乖的根據(jù)篩子的點(diǎn)數(shù)罢低，有規(guī)則的走起來(lái)，走完一圈后又該如何重置這個(gè)步數(shù)問(wèn)題胖笛，不急不急网持，先讓我理一下思路。
圖片.png
$(".person").animate(data[totalCount + i], 400, "linear"); //根據(jù)步數(shù)進(jìn)行移動(dòng)
if (window.sessionStorage.getItem("str") >= 22) { //走完一圈用于步數(shù)的重置
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);
}
總結(jié)： 由于特殊原因长踊，具體的活動(dòng)鏈接我就不放了功舀。相對(duì)來(lái)說(shuō)，這個(gè)活動(dòng)還是不難的身弊，相信大家稍微動(dòng)動(dòng)大腦辟汰，都可以做出來(lái)。
