微信小程序(游戏)----拼图游戏(设计思路)
2018-03-15 10:55
513 查看
设计思路
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原生的拖拽功能。采用的是拖拽切换拼图,而不是空位移动拼图,此种方式简单很多。
每次拖拽完成后所有的记录数据要清除还原。
微信小程序实现部分高德地图功能的DEMO下载
微信小程序实现MUI的部分效果的DEMO下载
更多微信小程序实例
GIT项目地址
游戏列表
git clone https://github.com/Rattenking/WXTUI-DEMO.git
相关文章推荐
- 头脑王者pk答题小程序开发思路 微信pk答题小程序开发 PK答题游戏你也可以做 微信pk答题游戏
- 微信小程序开发的游戏《拼图游戏》
- 应对微信小程序开发需知的5个设计思路
- 微信小程序:设计思路
- 设计微信小程序:遵循的4个原则
- 俄罗斯方块游戏设计——不拘一格编程序之二
- Go游戏服务器开发的一些思考(三十):排行榜服务器设计思路
- 利用结构体设计游戏背包属性的思路
- 今天用ACCESS简单研究了一下简单人工智能聊天程序的设计思路
- 为什么微信小程序也能做游戏?
- 微信小程序开发思路
- 关于“搭桥”游戏生成随机地图的设计思路
- 状态机思路在单片机程序设计中的应用
- 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
- 微信小程序(游戏)----五子棋(悔棋篇)
- android源码大全 IOS游戏源代码打包下载 小游戏|视频教程 微信小程序源码带后台全套|公众号平台
- 如何高效设计游戏——游戏兵种平衡的技巧与思路
- 微信小程序(游戏)----五子棋(AI篇)
- Cocos2d-x学习之---模仿微信打飞机游戏敌机层设计初想
- 游戏程序:定时器的设计和实现