微信小程序【五】摇骰子

效果简述：点击设置“骰子个数”，喝一杯前，先摇一摇。
骰子图片命名示例： 1.png、2.png

一、dice.js

Page({data: {numDice: 1, // 初始化骰子数diceImages: [],dicePositions: [],rolling: false,intervalId: null},onInputNumDice(e) {this.setData({numDice: parseInt(e.detail.value) + 1,diceImages: [],dicePositions: []});},rollDice() {if (this.data.rolling) return;const { numDice } = this.data;this.setData({ rolling: true });const intervalId = setInterval(() => {const rollingImages = [];for (let i = 0; i < numDice; i++) {rollingImages.push('http://xxx/dice/' + Math.floor(Math.random() * 6 + 1) + '.png');}this.setData({diceImages: rollingImages,dicePositions: this.generateRandomPositions(numDice)});}, 100);this.setData({intervalId: intervalId});},revealDice() {if (!this.data.rolling) return;clearInterval(this.data.intervalId);const { numDice } = this.data;const finalDiceImages = [];for (let i = 0; i < numDice; i++) {finalDiceImages.push('http://xxx/dice/' + Math.floor(Math.random() * 6 + 1) + '.png');}this.setData({diceImages: finalDiceImages,rolling: false,intervalId: null,dicePositions: this.generateRandomPositions(numDice)});},generateRandomPositions(numDice) {const positions = [];const size = 50; const containerWidth = 300; const containerHeight = 200;const margin = 1; // 骰子间距for (let i = 0; i < numDice; i++) {let position;let overlaps;do {overlaps = false;position = {left: Math.floor(Math.random() * (containerWidth - size)),top: Math.floor(Math.random() * (containerHeight - size))};for (const other of positions) {if (Math.abs(position.left - other.left) < size + margin && Math.abs(position.top - other.top) < size + margin) {overlaps = true;break;}}} while (overlaps);positions.push(position);}return positions;},goBack() {wx.navigateBack();}
});

二、dice.json

这里不需要填，用默认的

{"usingComponents": {}
}

三、dice.wxml

<view class="container"><image class="background" src="http://xxx/bg/login_bg2.png" mode="aspectFill" /><view class="header"><image src="http://xxx/dice/return.png" class="back-button" bindtap="goBack" /></view><view class="content"><view class="dice-container"><block wx:for="{{diceImages}}" wx:key="index"><image src="{{item}}" class="dice" style="left:{{dicePositions[index].left}}px; top:{{dicePositions[index].top}}px;" /></block></view><view class="settings"><label for="numDice">骰子个数：</label><picker mode="selector" range="{{[1, 2, 3, 4, 5, 6, 7]}}" value="{{numDice-1}}" bindchange="onInputNumDice"><view>{{numDice}} 个</view></picker></view><view class="buttons"><view class="button-container"><image src="http://xxx/dice/roll.png" class="button" bindtap="rollDice" /><text>投掷</text></view><view class="button-container"><image src="http://xxx/dice/open.png" class="button" bindtap="revealDice" /><text>揭开</text></view></view></view>
</view>

四、dice.wxss

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100vh;position: relative;overflow: hidden;
}.background {position: absolute;width: 100%;height: 100%;z-index: -1;
}.header {position: absolute;top: 10px;left: 10px;
}.back-button {width: 30px;height: 30px;margin-top: 20px;margin-left: 10px;
}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;
}.dice-container {position: relative;width: 300px; height: 300px; margin-bottom: 20px;
}.dice {width: 50px;height: 50px;position: absolute;
}.settings {display: flex;align-items: center;margin-bottom: 20px;
}.settings label {margin-right: 10px;
}.buttons {display: flex;justify-content: center;
}.button-container {display: flex;flex-direction: column;align-items: center;margin: 0 40px;
}.button {width: 50px;height: 50px;margin-bottom: 5px;
}