微信小程序摇骰子功能实现|含源码

前言

本文只讲实现逻辑 + 完整可复制代码，小程序摇骰子核心功能：随机点数、摇晃动画、震动音效、多骰子控制。适合直接拿来开发、学习、上线。

一、实现思路（极简版）

使用 Math.random() 生成 1~6 随机点数
CSS 动画实现骰子摇晃效果
小程序 wx.vibrateShort() 实现震动
InnerAudioContext 播放音效
多骰子通过数组循环渲染
点击按钮触发整套逻辑

二、项目结构（只需 4 个文件）

复制代码

pages/index/index.js    // 逻辑
pages/index/index.wxml  // 页面
pages/index/index.wxss  // 样式
pages/index/index.json  // 配置

三、完整代码实现

1. index.wxml（页面结构）

复制代码

<view class="container">
  <!-- 骰子展示区 -->
  <view class="dice-box {{isShake ? 'shake' : ''}}">
    <view class="dice" wx:for="{{diceList}}" wx:key="index">
      <view class="point-{{item}}"></view>
    </view>
  </view>

  <!-- 按钮 -->
  <view class="btn" bindtap="rollDice">开始摇骰子</view>
</view>

index.wxss（样式 + 摇晃动画）

.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 0;
}

/* 骰子容器 */
.dice-box {
display: flex;
gap: 30rpx;
margin-bottom: 60rpx;
}

/* 单个骰子 */
.dice {
width: 100rpx;
height: 100rpx;
background: #fff;
border-radius: 12rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.3);
position: relative;
}

/* 骰子点数样式（1-6点） */
.point-1 { background-image: url("/images/1.png"); }
.point-2 { background-image: url("/images/2.png"); }
.point-3 { background-image: url("/images/3.png"); }
.point-4 { background-image: url("/images/4.png"); }
.point-5 { background-image: url("/images/5.png"); }
.point-6 { background-image: url("/images/6.png"); }

.point-1,
.point-2,
.point-3,
.point-4,
.point-5,
.point-6 {
width: 100%;
height: 100%;
background-size: 70% 70%;
background-position: center;
background-repeat: no-repeat;
}

/* 摇晃动画 */
.shake {
animation: shake 0.5s ease-in-out;
}

@keyframes shake {
0% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(-15rpx, 10rpx) rotate(-10deg); }
40% { transform: translate(15rpx, -10rpx) rotate(10deg); }
60% { transform: translate(-10rpx, -15rpx) rotate(-5deg); }
80% { transform: translate(10rpx, 15rpx) rotate(5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}

/* 按钮 */
.btn {
width: 300rpx;
height: 80rpx;
background: #ff4444;
color: #fff;
text-align: center;
line-height: 80rpx;
border-radius: 40rpx;
font-size: 32rpx;
}

index.js（核心逻辑）

Page({
data: {
diceList: [1, 1], // 默认2个骰子
isShake: false, // 是否在摇晃
},

onLoad() {
// 页面加载可初始化音效
this.audio = wx.createInnerAudioContext();
},

// 摇骰子主方法
rollDice() {
let that = this;

复制代码

 // 1. 播放摇晃音效
 this.audio.src = "/audio/shake.mp3";
 this.audio.play();

 // 2. 震动
 wx.vibrateShort({ type: "heavy" });

 // 3. 开启摇晃动画
 that.setData({ isShake: true });

 // 4. 0.5秒后停止动画并生成随机点数
 setTimeout(() => {
   let list = [];
   // 生成2个随机点数（可改成1~6个）
   for (let i = 0; i < 2; i++) {
     let num = Math.floor(Math.random() * 6) + 1;
     list.push(num);
   }

   that.setData({
     diceList: list,
     isShake: false,
   });
 }, 500);

},
});

index.json（页面配置）

{
"navigationBarTitleText": "摇骰子酒局助手",
"navigationBarBackgroundColor": "#191919",
"navigationBarTextStyle": "white",
"backgroundColor": "#111"
}

四、核心功能讲解（纯实现）

1. 随机点数生成

复制代码

let num = Math.floor(Math.random() * 6) + 1;

生成 1~6 之间的整数
循环几次 = 几个骰子

2. 摇晃动画实现

复制代码

.shake { animation: shake 0.5s ease-in-out; }

通过 transform 位移 + 旋转
动画结束自动停止

3. 震动反馈

复制代码

wx.vibrateShort({ type: "heavy" });

手机震动增强真实感
支持长震动、短震动

4. 音效播放

复制代码

this.audio = wx.createInnerAudioContext();
this.audio.src = "/audio/shake.mp3";
this.audio.play();

摇骰子时同步播放音效

5. 多骰子渲染

复制代码

// 循环生成N个骰子
for(let i=0; i<2; i++){
  let num = Math.floor(Math.random()*6)+1
  list.push(num)
}

改 i<2 即可控制骰子数量（1~6 个）

五、扩展功能（直接加代码）

1. 控制骰子数量（1~6 颗）

复制代码

data: {
  diceNum: 2, // 控制数量
},

rollDice(){
  let list = []
  for(let i=0; i<this.data.diceNum; i++){
    let num = Math.floor(Math.random()*6)+1
    list.push(num)
  }
  this.setData({ diceList:list })
}

2. 显示结果总和

复制代码

let total = list.reduce((a,b)=>a+b,0)
this.setData({ total })

3. 历史记录

复制代码

let history = wx.getStorageSync('history') || []
history.unshift(list)
wx.setStorageSync('history', history)

六、注意事项

图片放在 /images 下
音效放在 /audio 下
个人小程序可正常上线
不涉及违规、可过审