当前位置: 首页 > news >正文

微信小程序 实现拼图功能

微信小程序 实现拼图

  • 效果示例
  • 功能描述
  • 代码示例

效果示例

微信小程序 碎片拼图

功能描述

在微信小程序中,实现一个简单的拼图小游戏。用户需要将四张碎片图片拖动到目标图片的正确位置,具体功能如下:

拖动功能:
用户可以通过手指拖动碎片图片,自由移动到目标图片的任意位置。

位置匹配:

如果碎片被拖动到正确的位置(即与目标图片的预定区域完全重叠或匹配),碎片会自动吸附到目标图片的指定位置,并显示为已完成。
如果碎片被拖动到错误的位置(未能与目标区域匹配),碎片会自动返回到初始位置。

完成检测:
当所有碎片都被正确放置后,触发完成拼图的效果(如显示完整图片、播放动画或提示成功信息)。

代码示例

  • 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,});}},
});

相关文章:

微信小程序 实现拼图功能

微信小程序 实现拼图 效果示例功能描述代码示例 效果示例 微信小程序 碎片拼图 功能描述 在微信小程序中&#xff0c;实现一个简单的拼图小游戏。用户需要将四张碎片图片拖动到目标图片的正确位置&#xff0c;具体功能如下&#xff1a; 拖动功能&#xff1a; 用户可以通过手指…...

深度学习项目--基于LSTM的火灾预测研究(pytorch实现)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 LSTM模型一直是一个很经典的模型&#xff0c;这个模型当然也很复杂&#xff0c;一般需要先学习RNN、GRU模型之后再学&#xff0c;GRU、LSTM的模型讲解将…...

AI时代下 | 通义灵码冲刺备战求职季

AI时代下 | 通义灵码冲刺备战求职季 什么是通义灵码使用智能编程助手备战求职靠谱吗体验心得 AI时代下&#xff0c;备战求职季有了不一样的方法&#xff0c;使用通义灵码冲刺备战求职季&#xff0c;会有什么样的体验&#xff1f; 什么是通义灵码 在开始话题之前&#xff0c;首…...

当comfyui-reactor-node 安装失败urllib.error.HTTPError: HTTP Error 403: Forbidden解决方法

comfyUI 节点comfyui-reactor-node 安装 python install 时 报错 urllib.error.HTTPError: HTTP Error 403: Forbidden 如下&#xff1a; (xxx) xxxxxxx:~/sdb/Q/ComfyUI/custom_nodes/comfyui-reactor-node$ python install.py Traceback (most recent call last): File …...

SSE 实践:用 Vue 和 Spring Boot 实现实时数据传输

前言 大家好&#xff0c;我是雪荷。最近我在灵犀 BI 项目中引入了 SSE 技术&#xff0c;以保证图表的实时渲染&#xff0c;当图表渲染完毕服务端推送消息至浏览器端触发重新渲染。 什么是 SSE&#xff1f; SSE 全称为 Server-Send Events 意思是服务端推送事件。 SSE 相比于 …...

TouchGFX学习笔记(一)

配置请参考链接&#xff1a;TouchGFX超低配置移植教程-CSDN博客 一&#xff0c;显示配置 1.适当增加堆栈大小 2.适当增大缓冲大小 双重缓冲消除了任何撕裂的风险&#xff0c;无论渲染下一帧需要多长时间&#xff0c;因为TfT控制器&#xff0c;例如&#xff0c;总是可以访问最…...

Java算法 二叉树入门 力扣简单题相同的树 翻转二叉树 判断对称二叉树 递归求二叉树的层数

目录 模版 先序遍历 中序遍历 后序遍历 力扣原题 相同的二叉树 力扣原题 翻转二叉树 遍历树的层数 题目 静态变量 核心逻辑 模版 // 二叉树public static class Node{public int value;public Node left;public Node right;public Node(int v) {valuev;}} 先序遍历 …...

如何将 session 共享存储到 redis 中

