微信小程序【五】摇骰子

devtools/2024/9/22 19:39:36/

摇骰子

  • 一、dice.js
  • 二、dice.json
  • 三、dice.wxml
  • 四、dice.wxss

效果简述:点击设置“骰子个数”,喝一杯前,先摇一摇。
骰子图片命名示例: 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;
}

http://www.ppmy.cn/devtools/92449.html

相关文章

安装 Zookeeper

安装 Zookeeper 安装 Zookeeper cd /opt tar -zxvf apache-zookeeper-3.5.7-bin.tar.gz mv apache-zookeeper-3.5.7-bin /opt/zookeeper//修改配置文件 cd /opt/zookeeper/conf/ cp zoo_sample.cfg zoo.cfgvim zoo.cfg tickTime2000 #通信心跳时间&#xff0c;Zookeeper服务…

记一次 .NET某智慧出行系统 CPU爆高分析

一&#xff1a;背景 1. 讲故事 前些天有位朋友找到我&#xff0c;说他们的系统出现了CPU 100%的情况&#xff0c;让你帮忙看一下怎么回事&#xff1f;dump也拿到了&#xff0c;本想着这种情况让他多抓几个&#xff0c;既然有了就拿现有的分析吧。 二&#xff1a;WinDbg 分析…

接口隔离原则

接口隔离原则 接口隔离原则就是客户端不应该依赖它不需要的接口&#xff0c;或者说类间的依赖关系应该建立在最小的接口上。 我们以搜索美女为例&#xff0c;设计了如下的类图&#xff1a; 源代码如下。美女及其实现类&#xff1a; 搜索程序及其子类源代码如下&#xff1a; 最…

什么是前端微服务,有何优势

随着互联网技术的发展&#xff0c;传统的单体应用架构已经无法满足复杂业务场景的需求。微服务架构的兴起为后端应用的开发和部署提供了灵活性和可扩展性。与此同时&#xff0c;前端开发也经历了类似的演变&#xff0c;前端微服务作为一种新兴的架构模式应运而生。 一、前端微服…

C++ CMake FFmpeg配置

SDK下载 github 环境变量配置 cmake_modules/FindFFmpeg.cmake # This module defines the following variables: # # FFmpeg_FOUND - All required components and the core library were found # FFmpeg_INCLUDE_DIRS - Combined list of all components includ…

24.8.5数据结构|栈

栈-弹夹 1、定义&#xff1a; 栈就是特殊的线性表&#xff0c;与之前的线性表的区别就是增加了约束&#xff0c;只允许在一端插入和删除&#xff0c;就这麽简单。 2、基本操作 栈的插入操作叫&#xff1a;入栈{进栈、压栈}&#xff1b;栈的删除&#xff1a;出栈{退栈&#x…

【MySQL】内置函数

【MySQL】内置函数 日期函数字符串函数数学函数其他函数 日期函数 获取年月日 mysql> select current_date(); ---------------- | current_date() | ---------------- | 2024-08-12 | ---------------- 1 row in set (0.01 sec)获取时分秒 mysql> select current_…

XXXForm组件

效果展示 代码 XXXForm <template><div class"search-container"><el-form ref"formRef" class"form_is_hidden" :model"form" v-bind"formAttrs"><el-row :gutter"20" class"search…