微信小步调 实现拼图功能

效果示例


     微信小步调 碎片拼图
  
功能描述

在微信小步调中，实现一个简单的拼图小游戏。用户需要将四张碎片图片拖动到目标图片的精确位置，详细功能如下：
拖动功能：
用户可以通过手指拖动碎片图片，自由移动到目标图片的任意位置。
位置匹配：
如果碎片被拖动到精确的位置（即与目标图片的预定区域完全重叠或匹配），碎片会主动吸附到目标图片的指定位置，并表现为已完成。
如果碎片被拖动到错误的位置（未能与目标区域匹配），碎片会主动返回到初始位置。
完成检测：
当全部碎片都被精确放置后，触发完成拼图的效果（如表现完整图片、播放动画或提示乐成信息）。
代码示例

• html
  

1. <!--pages/cssCase/puzzle1/index.wxml-->
2. <view class="container">
3.   <!-- 上方的拼图框 -->
4.   <view class="puzzle-box">
5.     <view class="puzzle-cell" wx:for="{{puzzleCells}}" wx:key="id" id="{{item.id}}" data-id="{{item.id}}">
6.       <image src="{{item.image}}" class="target-image"></image>
7.     </view>
8.   </view>
10.   <!-- 下方的碎片 --> <!-- 添加 data-index 以传递碎片的索引 -->
11.   <view class="pieces">
12.     <view class="piece" wx:for="{{pieces}}" wx:key="id"
13.       id="{{item.id}}"
14.       style="left: {{item.left}}px; top: {{item.top}}px;"
15.       data-id="{{item.id}}"
16.       data-index="{{index}}"  
17.       bindtouchstart="onTouchStart"
18.       bindtouchmove="onTouchMove"
19.       bindtouchend="onTouchEnd"
20.       wx:if="{{!item.hidden}}"> <!-- 只有当 hidden 为 false 时才显示碎片 -->
21.       <image src="{{item.image}}"></image>
22.     </view>
23.   </view>
24. </view>

复制代码

• css
  

1. /* pages/cssCase/puzzle1/index.wxss */
2. .container {
3.   display: flex;
4.   flex-direction: column;
5.   align-items: center;
6.   justify-content: center;
7.   height: 100%;
8. }
10. .puzzle-box {
11.   margin: 20rpx;
12.   border: 1px solid #ccc;
13.   display: flex;
14.   align-items: center;
15.   justify-content: center;
16.   flex-wrap: wrap;
17.   padding: 20rpx;
18.   box-sizing: border-box;
19. }
21. .puzzle-cell {
22.   width: 300rpx;
23.   height: 300rpx;
24.   border: 1rpx solid #ccc;
25.   position: relative;
26. }
27. .target-image {
28.   width: 300rpx;
29.   height: 300rpx;
30. }
32. .pieces {
33.   display: flex;
34.   justify-content: space-between;
35.   width: 100%;
36.   padding: 0 10rpx;
37. }
39. .piece {
40.   width: 150rpx;
41.   height: 150rpx;
42.   position: absolute;
43. }
45. .piece image {
46.   width: 100%;
47.   height: 100%;
48. }

复制代码

• js
  

