Hello~各位ITer！

这里是每周二三陪你技术内卷的小谷！

作为一名前端开发工程师，相信大家多少都有自己做过一些小游戏程序，比如贪吃蛇，五子棋，猜拳等等！今天向大家分享如何实现制作一个【抽奖大富翁】吧！——文末附上源码

算法思路：

大富翁是一个环形转盘，那就要将它转换成线性的；

当点击开始，直到转动停止后，在停留的方格上添加红色命中背景，提示奖品；

使用定时器来控制转盘的速度。

最终转盘效果图：

页面布局Part.1

底部放一个背景图，上面是表格布局——横向布局；

每行四个单元格，中间两行是两个，中间空出来，放按钮。

<tr>
 <td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td>
  <td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td>
 <td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td>
    <td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td>
   </tr>
<tr>
 <td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td>
 <td colspan="2" rowspan="2"><a href="#"></a></td>
 <td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td>
</tr>
<tr>
 <td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td>
 <td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td>
</tr>
<tr>
  <td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td>
  <td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td>
  <td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td>
     <td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td>
   </tr>

计时器setTimeout方法中两个参数Part.2

  };
  lottery.timer = setTimeout(roll,lottery.speed);
 }

roll：转盘滚动执行的方法；

lottey.speed：滚动的速度；

它的返回值timer是计时器实例，为了清除用。

clearTimeout(lottery.timer)。

如何快速看懂代码Part.3

我们可以运行代码后，在控制台上，打印中间结果。

这里显示抽中的算法思路Part.4

在转盘转到第50次，也就是转了5圈时使用随机数找到奖品，然后再让转盘转到那一个上面去。

这时设置红色背景色，提示奖品名称！

如何实现转动的时候先慢后快再到慢然后选中物品Part.5

最开始函数执行的时间间隔设置为100ms.开始运行；

每一次运行，就在原来的基础上减去10ms,直至到40ms；选出物拼后，每次累加20，最后一次加到110。

怎么实现抽奖后弹出你抽到的物品（换句话说：怎么实现一个耗时长的事件执行后执行下一个Part.6

计算好时间后，使用setTimeout定时器就可以。

怎么用js或jquery把函数b绑定到函数a之后执行Part.7

其实就是将函数b作为参数传入函数a，完成函数a之后执行。

//定义函数a
function a(callback){
    alert("a要做的操作");
    callback();//a执行完执行b
}
 
function b(){
    alert("b要执行的操作");
}//定义函数a
function a(callback){
    alert("a要做的操作");
    callback();//a执行完执行b
}
 
function b(){
    alert("b要执行的操作");
}

为什么要使用表格布局Part.8

因为表格就算你指定了宽高，它还是会自己调整的，自己内部会微调，指定表格主体，然后再指定里面每一个，就不会乱。

通过表格实现起来简单，不需要自己去过多的调整。

css

<style type="text/css">
#lottery{width:574px;height:584px;margin:20px auto 0;background:url(images/bg.jpg) no-repeat;padding:50px 55px;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#ea0000;}
</style>

</head>
<body>

html

<div id="lottery">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td>
   <td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td>
   <td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td>
            <td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td>
  </tr>
  <tr>
   <td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td>
   <td colspan="2" rowspan="2"><a href="#"></a></td>
   <td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td>
  </tr>
  <tr>
   <td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td>
   <td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td>
  </tr>
        <tr>
   <td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td>
   <td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td>
   <td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td>
            <td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td>
  </tr>
 </table>
</div>

Jq部分

<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var lottery = {
        index: -1, //当前转动到哪个位置，起点位置
        count: 0, //总共有多少个位置
        timer: 0, //setTimeout的ID，用clearTimeout清除
        speed: 20, //初始转动速度
        times: 0, //转动次数
        cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1, //中奖位置
        init: function (id) {
            if ($("#" + id).find(".lottery-unit").length > 0) {
                $lottery = $("#" + id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-" + this.index).addClass("active");
            };
        },
        roll: function () {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-" + index).removeClass("active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-" + index).addClass("active");
            this.index = index;
            return false;
        },
        stop: function (index) {
            this.prize = index;
            return false;
        }
    };

function roll(){
 lottery.times += 1;
 lottery.roll();
 if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
     alert(lottery.prize+"A");
  clearTimeout(lottery.timer);
  lottery.prize=-1;
  lottery.times=0;
  click=false;
 }else{
  if (lottery.times<lottery.cycle) {
   lottery.speed -= 10;
  }else if(lottery.times==lottery.cycle) {

    var index = Math.random() * (lottery.count) | 0;
   lottery.prize = index;
  }else{
   if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
    lottery.speed += 110;
   }else{
    lottery.speed += 20;
   }
  }
  if (lottery.speed<40) {
   lottery.speed=40;
  };
  lottery.timer = setTimeout(roll,lottery.speed);
 }
 return false;
}

var click=false;

window.onload=function(){
 lottery.init('lottery');
 $("#lottery a").click(function(){
  if (click) {
   return false;
  }else{
   lottery.speed=100;
   roll();
   click=true;
   return false;
  }
 });
};
</script>


</body>
</html>