微信小程序【五】摇骰子

摇骰子

  • 一、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.rhkb.cn/news/395503.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis进阶(四):哨兵

为了解决主节点故障&#xff0c;需要人工操作切换主从的情况&#xff1b;因此需要一种方法可以自动化的切换&#xff1a;哨兵的引入大大改变这种情况。 哨兵的基本概念 自动切换主从节点 哨兵架构 1、当一个哨兵节点发现主节点挂了的时候&#xff0c;还需要其他节点也去检测一…

新华三H3CNE网络工程师认证—进制转换

了解进制转换&#xff0c;先要了解一下IP地址与子网划分&#xff0c;在我们通信当中&#xff0c;每一层都有它的标识&#xff0c;网络层的标识一共有两类协议&#xff0c;一个是IP协议&#xff0c;一个是IPv6协议。IP地址和MAC地址&#xff0c;他们之间是有一些区别。IP地址在网…

07.FreeRTOS列表与列表项

文章目录 07. FreeRTOS列表与列表项1. 列表和列表项的简介2. 列表相关API函数3. 代码验证 07. FreeRTOS列表与列表项 1. 列表和列表项的简介 列表的定义&#xff1a; typedef struct xLIST {listFIRST_LIST_INTEGRITY_CHECK_VALUE /* 校验值 */volatile UBaseType_t uxN…

在百度飞浆中搭建pytorch环境

文章目录 1 先检查创建的环境2 创建虚拟环境3 最终结果 1 先检查创建的环境 选择GPU版本 检查python版本 2 创建虚拟环境 虚拟环境的创建 python3 -m venv env_name # (python3 -m 路径 环境名)激活虚拟环境 source env_name/bin/activate这里注意&#xff0c;同名文件…

sqli靶场复现(1-8关)

目录 1.sqli-labs第二关 1.判断是否存在sql注入 1.1你输入数字值的ID作为参数&#xff0c;我们输入?id1 1.2在数据库可以查看到users下的对应内容 2.联合注入 2.1首先知道表格有几列&#xff0c;如果报错就是超过列数&#xff0c;如果显示正常就是没有超出列数。 2.2得…

PHP全方位多功能投票小程序系统源码

&#x1f31f;【全民参与&#xff0c;决策更精彩】全方位多功能投票小程序大揭秘&#xff01;&#x1f389; &#x1f680; 开篇引入&#xff1a;投票新风尚&#xff0c;尽在指尖 Hey小伙伴们&#xff0c;你是否厌倦了传统的投票方式&#xff0c;觉得它们既繁琐又不够灵活&am…

IO进程----标准IO

目录 IO进程 标准IO 1. 概念&#xff1a; 2. 特点&#xff1a; 3. 缓存区 3.1. 行缓存&#xff1a;和终端操作相关 刷新缓存的条件&#xff1a; 1) 程序正常退出 2) \n刷新 3) 缓存区满刷新 4) 强制刷新 fflush 3.2. 全缓存&#xff1a;和文件操作相关 3.…

sqli-labs闯关1-4

第一关&#xff1a; 这里的输入了 &#xff1f;id1 意思是以GET方式传入id1的参数 就等于SELECT * FROM users WHERE id1 LIMIT 0,1 注意&#xff1a;-- 与-- 空格的区别 在url中输入了--以后&#xff0c;后端数据会变成--空格。在 url中输入 -- 空格 变成 -- 在mysql中&…

使用Go语言实现基于泛型的Jaccard相似度算法

基本原理 跳表&#xff1a; jaccard相似度&#xff1a; jaccard相似度的代码实现&#xff1a; 时间复杂度分析&#xff1a; 快速jaccard算法&#xff1a; 代码实现&#xff0c;这个要求两个集合都是有序的&#xff1a; Jaccard相似度算法的基本实现 算法&#xf…

LeetCode Hot100 排序链表

给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5]示例 3&#xff1a; 输…

工程技术人员职称专业一览表,赶紧收藏!有助评职称、落户

现在很多地区为了引进人才&#xff0c;都会对各类获得中级或高级职称的人才提供一系列优惠政策&#xff0c;比如人才补贴、职称入户等等。 下面小编就来为大家介绍一下中级职称专业一览表&#xff0c;告诉你能以考代评的几个考试&#xff0c;需要评职称、落户的快看过来&#…

【秋招突围】2024届秋招-京东笔试题-第二套

🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 编程一对一辅导 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍭 本次给大家…

PXE:Kickstart自动化安装Linux系统

PXE&#xff1a;工作在 Client/Server模式&#xff0c;允许客户机通过网络从远程服务器下载引导镜像&#xff0c;并加载安装文件或者整个操作系统。 运行 PXE协议需要设置&#xff1a;DHCP服务器和TFTP服务器。DHCP服务器用来给 PXE client&#xff08;将要安装系统的主机&…

【C++二分查找 决策包容性】1300. 转变数组后最接近目标值的数组和

本文涉及的基础知识点 C二分查找 决策包容性 LeetCode1300. 转变数组后最接近目标值的数组和 给你一个整数数组 arr 和一个目标值 target &#xff0c;请你返回一个整数 value &#xff0c;使得将数组中所有大于 value 的值变成 value 后&#xff0c;数组的和最接近 target …

element plus el-select修改后缀图标

使用 element plus 提供的api 默认为&#xff1a; 修改后为&#xff1a; 方法&#xff1a; <el-select v-model"value" placeholder"Select" size"large" style"width: 120px;":teleported"false" :suffix-icon"…

香港电讯为知名地产商构建安全稳定可靠的企业组网

客户背景 客户公司的总部位于香港&#xff0c;专注于房地产、酒店、基础设施及服务、商场等业务。经过多年沉淀&#xff0c;其内地业务不断壮大&#xff0c;拓展至各个地区并覆盖多个城市&#xff0c;原有的网络架构已无法满足客户的业务扩张需求。 客户需求 解决网络速度和稳…

python-约瑟夫环(赛氪OJ)

[题目描述] n 个人&#xff08; 0,1,2,3,4...n−1 &#xff09;&#xff0c;围成一圈&#xff0c;从编号为 k 的人开始报数&#xff0c;报数报到 m 的人出队。 下次从出队的人之后开始重新报数&#xff0c;循环往复&#xff0c;当队伍中只剩最后一个人的时候&#xff0c;那个人…

C++从入门到起飞之——深浅拷贝string类补充 全方位剖析!

​ &#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1、浅拷贝 2、深拷贝 3、现代版写法的拷贝构造和赋值重载 4、再探swap! 5、写实拷贝&#xff…

面试官:怎样设计一个分布式任务调度平台?

大家好&#xff0c;我是君哥。 在工作中&#xff0c;批量任务调度的需求经常会遇到&#xff0c;比如下面的几个场景&#xff1a; 数据迁移&#xff1a;从数据库 A 批量读取数据&#xff0c;加工后把数据写入数据库 B&#xff1b; 消息通知&#xff1a;运营商批量给客户发送短…

同态加密和SEAL库的介绍(二)BFV 基础方案实现

写在前面&#xff1a; 本篇具体讲解如何使用 BFV 加密方案对加密的整数进行简单的计算&#xff08;一个多项式评估&#xff09;&#xff0c;来源是官方提供的示例。BFV 是比较常见的方案&#xff0c;在很多大模型推理的时候&#xff0c;都是将浮点数的权重和输入变换成…