摇骰子设计与实现（uni

2023-07-11 06:17| 来源: 网络整理| 查看: 265

文章目录摇骰子设计与实现准备工作实现步骤以及思路第一步：实现准备状态第二步：实现晃动中状态第三步：等待开起状态第四步：开启后状态部分优化总代码

摇骰子设计与实现

手机摇一摇可以摇骰子，上划可查看结果，震动加声音等功能。本章底部会贴出所有代码，图片资源以及音频资源很简单，自己找一下就行了。已经上线小程序，可以扫码直接预览效果。喝酒神器

准备工作

新建一个项目，将已经准备好的资源，放入到项目中。下面是需要资源图片的示例。在这里插入图片描述

实现步骤以及思路

作为一个前端，看到东西总是想着去实现一下。感觉摇骰子简单就实现一下，如果难的话，可能就不会出来了。哈哈，开始上正文。首先开始思考摇骰子的流程，准备状态>>>晃动中状态>>>等待开起状态>>>开启后状态。简单的四步循环，开整。

第一步：实现准备状态

实现准备状态，我们要实现什么？ 1、手机摇一摇后开始摇骰子开整，页面如何铺设就不描述了代码在最下面。

利用uni.onGyroscopeChange监听陀螺仪，根据陀螺仪变化的速率来判断是否摇动了手机，当检测到摇动手机号开始游戏，并停止监听陀螺仪。实际情况中发现，摇动幅度大持续时间长，会执行多次。这里我想的是加个shakeState变量，监听到一次的时候就改变 shakeState，然后停止监听后开始游戏。

//监听陀螺仪 start() { uni.onGyroscopeChange((res) => { var nowRange = Math.abs(res.x) + Math.abs(res.x) + Math.abs(res.x); if (nowRange > 10) { this.shakeState = true } if(this.shakeState){ this.stop() this.shakeState = false this.playGame() } }); uni.startGyroscope({ interval: "normal" }) }, //停止监听陀螺仪 stop() { uni.stopGyroscope({}) }, 第二步：实现晃动中状态

实现晃动中状态，我们要实现什么？ 1、整个骰盅晃动，发出摇骰子的声音

骰盅晃动是通过vue中的**:class类样式绑定，在代码中写了一个rollDiceAnimation**的样式类实现一个动画，然后判断“gameType”的变量实现动画。

【本文地址】

公司简介

联系我们