一步一步完成一个聚会摇色子游戏

      出去聚会想玩摇色子,奈何身边没有色子,网上也没找到,自己写一个吧

一、画界面

      色子要大明显字要大,摇动最好有特效和声音,前端使用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>

自定义手机摇色子就完成了,部署到自己的服务器上就可以使用了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

jquery封装的时间轴

很多时候,都会用到类似于时间轴的东西,鉴于网络资源没有那么顺手,就想着自己搞一个,在此将源码贴出来。

1301
来自专栏24K纯开源

用Qt写软件系列三:一个简单的系统工具之界面美化

前言      在上一篇中,我们基本上完成了主要功能的实现,剩下的一些导出、进程子模块信息等功能,留到后面再来慢慢实现。这一篇来讲述如何对主界面进行个性化的定制...

5547
来自专栏BestSDK

shift键在Excel中,还有这10种变态玩法?

电脑键盘上有很多「瑞士军刀」似的按键,掌握这些按键的使用技巧,你让你在Excel操作中,如虎添翼。 SHIFT键就是其中之一。 Excel中的技巧有很多,基本都...

4047
来自专栏wOw的Android小站

[iOS] 列表滑动展开隐藏头部HeaderView

首先看一下BiliBili客户端的视频浏览界面。默认界面Header完全展开,并且Header显示AV号(别乱想,就是视频编号了)以及播放按钮。滑动之后Head...

5182
来自专栏转载gongluck的CSDN博客

GDI透明贴图

网上下载的图片,有一些会有水印。水印的实现可以用透明贴图来做。透明贴图就是让两张图片合并的时候,重叠的部分中使一些颜色不显示,从而达到透明的效果。 如果用GDI...

4286
来自专栏進无尽的文章

UI篇-Layer几个关键点补充

强大的UIView是基于 CALayer实现的,它的重要性不言而喻,相信大家也都有自己的研究和理解,今天这片文章里的内容是几个关键点的补充。

1001
来自专栏Coding迪斯尼

对Box2D的物理世界进行图像美化和关卡选择设计

我们用Box2D绘制了很多几何图形,例如圆形,矩形,复杂一点就是两个矩形交叉的合在一起,中间再加个圆形。显然这种界面“太素”了,一个丰富多彩,五彩斑斓的游戏世界...

881
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

1461
来自专栏用户2442861的专栏

pyqt4制作透明无边框窗体

http://blog.chinaunix.net/uid-25979788-id-3081886.html

1542
来自专栏james大数据架构

Android中关于dip和px以及转换的总结

我们在页面布局的时候,经常会设置容器的长度,但是到底该使用哪个作为长度的单位而懊恼。在Android中支持的描述大小区域的类型有以下几种: px(pixels)...

1855

扫码关注云+社区

领取腾讯云代金券