微信小程序（游戏）

设计思路

1、将一张海报等分成 N*N 的矩阵

方法一：利用两个组件循环完成，view组件和image组件，view组件作为盒子规定大小—-超出部分不显示，image组件展示完整的海报—-进行定位。循环该组合拼接成一张完整的海报。
方法二：利用一个组件循环完成，view组件配合背景图，单纯的循环定位view组件，就能完成海报。

优点：方法一可以将大多数公用的WXSS提出到WXSS文件中，WXML代码比较清晰；方法二组件少一个，结构比较清晰。
缺点：方法一组件多，定位多，容易混乱；方法二背景必须在view组件上设置，代码冗余。

本文采用方法二实现。

2、图片位置的处理

1、 创建海报正确时的view定位和背景定位数组typeArr；
2、 创建打乱数组顺序的view定位和背景定位数组newTypeArr；
3、 对newTypeArr进行循环展示，在页面形成错乱的海报。

3、 打乱顺序的处理

1、创建一个矩阵个数（N*N）长度的一维数组（[0,…,N*N-1]）;
方法一：用sort方法传入函数 ()=>{return Math.random() - 0.5;}
方法二：循环每次随机一个位置，将当前位置的数和随机位置的数进行互换

function randomArr(){ let len = this.pointsArr.length; for(let i = 0; i < len; i++){ let index = parseInt(Math.random() * len); let current = this.pointsArr[i]; this.pointsArr[i] = this.pointsArr[index]; this.pointsArr[index] = current; } }

方法三：再新建一个空数组，循环矩阵数组，每次随机一个0 ~ N*N-1的数，保存到空数组，如果随机数在空数组存在，则此次循环重来，如果随机数在空数组不存在，则保存到空数组。

本文采用方法二处理。

4、触发拖拽和图片切换的处理 直接全局单独创建以view组件（拖拽view），默认隐藏，初始定位（0，0）背景（0，0）； touchstart的处理，获取触点的当前位置—通过触点获取该位置view组件的定位坐标（x，y）背景坐标（px，py），同时记录当前触点的坐标（cx，cy）； 将获取的定位坐标（x，y）背景坐标（px，py）赋值给拖拽view； touchmove的处理，记录当前移动点的坐标（cgx，cgy），通过坐标（cx，cy）和（cgx，cgy）计算出发生的位移（sx，sy），对拖拽view的定位坐标进行相同的位移（sx，sy）处理； touchend的处理，拖拽view隐藏还原，将end时矩阵触点view和start时的矩阵触点view的背景坐标（px，py）进行交换，完成两个位置的图片切换。 5、是否完成拼图的判断

将正确顺序数组typeArr和错乱数组newTypeArr进行JSON.stringify()转化比较，如果相同，则完成拼图，否则未完成拼图。

6、是否继续增加游戏难度

如果增加游戏难度，type值加一，init初始化游戏，否则返回首页。

注意

此处的拖拽功能采用的定位模拟，而不是HTML5原生的拖拽功能。 采用的是拖拽切换拼图，而不是空位移动拼图，此种方式简单很多。 每次拖拽完成后所有的记录数据要清除还原。

下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

相关知识

微信小程序页面内转发 按钮 转发
微信小程序隐藏元素的五种方法
1年增加150亿，小程序游戏赢麻了
《向僵尸开炮》微信小程序游戏攻略
微信跳一跳游戏玩法及隐藏技巧
小程序游戏与App游戏的对比
#原神×微信游戏联动
微信摇一摇比赛小游戏
《魔域手游2》微信小程序即将上线，快来随时随地幻化你的宝宝！
微信小游戏开发文档

网址: 微信小程序（游戏） http://www.hyxgl.com/newsview334416.html