文章目录 一. 分布式 session 登录1.1 什么是分布式&#xff1f;1.2 Session 共享1.3 为什么服务器 A 登录后&#xff0c;请求发到服务器 B&#xff0c;不认识该用户&#xff1f;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 }) 计算时依赖的变量数据发生变化&#xff0c;则计算属性…...

彻底理解JVM类加载机制

文章目录 一、类加载器和双亲委派机制1.1、类加载器1.2、双亲委派机制1.3、自定义类加载器1.4、打破双亲委派机制 二、类的加载 图片来源&#xff1a;图灵学院   由上图可知&#xff0c;创建对象&#xff0c;执行其中的方法&#xff0c;在java层面&#xff0c;最重要的有获取…...

【计算机体系结构、微架构性能分析】core 与 uncore 分别是哪一些部分?区分 core 和 uncore

在计算机体系结构中&#xff0c;Core 和 Uncore 是描述处理器内部架构的两个重要概念&#xff0c;尤其在多核处理器中更为常见。 1. Core&#xff08;核心&#xff09; Core 指的是处理器中的计算核心&#xff0c;是执行指令和处理数据的基本单元。每个核心都包含独立的执行单…...

鸿蒙打包发布

HarmonyOS应用/元服务发布&#xff08;打包发布&#xff09; https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/ide-publish-app-V13?catalogVersionV13 密钥&#xff1a;包含非对称加密中使用的公钥和私钥&#xff0c;存储在密钥库文件中&#xff0c;格式…...

vue2:实现上下两栏布局,可拖拽改变高度

要拖拽改变两栏高度,那么总高度要确定,在拖拽的过程中,实时根据光标位置计算两栏高度,所以: 1、最外层有一个box, 高度是屏幕高度screenHeight; 2、该值在页面挂载时获取初始值(window.innerHeight-100),这里减少100,因为窗口上面有工具栏; 3、监听窗口resize事件…...

MongoDB 学习指南:深入探索非关系型数据库

MongoDB学习资料 MongoDB学习资料 MongoDB学习资料 在当今数字化时代&#xff0c;数据量呈爆炸式增长&#xff0c;数据结构也变得愈发复杂多样。传统的关系型数据库在处理一些大规模、高并发以及非结构化数据时&#xff0c;逐渐显露出局限性。而 MongoDB 作为一款领先的非关系…...

天机学堂3-ES+Caffeine

文章目录 day05-问答系统表 用户端分页查询问题目标效果代码实现 3.6.管理端分页查询问题ES相关 管理端互动问题分页实现三级分类3.6.5.2.多级缓存3.6.5.3.CaffeineTODO&#xff1a;使用Caffeine作为本地缓存&#xff0c;另外使用redis或者memcache作为分布式缓存&#xff0c;构…...

FPGA车牌识别

基于FPGA的车牌识别主要包含以下几个步骤&#xff1a;图像采集、颜色空间转换、边缘检测、形态学处理&#xff08;腐蚀和膨胀&#xff09;、特征值提取、模板匹配、结果显示。先用matlab对原理进行仿真&#xff0c;后用vivado和modelsim进行设计和仿真。 一、1.图像采集采用ov…...

Pandas库的常用内容归纳

Pandas 是一个强大的 Python 数据分析库&#xff0c;提供了大量用于数据处理和分析的功能。以下是一些 Pandas 库中常用的功能&#xff1a; 数据创建和操作 Series 和 DataFrame&#xff1a;创建一维的 Series 和二维的 DataFrame 对象。数据导入&#xff1a;从 CSV、Excel、…...

R语言的并发编程

R语言的并发编程 引言 在现代计算中&#xff0c;如何有效地利用计算资源进行数据处理和分析已成为一个重要的研究方向。尤其在大数据时代&#xff0c;数据量的急剧增加让单线程处理方式显得力不从心。为了解决这一问题&#xff0c;各种编程语言都开展了并发编程的研究和应用。…...

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 队…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...