一步一步完成一個聚會搖色子游戲

      出去聚會想玩搖色子，奈何身邊沒有色子，網上也沒找到，自己寫一個吧

一、畫界面

      色子要大明顯字要大，搖動最好有特效和聲音，前端使用layui布局

1.引用

<link href="/plugin/layui/css/layui.css" rel="stylesheet">
<script src="/Scripts/jquery-1.8.2.min.js"></script>

2.布局

<div class="mybody" style="padding-top:100px">
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div id="dice" class="dice dice_1 sezi1"></div>
        </div>
        <div class="layui-col-xs4">
            <div id="dice" class="dice dice_1 sezi2"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs-offset4">
            <div id="dice" class="dice dice_1 sezi3"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div id="dice" class="dice dice_1 sezi4"></div>
        </div>
        <div class="layui-col-xs4">
            <div id="dice" class="dice dice_1 sezi5"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs-offset4">
           <button id="btnAll" class="layui-btn layui-btn-danger">一鍵全部搖</button>
        </div>
    </div>
</div>

3.適應手機

  <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

先用按鈕實現點擊就搖動色子，產生結果

二、搖動特效

   //色子搖動特效,設置點數
    function startJump(index) {
        var dice = $(".dice").eq(index);
        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩
        dice.attr("class", "dice");//清除上次動畫后的點數
        dice.css('cursor', 'default');
        var num = Math.floor(Math.random() * 6 + 1);//產生隨機數1-6
        dice.animate({ left: '+2px' }, 100, function () {
            dice.addClass("dice_t");
        }).delay(200).animate({ top: '-2px' }, 100, function () {
            dice.removeClass("dice_t").addClass("dice_s");
        }).delay(200).animate({ opacity: 'show' }, 600, function () {
            dice.removeClass("dice_s").addClass("dice_e");
        }).delay(100).animate({ left: '-2px', top: '2px' }, 100, function () {
            dice.removeClass("dice_e").addClass("dice_" + num);
            $("#result").html("您擲得點數是<span>" + num + "</span>");
            dice.css('cursor', 'pointer');
            $("#dice_mask").remove();//移除遮罩

            if (index == 4)
            {
                isJumping = false;
            }
        });
    }

因為index是索引，一共5個封裝一個函數

先實現一個色子搖動

5個色子同時搖動

            startJump(0);
            startJump(1);
            startJump(2);
            startJump(3);
            startJump(4);    

 

三、監聽手機搖動事件

<script>
    var SHAKE_THRESHOLD = 4500;  //定義觸發動作的閾值
    var last_update = 0;         //上一次觸發的時間
    var x = y = z = last_x = last_y = last_z = 0;//x,y,z當前加速度,last_z,last_x,last_y上次加速度<span style="font-size:18px;"></span>
    var isJumping = false;
</script>

<!--搖一搖內置腳本-->
<script>    
    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime - last_update) > 100) {
            var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
           
            if (speed > SHAKE_THRESHOLD) {
                //alert("speed:"+speed);
                //alert("SHAKE_THRESHOLD" + SHAKE_THRESHOLD);
                //搖動成功觸發這個函數
                handelShakingMotion();              
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }
    //監聽搖一搖的動作
    function listenPhoneShake() {
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
            console.log("addEventListener devicemotion");
        } else {
            alert('抱歉，你的手機配置實在有些過不去，考慮換個新的再來試試吧');
        }
    }
</script>

手機頁面$(function(){})執行 listenPhoneShake()函數 賦予事件，其中

SHAKE_THRESHOLD 這個變量是搖動的震動值 如果該值越大那么要很用力搖手機才會觸發自定義函數

部署到IIS用手機測試可以了變量isJumping設置搖動時候不能並發搖動防止不停搖動出現BUG 在index=4中處理

四、色子滾動時候添加聲音

1.添加標簽

<audio src="/css/Mobile/Images/music.mp3" preload="preload" id="shakingAudio">

2.播放

 $('#shakingAudio').get(0).play();

