JavaScript 九宫格抽奖

<ul id="lottery" class="clearfix">
    <li class="lottery-unit turn_5">
        <img src="images/turn_1.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_6">
        <img src="images/turn_2.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_7">
        <img src="images/turn_3.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_8">
        <img src="images/turn_4.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_0">
        <img src="images/turn_5.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_1">
        <img src="images/turn_6.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_2">
        <img src="images/turn_7.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_3">
        <img src="images/turn_8.jpg">
        <div class="mask"></div>
    </li>
    <li class="lottery-unit turn_4">
        <img src="images/turn_9.jpg">
        <div class="mask"></div>
    </li>
</ul>
<a class="rand_btn" href="javascript:void(0);"></a>

#lottery {
    width: 650px;
    height: 650px;
    margin: 100px auto 0;
}
.turn_1, .turn_2, .turn_3, .turn_4, .turn_5, .turn_6, .turn_7, .turn_8, .turn_0 {
    width: 208px;
    height: 208px;
    float: left;
    position: relative;
}
.turn_5, .turn_6, .turn_8, .turn_0, .turn_2, .turn_3 {
    margin-right: 10px;
}
.turn_8, .turn_0, .turn_1, .turn_2, .turn_3, .turn_4 {
    margin-top: 10px;
}
.lottery-unit img {
    width: 208px;
    height: 208px;
}
.active .mask {
    display: block;
}
.mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(images/turn_active.png) no-repeat;
    display: none;
}
.rand_btn {
    margin: 60px auto 0;
    display: block;
    width: 40px;
    height: 40px;
    background: url(images/lottery.png) no-repeat;
    background-size: 40px 40px;
}

var click = false;
var scratchableLatex = {
    index: -1,     //当前转动到哪个位置，起点位置
    count: 0,      //总共有多少个位置
    timer: 0,      //setTimeout的ID，用clearTimeout清除
    speed: 100,    //初始转动速度
    times: 0,      //转动次数
    cycle: 50,     //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1,     //中奖位置
    init: function(){
        this.bindEvent();
        this.lotteryInit('lottery');
    },
    bindEvent: function(){
        var that = this;
        $('body').on('click', '.rand_btn', function(){         
            if (click) {
                //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应                            
                return false;
            }else{
                that.rotateFunc();  // 转圈过程不响应click事件，会将click置为false
                click = true;       // 一次抽奖完成后，设置click为true，可继续抽奖 
                return false;
            }
        })
    },
    lotteryInit: 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('.turn_' + this.index).addClass('active');
        };
    },
    roll: function() {
        var index = this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find('.turn_' + index).removeClass('active');
        index += 1;
        if (index > count - 1) {
            index = 0;
        };
        $(lottery).find('.turn_' + index).addClass('active');
        this.index = index;
        return false;
    },
    rotateFunc: function(){
        var that = this;
        this.times += 1;
        this.roll();
        if (this.times > this.cycle + 10 && this.prize == this.index) {
            clearTimeout(this.timer);
            this.prize = -1;
            this.times = 0;
            click = false;
        }else {
            if (this.times < this.cycle) {
                this.speed -= 10;
            }else if (this.times == this.cycle) {
                var index = Math.random() * (this.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
                this.prize = index;
            }else {
                if (this.times > this.cycle + 10 && ((this.prize == 0 && this.index == 7) || this.prize == this.index + 1)) {
                    this.speed += 80;
                }else {
                    this.speed += 20;
                }
            }
            if (this.speed < 40) {
                this.speed = 40;
            };
            this.timer = setTimeout(function(){
                that.rotateFunc()
            }, this.speed); //循环调用
        }
        return false;
    }
}
scratchableLatex.init();