当前位置: 首页 > 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 队…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...