3.兼容性處理（Android下直接播放沒問題,IOS添加如下代碼）

 //處理iphone不能自動播放  
        document.addEventListener('WeixinJSBridgeReady', function () {
            $('#shakingAudio').get(0).play();
        }, false);

五、完整html代碼

@{
    ViewBag.Title = "搖色子";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutAdmin.cshtml";
}

<!DOCTYPE html>
<link href="~/css/Mobile/sezi.css" rel="stylesheet" />
<audio src="/css/Mobile/Images/music.mp3" preload="preload" id="shakingAudio">

</audio>  
<div class="mybody" style="padding-top:100px">
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div id="dice" class="dice dice_1 sezi1"></div>
        </div>
        <div class="layui-col-xs4">
            <div id="dice" class="dice dice_1 sezi2"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs-offset4">
            <div id="dice" class="dice dice_1 sezi3"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div id="dice" class="dice dice_1 sezi4"></div>
        </div>
        <div class="layui-col-xs4">
            <div id="dice" class="dice dice_1 sezi5"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs-offset4">
           <button id="btnAll" class="layui-btn layui-btn-danger">一鍵全部搖</button>
        </div>
    </div>
</div>

<!--定義全局變量-->
<script>
    var SHAKE_THRESHOLD = 4500;  //定義觸發動作的閾值
    var last_update = 0;         //上一次觸發的時間
    var x = y = z = last_x = last_y = last_z = 0;//x,y,z當前加速度,last_z,last_x,last_y上次加速度<span style="font-size:18px;"></span>
    var isJumping = false;
</script>

<!--搖一搖內置腳本-->
<script>    
    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime - last_update) > 100) {
            var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
           
            if (speed > SHAKE_THRESHOLD) {
                //alert("speed:"+speed);
                //alert("SHAKE_THRESHOLD" + SHAKE_THRESHOLD);
                //搖動成功觸發這個函數
                handelShakingMotion();              
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }
    //監聽搖一搖的動作
    function listenPhoneShake() {
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
            console.log("addEventListener devicemotion");
        } else {
            alert('抱歉，你的手機配置實在有些過不去，考慮換個新的再來試試吧');
        }
    }
</script>

<!--自定義腳本-->
<script type="text/javascript">
    //搖動后執行的事件
    function handelShakingMotion() {
        if (isJumping) return;
        $('#shakingAudio').get(0).play();
        isJumping = true;
        startJump(0);
        startJump(1);
        startJump(2);
        startJump(3);
        startJump(4);
    }

    //初始化
    $(function () {
        listenPhoneShake();
        //處理iphone不能自動播放  
        document.addEventListener('WeixinJSBridgeReady', function () {
            $('#shakingAudio').get(0).play();
        }, false);

      
        $("#btnAll").click(function () {
            //一般android機都能自動播放  
            $('#shakingAudio').get(0).play();          
            startJump(0);
            startJump(1);
            startJump(2);
            startJump(3);
            startJump(4);
        })
    });

    //色子搖動特效,設置點數
    function startJump(index) {
        var dice = $(".dice").eq(index);
        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩
        dice.attr("class", "dice");//清除上次動畫后的點數
        dice.css('cursor', 'default');
        var num = Math.floor(Math.random() * 6 + 1);//產生隨機數1-6
        dice.animate({ left: '+2px' }, 100, function () {
            dice.addClass("dice_t");
        }).delay(200).animate({ top: '-2px' }, 100, function () {
            dice.removeClass("dice_t").addClass("dice_s");
        }).delay(200).animate({ opacity: 'show' }, 600, function () {
            dice.removeClass("dice_s").addClass("dice_e");
        }).delay(100).animate({ left: '-2px', top: '2px' }, 100, function () {
            dice.removeClass("dice_e").addClass("dice_" + num);
            $("#result").html("您擲得點數是<span>" + num + "</span>");
            dice.css('cursor', 'pointer');
            $("#dice_mask").remove();//移除遮罩

            if (index == 4)
            {
                isJumping = false;
            }
        });
    }
</script>

自定義手機搖色子就完成了，部署到自己的服務器上就可以使用了

 

 

我的博客即將搬運同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan