抽奖系列：如何用纯js做一个大富翁游戏获取奖品数据后，建一个数组存放奖品的位置，通过遍历数据把奖品循环输出到页面上对应的

话不多说，先上效果图：

功能点：

礼品的位置
小怪兽位置的变化（走路、转身和回退）
小怪兽的跳跃弧度

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

1、渲染奖品

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

.gift{position:relative;}
.gift li{position: absolute;}
<ul class="gift"></ul>


<script>    
    //获取奖品
    (function getPrize(){
        $.ajax({
            url:'你家的奖品接口',
            success:function(res){
                if(res.length == 0)return;
                let i=0 ;
                for(;i<res.length;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 += `<li style="left:${positionList[i].left}px;top:${positionList[i].top}px"><span>${i+1}</span><img src="${res[i].img}" /></li>`;

                }
                $(".gift").append(gift_list);	    
            },
          error:function(){
	        
          }
        })
    })()
</script>

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））

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

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

可以的话，点个赞吧

最后，欢迎交流

抽奖系列：如何用纯js做一个大富翁游戏

功能点：

1、渲染奖品

2、小怪兽的位置变化：

3、 小怪兽跳跃的弧度。

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

3、小怪兽跳跃的弧度。