话不多说，先上效果图：

功能点：

礼品的位置

小怪兽位置的变化(走路、转身和回退)

小怪兽的跳跃弧度

确定好功能点，接下来就是逐个击破：

1、渲染奖品

获取奖品数据后，建一个数组存放奖品的位置，通过遍历数据把奖品循环输出到页面上对应的位置。

.gift{position:relative;}

.gift li{position: absolute;}

//获取奖品

(function getPrize(){

$.ajax({

url:'你家的奖品接口',

success:function(res){

if(res.length == 0)return;

let i=0 ;

for(;i

if(i<8){

positionList.push({top:0,left:i*86+258+margin_left,className:'monster-left'});

}else if(i<11){

positionList.push({top:positionList[i-1].top+86,left:positionList[i-1].left,className:'monster'});

}else if(i<13){

positionList.push({top:positionList[i-1].top,left:positionList[i-1].left-86,className:'monster-right'});

}else if(i<17){

positionList.push({top:positionList[i-1].top+86,left:positionList[i-1].left,className:'monster'});

}else if(i<25){

positionList.push({top:positionList[i-1].top,left:positionList[i-1].left-86,className:'monster-right'});

}else if(i<28){

positionList.push({top:positionList[i-1].top-86,left:positionList[i-1].left,className:'monster-back'});

}else if(i<30){

positionList.push({top:positionList[i-1].top,left:positionList[i-1].left+86,className:'monster-left'});

}else{

positionList.push({top:positionList[i-1].top-86,left:positionList[i-1].left,className:'monster-back'});

}

gift_list += `

${i+1}`;

}

$(".gift").append(gift_list);

},

error:function(){

}

})

})()

复制代码

2、小怪兽的位置变化：

摇完骰子后，判断位置的变化是前进还是后退。后台接口需要返回两个位置的数据，一个是第一次的位置，一个是第二次的位置。判断两个位置是否相等。如果相等，则小怪兽只前进，无后退。否则，小怪兽先到达第一个位置之后，函数回调传入第二个位置，小怪兽再跳到第二个位置。

转身动画。把每个位置小怪兽身体方向记录到奖品位置那个数组里面去，到达位置的同时，追加相应的css改变小怪兽身体的方向。

//obj移动的块，i位置一，tips跳到指定位置后要弹出的内容，gift获得的奖品，indet特殊情况再掷一次的标志，goBack位置二

function go(obj, i, tips, gift, ident, goBack) {

let step = parseInt(i);

if (cur_index > step && cur_index == 33) {

cur_index = 0;

}

setTimeout(function () {

$(obj).removeClass(function () {

return $(obj).attr('class').split(' ').slice(1).join(' '); //除了小怪兽的原来样式，其他转身效果的全部去掉

});

if (cur_index == step) {

setTimeout(function () {

$(obj).addClass('active');

if (ident == 'again') {

//恭喜您，可再掷一次

$(obj).data('tips', tips);

return;

}

if (gift != "") {

//抽中xx奖品

} else {

//没有抽中

}

}

}, 500);

if (goBack) { //有第二个位置

setTimeout(function () {

go($(obj), goBack, "", gift, ident);

}, 1000)

playing = true; //禁止点击开始游戏按钮的标志

return;

}

setTimeout(function () {

playing = false;

}, 1000)

return;

} else if (cur_index > step && step > 6) { //后退是不会大于6步的

fly($(obj), positionList[cur_index - 1], positionList[cur_index - 2]);

$(obj).addClass(positionList[cur_index - 1].className);

cur_index--;

go($(obj), step, tips, gift, ident, goBack);

return;

} else { // 前进

fly($(obj), positionList[cur_index - 1], positionList[cur_index]);

$(obj).addClass(positionList[cur_index].className);

cur_index++;

go($(obj), step, tips, gift, ident, goBack);

}

}, 500);

}

function fly(obj, startPosition, endPosition) { //obj运动的小怪兽

if (startPosition == undefined) {

startPosition = {

left: 0

}

}

if (startPosition.left < endPosition.left) {

setTimeout(function () {

$(obj).css({

'top': endPosition.top - 35,

'left': endPosition.left - 33

});

})

} else if (startPosition.left > endPosition.left) {

setTimeout(function () {

$(obj).css({

'top': endPosition.top - 35,

'left': endPosition.left + 33

});

})

} else {

}

setTimeout(function () {

$(obj).css({

'top': endPosition.top,

'left': endPosition.left

});

}, 200);

}

复制代码

3、 小怪兽跳跃的弧度。

可以采用半步半步的跳法，运动轨迹如下可见。可以做到跳跃的效果。(注意：图中第四个坐标写错了，应该是(120，-40))

核心代码大致就是这样了。

掘金这个代码的编辑器缩进太糟糕了，我已经不想一行行改了，各位自行复制去编辑器里看吧。

可以的话，点个赞吧

最后，欢迎交流

请不要再问我要源代码了，上面的代码已经是精简过的，各个人业务需求不一样，我的源代码也不可能满足你的需求，恕我无能为力。