1. // pages/cssCase/puzzle1/index.js
2. Page({
3.   data: {
4.     puzzleCells: [
5.       { id: 'cell-1', image: '', correctPieceId: 'piece-1' },
6.       { id: 'cell-2', image: '', correctPieceId: 'piece-2' },
7.       { id: 'cell-3', image: '', correctPieceId: 'piece-3' },
8.       { id: 'cell-4', image: '', correctPieceId: 'piece-4' },
9.     ],
10.     pieces: [
11.       { id: 'piece-1', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce1.jpeg', left: 10, top: 380, originalLeft: 10, originalTop: 380, hidden: false },
12.       { id: 'piece-2', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce2.jpeg', left: 120, top: 380, originalLeft: 120, originalTop: 380, hidden: false },
13.       { id: 'piece-3', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce3.jpeg', left: 210, top: 380, originalLeft: 210, originalTop: 380, hidden: false },
14.       { id: 'piece-4', image: 'https://static.sprucesmart.com/activity/shandong/jigsawPuzzle20250109/ce4.jpeg', left: 300, top: 380, originalLeft: 300, originalTop: 380, hidden: false },
15.     ],
16.     draggingPiece: null,
17.     draggingPieceIndex: null, // 用于记录当前拖拽的碎片在 pieces 中的索引
18.   },
20.   onTouchStart(e) {
21.     const { id, index } = e.currentTarget.dataset;
22.     this.setData({
23.       draggingPiece: id,
24.       draggingPieceIndex: index,
25.     });
26.   },
28.   onTouchMove(e) {
29.     const { pageX, pageY } = e.touches[0];
30.     const updatedPieces = this.data.pieces.map((piece, index) => {
31.       if (index === this.data.draggingPieceIndex) {
32.         return { ...piece, left: pageX - 75, top: pageY - 75 }; // 让碎片跟随手指移动
33.       }
34.       return piece;
35.     });
36.     this.setData({ pieces: updatedPieces });
37.   },
39.   onTouchEnd(e) {
40.     const { draggingPiece, draggingPieceIndex } = this.data;
41.     if (!draggingPiece) return;
43.     const query = wx.createSelectorQuery();
44.     this.data.puzzleCells.forEach((cell) => {
45.       query.select(`#${cell.id}`).boundingClientRect();
46.     });
47.     query.select(`#${draggingPiece}`).boundingClientRect();
49.     query.exec((res) => {
50.       const cellRects = res.slice(0, this.data.puzzleCells.length);
51.       const pieceRect = res[res.length - 1];
53.       let placed = false;
54.       cellRects.forEach((cellRect, index) => {
55.         const cell = this.data.puzzleCells[index];
56.         if (cell.correctPieceId === draggingPiece && this.checkOverlap(cellRect, pieceRect)) {
57.           placed = true;
58.           this.updatePuzzleCellImage(index, this.data.pieces[draggingPieceIndex].image);
59.           this.hidePiece(draggingPieceIndex);
60.           this.updatePiecePosition(draggingPieceIndex, cellRect.left, cellRect.top);
61.         }
62.       });
64.       if (!placed) {
65.         this.resetPiecePosition(draggingPieceIndex);
66.       }
68.       this.setData({ draggingPiece: null });
70.       // 检查是否完成拼图
71.       this.checkCompletion();
72.     });
73.   },
75.   checkOverlap(box1, box2) {
76.     return (
77.       box1.left < box2.left + box2.width &&
78.       box1.left + box1.width > box2.left &&
79.       box1.top < box2.top + box2.height &&
80.       box1.top + box1.height > box2.top
81.     );
82.   },
84.   updatePuzzleCellImage(cellIndex, image) {
85.     const updatedCells = [...this.data.puzzleCells];
86.     updatedCells[cellIndex].image = image;
87.     this.setData({ puzzleCells: updatedCells });
88.   },
90.   hidePiece(pieceIndex) {
91.     const updatedPieces = this.data.pieces.map((piece, index) => {
92.       if (index === pieceIndex) {
93.         return { ...piece, hidden: true }; // 设置碎片为隐藏
94.       }
95.       return piece;
96.     });
97.     this.setData({ pieces: updatedPieces });
98.   },
100.   updatePiecePosition(pieceIndex, left, top) {
101.     const updatedPieces = this.data.pieces.map((piece, index) => {
102.       if (index === pieceIndex) {
103.         return { ...piece, left, top };
104.       }
105.       return piece;
106.     });
107.     this.setData({ pieces: updatedPieces });
108.   },
110.   resetPiecePosition(pieceIndex) {
111.     const updatedPieces = this.data.pieces.map((piece, index) => {
112.       if (index === pieceIndex) {
113.         return { ...piece, left: piece.originalLeft, top: piece.originalTop };
114.       }
115.       return piece;
116.     });
117.     this.setData({ pieces: updatedPieces });
118.   },
120.   // 检查拼图是否完成
121.   checkCompletion() {
122.     const allPiecesPlaced = this.data.pieces.every((piece) => piece.hidden);
123.     if (allPiecesPlaced) {
124.       wx.showToast({
125.         title: '拼图完成！',
126.         icon: 'success',
127.         duration: 2000,
128.       });
129.     }
130.   },
131. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。