微信小程序> 微信小程序游戏拼图游戏设计思路-小程序拼图验证-小程序图形验证码

微信小程序游戏拼图游戏设计思路-小程序拼图验证-小程序图形验证码

浏览量:3141 时间: 来源:liNewman
微信小程序(游戏)----拼图游戏(设计思路)设计思路1、将一张海报等分成N*N的矩阵1.

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

2.

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

3.

本文采用方法二实现。

2、图片位置的处理4.

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

3、打乱顺序的处理5.

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

functionrandomArr(){letlenthis.pointsArr.length;for(leti0;ilen;i++){letindexparseInt(Math.random()*len);letcurrentthis.pointsArr[i];this.pointsArr[i]this.pointsArr[index];this.pointsArr[index]current;}}6.

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

7.

本文采用方法二处理。

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、是否完成拼图的判断8.

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

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

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

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

我的博客,欢迎交流!

11.

我的CSDN博客,欢迎交流!

12.

微信小程序专栏

13.

前端笔记专栏

14.

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

15.

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

16.

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

17.

微信小程序实例列表

18.

前端笔记列表

19.

游戏列表

posted@2018-03-1510:55Newman·Li阅读(...)评论(...)编辑收藏

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