老虎機抽獎

時間 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>

複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。