摇骰子设计与实现（uni-app微信小程序）

姚思瀚

2026-07-21 • 👁 0人浏览过

文章目录摇骰子设计与实现准备工作实现步骤以及思路第一步：实现准备状态第二步：实现晃动中状态第三步：等待开起状态第四步：开启后状态部分优化总代码摇骰子设计与实现手机摇一摇可以摇骰子，上划可查看结果，震动加声音等功能。

本章底部会贴出所有代码，图片资源以及音频资源很简单，自己找一下就行了。

已经上线小程序，可以扫码直接预览效果。

准备工作新建一个项目，将已经准备好的资源，放入到项目中。

下面是需要资源图片的示例。

实现步骤以及思路作为一个前端，看到东西总是想着去实现一下。

感觉摇骰子简单就实现一下，如果难的话，可能就不会出来了。

哈哈，开始上正文。

首先开始思考摇骰子的流程，准备状态>>>晃动中状态>>>等待开起状态>>>开启后状态。

简单的四步循环，开整。

第一步：实现准备状态实现准备状态，我们要实现什么？

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 ”的变量实现动画。

声音的是利用了“ uni.createInnerAudioContext() ”设置好自动播放，音频文件地址，调用**onPlay()**方法实现声音的播放。

					const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.autoplay = true;
innerAudioContext.src = '/static/rollDice/dice.mp3';
innerAudioContext.onPlay(() => {});

第三步：等待开起状态实现晃动中状态，我们要实现什么？

1、上划骰盅晃动，展示结果。

实现滑动，这里就不得不说下手指触摸屏幕**“@touchstart” 、触摸移动 “@touchmove” 、手指离开屏幕 “@touchend” 这个三个事件。

手指触摸的时候记录当前 pageY**的值，移动时算出移动的位置，改变骰盅的位置。

手指离开后恢复原先的状态。

原本想着，滑动骰盅直接展示结果，但是感觉太突然了。

就使用“ opacity ”透明度显得不那么突然。


@touchstart="maskTouchStart" @touchmove.prevent="maskTouchMove" @touchend="maskTouchEnd"
src="../../static/rollDice/dice.png" mode="">

			// 开始触摸屏幕

maskTouchStart(ev) {
this.YStart = ev.changedTouches[0].pageY
},
// 触摸移动
maskTouchMove(ev) {
var result =0
if(this.gameType == 2){
result =  parseInt(this.YStart - ev.changedTouches[0].pageY)
}
if(result > 0){
this.yMove = result
this.opacityShow = result/100
}
},
// 触摸结束
maskTouchEnd(ev) {
this.yMove = 0
this.opacityShow = 0
},

第四步：开启后状态开启后状态，我们要实现什么？

1、结果骰子的展示。

毕竟6个骰子和20个骰子展示是不一样的。

这里先定好要展示位置的大小，然后通过骰子的个数，来改变骰子图片的大小

			// 设置骰子位置前

setDice() {
var arr = []
// 生成坐标数组
if (this.diceCount > 9) {
let pointSum = Math.floor(Math.sqrt(this.diceCount)) + 1
this.diceWidth = parseInt(240 / pointSum)
for (let i = 0; i < pointSum; i++) {
for (let k = 0; k < pointSum; k++) {
arr[arr.length] = {
top: i * this.diceWidth,
left: k * this.diceWidth
}
}
}
} else {
for (let i = 0; i < 3; i++) {
for (let k = 0; k < 3; k++) {
arr[arr.length] = {
top: i * 80,
left: k * 80
}
}
}
}
// 骰子位置以及角度
var dice, angle, temp, tempList
for (var i = 0; i < this.diceCount; i++) {
dice = (Math.random() * 6) >> 0
angle = (Math.random() * 6) >> 0
temp = (Math.random() * arr.length) >> 0;
// 让数组不重复
tempList = arr[temp];
arr.splice(temp, 1)
this.addDiceList(dice, angle, tempList)
}
},
// 设置骰子
addDiceList(dice, angle, tempList) {
this.diceList.push({
"rotate": 30 * angle,
"dice": dice,
"top": tempList.top,
"left": tempList.left
})
},

部分优化总体的功能就实现了，为了更加完善。

设置弹框、历史开骰记录、准备状态下显示骰子数量、等待开起状态开始陀螺仪监听可继续摇。

这就不多说了，具体的逻辑代码都在下面。

代码和我，只要一个能跑就行！

总代码