微信小程序 实现拼图功能
微信小程序 实现拼图
- 效果示例
- 功能描述
- 代码示例
效果示例
微信小程序 碎片拼图
功能描述
在微信小程序中,实现一个简单的拼图小游戏。用户需要将四张碎片图片拖动到目标图片的正确位置,具体功能如下:
拖动功能:
用户可以通过手指拖动碎片图片,自由移动到目标图片的任意位置。
位置匹配:
如果碎片被拖动到正确的位置(即与目标图片的预定区域完全重叠或匹配),碎片会自动吸附到目标图片的指定位置,并显示为已完成。
如果碎片被拖动到错误的位置(未能与目标区域匹配),碎片会自动返回到初始位置。
完成检测:
当所有碎片都被正确放置后,触发完成拼图的效果(如显示完整图片、播放动画或提示成功信息)。
代码示例
- html
<!--pages/cssCase/puzzle1/index.wxml-->
<view class="container"><!-- 上方的拼图框 --><view class="puzzle-box"><view class="puzzle-cell" wx:for="{{puzzleCells}}" wx:key="id" id="{{item.id}}" data-id="{{item.id}}"><image src="{{item.image}}" class="target-image"></image></view></view><!-- 下方的碎片 --> <!-- 添加 data-index 以传递碎片的索引 --><view class="pieces"><view class="piece" wx:for="{{pieces}}" wx:key="id" id="{{item.id}}" style="left: {{item.left}}px; top: {{item.top}}px;" data-id="{{item.id}}" data-index="{{index}}" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"wx:if="{{!item.hidden}}"> <!-- 只有当 hidden 为 false 时才显示碎片 --><image src="{{item.image}}"></image></view></view>
</view>
- css
/* pages/cssCase/puzzle1/index.wxss */
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;
}.puzzle-box {margin: 20rpx;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;padding: 20rpx;box-sizing: border-box;
}.puzzle-cell {width: 300rpx;height: 300rpx;border: 1rpx solid #ccc;position: relative;
}
.target-image {width: 300rpx;height: 300rpx;
}.pieces {display: flex;justify-content: space-between;width: 100%;padding: 0 10rpx;
}.piece {width: 150rpx;height: 150rpx;position: absolute;
}.piece image {width: 100%;height: 100%;
}
- js
// pages/cssCase/puzzle1/index.js
Page({data: {puzzleCells: [{ id: 'cell-1', image: '', correctPieceId: 'piece-1' },{ id: 'cell-2', image: '', correctPieceId: 'piece-2' },{ id: 'cell-3', image: '', correctPieceId: 'piece-3' },{ id: 'cell-4', image: '', correctPieceId: 'piece-4' },],pieces: [{ id: 'piece-1', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce1.jpeg', left: 10, top: 380, originalLeft: 10, originalTop: 380, hidden: false },{ id: 'piece-2', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce2.jpeg', left: 120, top: 380, originalLeft: 120, originalTop: 380, hidden: false },{ id: 'piece-3', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce3.jpeg', left: 210, top: 380, originalLeft: 210, originalTop: 380, hidden: false },{ id: 'piece-4', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce4.jpeg', left: 300, top: 380, originalLeft: 300, originalTop: 380, hidden: false },],draggingPiece: null,draggingPieceIndex: null, // 用于记录当前拖拽的碎片在 pieces 中的索引},onTouchStart(e) {const { id, index } = e.currentTarget.dataset;this.setData({draggingPiece: id,draggingPieceIndex: index,});},onTouchMove(e) {const { pageX, pageY } = e.touches[0];const updatedPieces = this.data.pieces.map((piece, index) => {if (index === this.data.draggingPieceIndex) {return { ...piece, left: pageX - 75, top: pageY - 75 }; // 让碎片跟随手指移动}return piece;});this.setData({ pieces: updatedPieces });},onTouchEnd(e) {const { draggingPiece, draggingPieceIndex } = this.data;if (!draggingPiece) return;const query = wx.createSelectorQuery();this.data.puzzleCells.forEach((cell) => {query.select(`#${cell.id}`).boundingClientRect();});query.select(`#${draggingPiece}`).boundingClientRect();query.exec((res) => {const cellRects = res.slice(0, this.data.puzzleCells.length);const pieceRect = res[res.length - 1];let placed = false;cellRects.forEach((cellRect, index) => {const cell = this.data.puzzleCells[index];if (cell.correctPieceId === draggingPiece && this.checkOverlap(cellRect, pieceRect)) {placed = true;this.updatePuzzleCellImage(index, this.data.pieces[draggingPieceIndex].image);this.hidePiece(draggingPieceIndex);this.updatePiecePosition(draggingPieceIndex, cellRect.left, cellRect.top);}});if (!placed) {this.resetPiecePosition(draggingPieceIndex);}this.setData({ draggingPiece: null });// 检查是否完成拼图this.checkCompletion();});},checkOverlap(box1, box2) {return (box1.left < box2.left + box2.width &&box1.left + box1.width > box2.left &&box1.top < box2.top + box2.height &&box1.top + box1.height > box2.top);},updatePuzzleCellImage(cellIndex, image) {const updatedCells = [...this.data.puzzleCells];updatedCells[cellIndex].image = image;this.setData({ puzzleCells: updatedCells });},hidePiece(pieceIndex) {const updatedPieces = this.data.pieces.map((piece, index) => {if (index === pieceIndex) {return { ...piece, hidden: true }; // 设置碎片为隐藏}return piece;});this.setData({ pieces: updatedPieces });},updatePiecePosition(pieceIndex, left, top) {const updatedPieces = this.data.pieces.map((piece, index) => {if (index === pieceIndex) {return { ...piece, left, top };}return piece;});this.setData({ pieces: updatedPieces });},resetPiecePosition(pieceIndex) {const updatedPieces = this.data.pieces.map((piece, index) => {if (index === pieceIndex) {return { ...piece, left: piece.originalLeft, top: piece.originalTop };}return piece;});this.setData({ pieces: updatedPieces });},// 检查拼图是否完成checkCompletion() {const allPiecesPlaced = this.data.pieces.every((piece) => piece.hidden);if (allPiecesPlaced) {wx.showToast({title: '拼图完成!',icon: 'success',duration: 2000,});}},
});
相关文章:
微信小程序 实现拼图功能
微信小程序 实现拼图 效果示例功能描述代码示例 效果示例 微信小程序 碎片拼图 功能描述 在微信小程序中,实现一个简单的拼图小游戏。用户需要将四张碎片图片拖动到目标图片的正确位置,具体功能如下: 拖动功能: 用户可以通过手指…...
深度学习项目--基于LSTM的火灾预测研究(pytorch实现)
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 前言 LSTM模型一直是一个很经典的模型,这个模型当然也很复杂,一般需要先学习RNN、GRU模型之后再学,GRU、LSTM的模型讲解将…...
AI时代下 | 通义灵码冲刺备战求职季
AI时代下 | 通义灵码冲刺备战求职季 什么是通义灵码使用智能编程助手备战求职靠谱吗体验心得 AI时代下,备战求职季有了不一样的方法,使用通义灵码冲刺备战求职季,会有什么样的体验? 什么是通义灵码 在开始话题之前,首…...
当comfyui-reactor-node 安装失败urllib.error.HTTPError: HTTP Error 403: Forbidden解决方法
comfyUI 节点comfyui-reactor-node 安装 python install 时 报错 urllib.error.HTTPError: HTTP Error 403: Forbidden 如下: (xxx) xxxxxxx:~/sdb/Q/ComfyUI/custom_nodes/comfyui-reactor-node$ python install.py Traceback (most recent call last): File …...
SSE 实践:用 Vue 和 Spring Boot 实现实时数据传输
前言 大家好,我是雪荷。最近我在灵犀 BI 项目中引入了 SSE 技术,以保证图表的实时渲染,当图表渲染完毕服务端推送消息至浏览器端触发重新渲染。 什么是 SSE? SSE 全称为 Server-Send Events 意思是服务端推送事件。 SSE 相比于 …...
TouchGFX学习笔记(一)
配置请参考链接:TouchGFX超低配置移植教程-CSDN博客 一,显示配置 1.适当增加堆栈大小 2.适当增大缓冲大小 双重缓冲消除了任何撕裂的风险,无论渲染下一帧需要多长时间,因为TfT控制器,例如,总是可以访问最…...
Java算法 二叉树入门 力扣简单题相同的树 翻转二叉树 判断对称二叉树 递归求二叉树的层数
目录 模版 先序遍历 中序遍历 后序遍历 力扣原题 相同的二叉树 力扣原题 翻转二叉树 遍历树的层数 题目 静态变量 核心逻辑 模版 // 二叉树public static class Node{public int value;public Node left;public Node right;public Node(int v) {valuev;}} 先序遍历 …...
如何将 session 共享存储到 redis 中
文章目录 一. 分布式 session 登录1.1 什么是分布式?1.2 Session 共享1.3 为什么服务器 A 登录后,请求发到服务器 B,不认识该用户?1.4 共享存储 二. Session 共享实现Redis三. 测试session共享四. cookie设置4.1 前端4.2 后端 一.…...
vue3学习三
五 计算属性 定义 选项式 export default {data(){return {num:1}},computed:{num1(){this.num1}} } 组合式 import {ref,computed} from vuelet numref(0); //仅读 let num1 computed(()>{return num.value1 }) 计算时依赖的变量数据发生变化,则计算属性…...
彻底理解JVM类加载机制
文章目录 一、类加载器和双亲委派机制1.1、类加载器1.2、双亲委派机制1.3、自定义类加载器1.4、打破双亲委派机制 二、类的加载 图片来源:图灵学院 由上图可知,创建对象,执行其中的方法,在java层面,最重要的有获取…...
【计算机体系结构、微架构性能分析】core 与 uncore 分别是哪一些部分?区分 core 和 uncore
在计算机体系结构中,Core 和 Uncore 是描述处理器内部架构的两个重要概念,尤其在多核处理器中更为常见。 1. Core(核心) Core 指的是处理器中的计算核心,是执行指令和处理数据的基本单元。每个核心都包含独立的执行单…...
鸿蒙打包发布
HarmonyOS应用/元服务发布(打包发布) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/ide-publish-app-V13?catalogVersionV13 密钥:包含非对称加密中使用的公钥和私钥,存储在密钥库文件中,格式…...
vue2:实现上下两栏布局,可拖拽改变高度
要拖拽改变两栏高度,那么总高度要确定,在拖拽的过程中,实时根据光标位置计算两栏高度,所以: 1、最外层有一个box, 高度是屏幕高度screenHeight; 2、该值在页面挂载时获取初始值(window.innerHeight-100),这里减少100,因为窗口上面有工具栏; 3、监听窗口resize事件…...
MongoDB 学习指南:深入探索非关系型数据库
MongoDB学习资料 MongoDB学习资料 MongoDB学习资料 在当今数字化时代,数据量呈爆炸式增长,数据结构也变得愈发复杂多样。传统的关系型数据库在处理一些大规模、高并发以及非结构化数据时,逐渐显露出局限性。而 MongoDB 作为一款领先的非关系…...
天机学堂3-ES+Caffeine
文章目录 day05-问答系统表 用户端分页查询问题目标效果代码实现 3.6.管理端分页查询问题ES相关 管理端互动问题分页实现三级分类3.6.5.2.多级缓存3.6.5.3.CaffeineTODO:使用Caffeine作为本地缓存,另外使用redis或者memcache作为分布式缓存,构…...
FPGA车牌识别
基于FPGA的车牌识别主要包含以下几个步骤:图像采集、颜色空间转换、边缘检测、形态学处理(腐蚀和膨胀)、特征值提取、模板匹配、结果显示。先用matlab对原理进行仿真,后用vivado和modelsim进行设计和仿真。 一、1.图像采集采用ov…...
Pandas库的常用内容归纳
Pandas 是一个强大的 Python 数据分析库,提供了大量用于数据处理和分析的功能。以下是一些 Pandas 库中常用的功能: 数据创建和操作 Series 和 DataFrame:创建一维的 Series 和二维的 DataFrame 对象。数据导入:从 CSV、Excel、…...
R语言的并发编程
R语言的并发编程 引言 在现代计算中,如何有效地利用计算资源进行数据处理和分析已成为一个重要的研究方向。尤其在大数据时代,数据量的急剧增加让单线程处理方式显得力不从心。为了解决这一问题,各种编程语言都开展了并发编程的研究和应用。…...
STM32 FreeRTOS中断管理
目录 FreeRTOS的中断管理 1、STM32中断优先级管理 2、FreeRTOS任务优先级管理 3、寄存器和内存映射寄存器 4、BASEPRI寄存器 5、FreeRTOS与STM32中断管理结合使用 vPortRaiseBASEPRI vPortSetBASEPRI 6、FromISR后缀 7、在中断服务函数中调用FreeRTOS的API函数需注意 F…...
数据结构-栈和队列
文章目录 一、栈1.概念与结构2.数组栈的实现2.1 栈的结构定义2.2 栈的初始化2.3 栈的销毁2.4 栈的判空2.5 栈的入栈2.6 栈的出栈2.7 查看栈顶元素2.8 栈的大小 3.两种栈的图示结构 二、队列1.概念与结构2.链式队列的实现2.1 队列的结构定义2.2 队列的初始化2.3 队列的销毁2.4 队…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
uniapp 实现腾讯云IM群文件上传下载功能
UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中,群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS,在uniapp中实现: 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...
