老虎机抽奖

时间 2019-11-09
标签老虎机抽奖繁體版
原文原文链接
抽奖思路

根据后台的 indexes 值，判断停下来的位置，配合 animate 加效果动画，w3c animate定义和用法(www.w3school.com.cn/jquery/effe…)javascript
抽奖逻辑

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <link rel="stylesheet" type="text/css" href="./css/reset.css" />
  <link rel="stylesheet" type="text/css" href="./css/slotmachine.css" />
  <title>幸运大抽奖</title>
</head>

<body>
  <div class="wrap">

    <div class="mainBox">

      <div class="machineBG">
        <!-- 背景图 -->
        <!-- <p class="chanceNum">今日还剩<span id="chanceNum">$!{times}</span>次机会</p> -->
        <div class="machineCon">
          <div class="slotMachine">
            <div class="slotCon slotCon0">
              <div class="slotPic slotPic0"></div>
              <div class="slotPic slotPic1"></div>
              <div class="slotPic slotPic2"></div>
              <div class="slotPic slotPic3"></div>
              <div class="slotPic slotPic4"></div>
              <div class="slotPic slotPic5"></div>
            </div>
          </div>
          <div class="slotMachine">
            <div class="slotCon slotCon1">
              <div class="slotPic slotPic0"></div>
              <div class="slotPic slotPic1"></div>
              <div class="slotPic slotPic2"></div>
              <div class="slotPic slotPic3"></div>
              <div class="slotPic slotPic4"></div>
              <div class="slotPic slotPic5"></div>
            </div>
          </div>
          <div class="slotMachine">
            <div class="slotCon slotCon2">
              <div class="slotPic slotPic0"></div>
              <div class="slotPic slotPic1"></div>
              <div class="slotPic slotPic2"></div>
              <div class="slotPic slotPic3"></div>
              <div class="slotPic slotPic4"></div>
              <div class="slotPic slotPic5"></div>
            </div>
          </div>
        </div>
        <p class="zuanNum">个人钻石：<span id="zuanNum">$!{diamonds}</span>钻</p>
        <div id="slotMachineButton" class="slotMachineButton">
          <img class="begin" id="begin" src="./img/begin.png" alt="">
          <p class="zuanUse" id="beginP">$!{price}钻/次</p>
        </div>

      </div>

      <div class="prizeBox">

        <div class="whiteBg">
          <!--中奖用户滚动列表-->
          <div class="scrollBox prizeCon">
            <img class="scrollBoxImg" src="./img/prizeCon1.png" alt="">
            <div id="scrollCon">
              <ul>
                #if($!{Tools.isNotNull($!{lucky})})
                #foreach($l in $!{lucky})
                #set($b=$l.award)
                <li>恭喜&nbsp;<span class="nickname">$!{l.nickname}</span>&nbsp;得到&nbsp;<span
                    style="color: #ffc702;">$b</span>&nbsp;钻石</li>
                #end
                #end
              </ul>
            </div>
          </div>

          <!--活动说明-->
          <div class="rule prizeCon">
            <img class="scrollBoxImg" src="./img/prizeCon3.png'" alt="">
            <ul>
              <li>一、点击开始游戏，如图案同样，则得到相应倍数的奖励，如图案不同，则不中奖。</li>
            </ul>
          </div>

        </div>
      </div>
    </div>

  </div>

  <!--中奖弹框-->
  <div id="successPop" class="pop">
    <span class="closeBtn" onclick="hidePop('successPop')">
      <img src="./img/Rectangle.png" alt="">
    </span>
    <p>恭喜您得到了<span id="prize"></span>钻<br />再接再砺，再玩一次吧</p>
    <a class="pop_footerBtn playAgainBtn">再来一次</a>
  </div>
  <!--感谢参与弹框-->
  <div id="thanksPop" class="pop">
    <span class="closeBtn" onclick="hidePop('thanksPop')">
      <img src="./img/Rectangle.png" alt="">
    </span>
    <p>很遗憾，感谢参与<br />别气馁，再玩一次吧</p>
    <a class="pop_footerBtn playAgainBtn">再来一次</a>
  </div>
  <!--余额不足弹框-->
  <div id="noMoneyPop" class="pop">
    <span class="closeBtn" onclick="hidePop('noMoneyPop')">
      <img src="./img/Rectangle.png" alt="">
    </span>
    <p>您的钻石余额不足，请充值</p>
    <a onclick="gotoZuanFragment()" class="pop_footerBtn">去充值</a>
  </div>
  <!--半透明全屏遮罩层-->
  <div class="overLay"></div>
  <script src="./js/viewport/viewport.js"></script>
  <script src="./js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    var documentHeight = $(document).outerHeight(true);
    $(".overLay").css({
      "height": documentHeight
    });

    //中奖用户滚动
    function autoScroll(obj) {
      $(obj).find("ul").animate({
        marginTop: "-0.3rem"
      }, 1000, function () {
        $(this).css({
          marginTop: "0"
        }).find("li:eq(0)").appendTo(this);
      })
    }

    //显示弹框
    function showPop(id) {
      $('#' + id).show();
      $(".overLay").show();
    }

    function hidePop(id) {
      $('#' + id).hide();
      $(".overLay").hide();
    }

    //开始游戏按钮事件
    var flag = false; //控制play按钮按下后 4s之内 再触发无反应
    function init() {
      if (!flag) {
        flag = true;
        play();
      }
    }

    function play() {
      $.ajax({
        url: '接口地址',
        type: 'post',
        timeout: 10000,
        dataType: 'json',
        cache: false,
        contentType: 'application/json;charset=utf-8',
        headers: {
          'header-encrypt-code': '$!{encrypt}'
        },
        success: function (result) {
          if (result.code == 0) {

            var data = result.data;
            //设置中止位置
            var s1 = data.indexes[0];
            var s2 = data.indexes[1];
            var s3 = data.indexes[2];

            // [0, -2, -4, -6, -8, -10]根据布局，来调整当前水果的位置
            var num0 = [0.3, -1.7, -3.7, -5.7, -7.7, -9.7][s1] + 'rem';
            var num1 = [0.3, -1.7, -3.7, -5.7, -7.7, -9.7][s2] + 'rem';
            var num2 = [0.3, -1.7, -3.7, -5.7, -7.7, -9.7][s3] + 'rem';
            var count = 0;

            // $(selector).animate(styles,speed,easing,callback)
            $(".slotCon0").animate({
              "top": -550
            }, 1000, "linear", function () {
              $(this).css("top", 0).animate({
                "top": num0
              }, 1000, "linear", function () {
                if (++count >= 3) {
                  (data);
                }
              });
            });
            $(".slotCon1").animate({
              "top": -550
            }, 1000, "linear", function () {
              $(this).css("top", 0).animate({
                "top": num1
              }, 1800, "linear", function () {
                if (++count >= 3) {
                  showIt(data);
                }
              });
            });
            $(".slotCon2").animate({
              "top": -550
            }, 1000, "linear", function () {
              $(this).css("top", 0).animate({
                "top": num2
              }, 1300, "linear", function () {
                if (++count >= 3) {
                  showIt(data);
                }
              });
            });

          } else if (num0 == 0 && num1 == 0 && num2 == 0) {
            console.log('全是小红果')
          } else if (21010 == result.code) {
            //抽奖余额不足
            showPop('noMoneyPop');
            flag = false;
          } else {
            alert(result.codemsg);
            flag = false;
          }
        },
        error: function () {
          alert("系统错误！");
          flag = false;
        }
      });
    }
    // 请求成功弹窗
    function showIt(data) {
      setTimeout(function () {
        if (data.award > 0) {
          // 得到钻石数
          $("#prize").text(data.award);
          showPop('successPop');
          // 中奖记录
          $("#scrollCon ul").append('<li>恭喜<span class="nickname">' + data.nickname + '</span>得到<span>' + data.bei +
            '倍</span>钻石奖励</li>');
        } else {
          showPop('thanksPop');
        }
        $("#zuanNum").text(data.balance);

        flag = false;
      }, 50);
    }
    //设置初始化时显示第几个奖品
    function reset() {
      $(".slotCon0").css({
        "top": 0.3 + 'rem'
      });
      $(".slotCon1").css({
        "top": 0.3 + 'rem'
      });
      $(".slotCon2").css({
        "top": 0.3 + 'rem'
      });
    }

    $(function () {
      //调用中奖用户滚动
      setInterval('autoScroll("#scrollCon")', 5000);
      //调用初始显示第几个奖品
      reset();
      //开始按钮事件
      $("#begin").click(function () {
        init();
      });
      $("#beginP").click(function () {
        init();
      });
      //弹窗再玩一次事件
      $(".playAgainBtn").click(function () {
        $(this).parents(".pop").hide();
        $(".overLay").hide();
        setTimeout(init, 50);
      });
    });

  </script>
</body>

</html>

复制代码