angularJs九宫格转盘抽奖

页面如下

<div id="luck">
    <!-- luck -->
<div class="weui-grids">
    <div class="weui-grid luck-unit luck-unit-0" ng-class="{'active': index=='0'}">
        <div class="weui-grid__icon">
            <img src="images/prize/6.png">
        </div>
        <p class="weui-grid__label">零食</p>
    </div>
    <div class="weui-grid luck-unit luck-unit-1" ng-class="{'active': index=='1'}">
      <div class="weui-grid__icon">
    <img src="images/prize/1.png">
    </div>
    <p class="weui-grid__label">华为 MateBook</p>
      </div>
    <div class="weui-grid luck-unit luck-unit-2" ng-class="{'active': index=='2'}">
      <div class="weui-grid__icon">
        <img src="images/prize/3.png">
       </div>
       <p class="weui-grid__label">空气净化器</p>
    </div>
   <div class="weui-grid luck-unit luck-unit-7" ng-class="{'active': index=='7'}">
    <div class="weui-grid__icon">
        <img src="images/prize/8.png">
    </div>
    <p class="weui-grid__label">谢谢参与</p>
</div>
<div class="weui-grid luck-unit-center">
    <!-- <img src="images/buttonUp.png"> -->//中间
</div>
<div class="weui-grid luck-unit luck-unit-3" ng-class="{'active': index=='3'}">
   <div class="weui-grid__icon">
    <img src="images/prize/4.png">
    </div>
    <p class="weui-grid__label">定制公仔</p>
   </div>
<div class="weui-grid luck-unit luck-unit-6" ng-class="{'active': index=='6'}">
  <div class="weui-grid__icon">
    <img src="images/prize/7.png">
  </div>
  <p class="weui-grid__label">10元代金劵</p>
</div>
<div class="weui-grid luck-unit luck-unit-5" ng-class="{'active': index=='5'}">
    <div class="weui-grid__icon">
        <img src="images/prize/2.png">
    </div>
    <p class="weui-grid__label">OPPOr15 手机</p>
 </div>
<div class="weui-grid luck-unit luck-unit-4" ng-class="{'active': index=='4'}">
    <div class="weui-grid__icon">
        <img src="images/prize/5.png">
    </div>
    <p class="weui-grid__label">狗粮</p>
</div>
</div>
</div>

<!-- 开始按钮 -->
<div class="startDraw" ng-click="luckStart()">
    <img src="images/go.png" alt="">
</div>

基本css样式如下

#luck {
    width: 70%;
    padding-bottom: 70%;
    margin: 0 auto;
    position: absolute;
    top: 10%;
    left: 17%;
}

#luck .weui-grids:before {
    border: 0;
}

#luck .weui-grids:after {
    border: 0;
}

#luck .weui-grid:after {
    border: 0;
}

#luck .weui-grid:before {
    border: 0;
}

.luck-unit {
    background: #f9de33;
    border-radius: 10px;
    border: 3px solid #f85952;
    text-align: center;
    margin: 1%;
    width: 29.77%;
    /* height: 100%; */
    padding: 0 1% 24.5%;
    position: relative;
    /* height: 103px; */
}

#luck .active {
    background: #ffffff;
    border: 3px solid #f9de33;
}

.luck-unit-center {
    padding: 5px;
    /* background: #f9de33;
    border-radius: 10px;
    border: 3px solid #f85952; */
    text-align: center;
    margin: 2px;
    width: 30%;
}

.luck-unit .weui-grid__icon {
    position: absolute;
    width: 90%;
    height: 50%;
    margin: 20% auto 0 !important;
}
.luck-unit p.weui-grid__label {
    position: absolute;
    width: 90%;
    margin: 65% auto 0 !important;
    font-size: 1.1rem;
    color: #e8124a;
}

image.png

// 幸运抽奖 九宫格
        $scope.canDrawNum = 2;  //抽奖次数
        var luck = {
            index: -1,  //当前转动到哪个位置，起点位置
            count: 0,   //总共有多少个位置
            timer: 0,   //setTimeout的ID，用clearTimeout清除
            speed: 500, //初始转动速度
            times: 0,   //转动次数
            cycle: 50,  //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1,  //中奖位置
            init: function (id) {
                this.count = 8;     
            },
            roll: function () {

                var index = this.index;
                var count = this.count;
                var luck = this.obj;
                index += 1;

                if (index > count - 1) {
                    index = 0;
                    $scope.index = index;
                };
                this.index = index;
                $scope.index = index;
                // console.log($scope.index );
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };
        function roll() {
            luck.times += 1;
            luck.roll();
            if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
                clearTimeout(luck.timer);
                if (luck.prize == 7) { //没中奖
                    $('.draw-info-fail').fadeIn();
                    luck.prize = -1;
                    luck.times = 0;
                    click = false;
                } else if (luck.prize == 3) { //四等奖
                    $scope.prizeName = "定制公仔一个";
                    $('.draw-info-win').fadeIn();
                    luck.prize = -1;
                    luck.times = 0;
                    click = false;
                } else if (luck.prize == 0) {//五等奖
                    $scope.prizeName = "一份";
                    $('.draw-info-win').fadeIn();
                    luck.prize = -1;
                    luck.times = 0;
                    click = false;
                } else if (luck.prize == 6) {//六等奖
                    $scope.prizeName = "零食一份";
                    $('.draw-info-win').fadeIn();
                    luck.prize = -1;
                    luck.times = 0;
                    click = false;
                }

            } else {
                if (luck.times < luck.cycle) {
                    luck.speed -= 10;
                } else if (luck.times == luck.cycle) {
                    // var index = Math.random() * (luck.count)| 0;  
                    // luck.prize = index;
                } else {
                    if (luck.times > luck.cycle + 10 && 
((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
                        luck.speed += 110;
                    } else {
                        luck.speed += 20;
                    }
                }
                if (luck.speed < 40) {
                    luck.speed = 40;
                };

                luck.timer = $timeout(roll, luck.speed);
            }
            return false;
        }
        //闪灯效果
        // $scope.isBling = true;
        // var num = 0;
        // var timer = $interval(function () {
        //  num++;
        //  if (num % 2 == 0) {
        //      $scope.isBling = false;
        //  } else {
        //      $scope.isBling = true;
        //  }

        // }, 500);
        var click = false;
        luck.init('luck');
        $scope.luckStart = function () {
            if (click) {
                return false;
            }
            else {

                $scope.isGo = false;
                $scope.canDrawNum--;
                luck.speed = 200;

                $http({
                    url: serviceUrl + "/reward/draw",
                    method: "GET"
                }).success(function (data) {
                    console.log(data)
                    if (data == 40) {
                        $scope.msg = "您的积分不足";
                        $('#dialog').fadeIn();
                    } else if (data == 4) {
                        $scope.myScore -= 100;
                        luck.prize = 3;
                        roll();
                    } else if (data == 5) {
                        $scope.myScore -= 100;
                        luck.prize = 0;
                        roll();
                    } else if (data == 6) {
                        $scope.myScore -= 100;
                        luck.prize = 6;
                        roll();
                    } else {
                        $scope.myScore -= 100;
                        luck.prize = 7;
                        roll();
                    }

                })
                click = true;
                return false;
            }

        };

github项目：https://github.com/ortion/lotteryGames