一步一步完成一个聚会摇色子游戏
出去聚会想玩摇色子,奈何身边没有色子,网上也没找到,自己写一个吧
一、画界面
色子要大明显字要大,摇动最好有特效和声音,前端使用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-6dice.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
转载于:https://www.cnblogs.com/CallmeYhz/p/8109456.html
一步一步完成一个聚会摇色子游戏相关推荐
- Python摇色子游戏(两种模式)
1024快乐!! 送给大家一个小游戏 ^v^ 玩法: 开始可以选择双人或单人,然后就开始游戏. 你会摇到1~6的随机数,还会触发奖励或惩罚. 谁先到重点谁就赢. 代码: #-*- coding: &l ...
- html摇色子游戏,Swipebox – 用于触屏设备的精...-html5摇骰子游戏-lightbox——解析_169IT.COM...
start: function(imageLink) { hideSelectBoxes(); var arrayPageSize = getPageSize(); Element.setHeight ...
- 通过脚本案例学习shell(五) 通过创建DNS脚本一步一步教你将一个普通脚本规范到一个生产环境脚本...
通过脚本案例学习shell(五) 通过创建DNS脚本一步一步教你将一个普通脚本规范到一个生产环境脚本 版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议 ...
- 如何一步一步用DDD设计一个电商网站(七)—— 实现售价上下文
本系列所有文章 如何一步一步用DDD设计一个电商网站(一)-- 先理解核心概念 如何一步一步用DDD设计一个电商网站(二)-- 项目架构 如何一步一步用DDD设计一个电商网站(三)-- 初涉核心域 如 ...
- Verilog设计实例(2)一步一步实现一个多功能通用计数器
博文目录 写在前面 正文 普通的二进制计数器 电路设计 行为仿真 普通的格雷码计数器 电路设计 行为仿真 LFSR 电路设计 行为仿真 多功能计数器 电路设计 行为仿真 生成语句实现方式 电路设计 行 ...
- vue 将字符串最后一个字符给替换_一步一步的实现Vue(一)
这次想要自己学着实现简单版的vue,从而对vue有更加深入的理解. 推荐一个好用的vscode插件,可以本地快速启动服务器,并运行html文件,且拥有热加载功能:"live server&q ...
- button active 跳转到另一个页面_一步一步实现一个古诗词网站(四)——首页
汪小黑:一步一步实现一个古诗词网站(三)--首页zhuanlan.zhihu.com 在上篇文章中,我们一步一步的实现了我们的静态首页,从中学习到了页面布局方面的知识. 在这篇文章中,我们将使用 J ...
- 如何一步一步用DDD设计一个电商网站(十三)—— 领域事件扩展
本系列所有文章 如何一步一步用DDD设计一个电商网站(一)-- 先理解核心概念 如何一步一步用DDD设计一个电商网站(二)-- 项目架构 如何一步一步用DDD设计一个电商网站(三)-- 初涉核心域 如 ...
- python3循环一直到一个值结束_一步一步学Python3(小学生也适用) 第十七篇:循环语句for in循环...
一.Python for in循环 Python for in 循环,是用来遍历任何数据序列,如一个列表,一个字符串,一个字典,一个元组等. for in 循环的一般语法如下: for item in ...
最新文章
- hive2.1.1安装配置
- 解耦 多态性 java_java多态
- java恶作剧小程序_一个Java恶搞小程序
- mycncart操作使用教程 - 横幅广告
- 服务器u盘安装linux6.7,制作linux系统U盘并使用U盘安装CentOS7.6系统
- java云端部署_Jelastic Java云端平台
- MyCat双机HA高可用集群搭建_Keepalived安装和配置---MyCat分布式数据库集群架构工作笔记0029
- java对象与json对象间的相互转换的方法
- 会议管理SaaS平台Social Tables融资1300万美元
- Java Script学习 6(转)
- mysql中文坑爹的东西
- 快速批量重命名文件(夹)
- Spatiotemporal Multi-Graph Convolution Network for Ride-Hailing Demand Forecasting
- c语言的条件运算符,条件运算符c语言
- 1754. 骑士精神
- 邮箱客户端设置 服务器设置,263邮箱客户端设置
- 授课型英硕申请Ph.D (带奖)历程
- 在阿里云CentOS 7.4下安装WSTMart开源商城系统
- shaderToy初学笔记(一)(​转载自最简单的ShaderToy入门 - 笑脸渲染_亨利王的博客-CSDN博客_shadertoy)
- LTE网络-EPC(分组核心网)