微信小程序(游戏)----拼图游戏(设计思路)
微信小程序(游戏)----拼图游戏(设计思路)
设计思路
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项目地址
微信小程序实例列表
前端笔记列表
游戏列表
微信小程序(游戏)----拼图游戏(设计思路)相关推荐
- 优质微信小程序的体验与设计思路
体验和设计评估 在小程序的设计和开发阶段,我们希望开发者始终将优秀的用户体验作为产品目标之一,通过积极的用户体验和设计评估,在不断的迭代中完善用户体验,用心打磨小程序,从而更好实现产品价值,激发用户正 ...
- 微信小程序开发的游戏《拼图游戏》
微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({/*** 页面的初始数据*/data: {},initGame: functi ...
- 微信小程序志愿者服务的设计与实现
源码获取:https://www.bilibili.com/video/BV13m4y1c7NW/ 技术要求: (1)微信小程序开发工具开发: (2)后端:ssm + mysql + b ...
- 基于微信小程序的预约挂号设计与实现
基于微信小程序的预约挂号设计与实现
- 【来一杯word】微信小程序项目需求分析及设计初稿
[来一杯word]微信小程序从零到上线 一.[来一杯word]微信小程序项目需求分析及设计初稿 文章目录 [来一杯word]微信小程序从零到上线 前言 一.需求分析.功能实现 1.界面设计 2.单位转 ...
- 微信小程序的开发界面设计
微信小程序的开发界面设计需要遵循微信官方的设计规范和标准,以确保小程序具有一致的外观和用户体验.以下是一些微信小程序开发界面设计的建议: 界面布局:微信小程序的界面布局应该简洁明了,易于使用.界面中应 ...
- 微信小程序开发拼图小游戏
闲来无事,自己用微信小程序开发了一个拼图小游戏玩,大概效果就是这样的: 大概效果就是这样,感兴趣的小伙伴可以看一下,需要代码请留言自己的微信.
- 用微信小程序做H5游戏尝试
微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...
- 【CSDN下载】第七期:微信小程序跳一跳游戏破解源码、Modbus TCP和TCP通信测试
为便于广大开发者对热门资源的下载需求,下载频道专为广大开发者开辟了推荐一周IT优质资源通道,以供开发者参考下载,同时欢迎大家上传优质资源并留言所需的资源,小编会汇总所需,及时奉上所求. 源码系列 微信 ...
- Html5小游戏 转微信小程序,白鹭H5游戏转微信小游戏问题集锦,你关心的都在这里...
首先,再次强调一些微信小游戏的基础技术限制: * 不允许操作 DOM.BOM.如果必须改成小游戏相应的 API 调用方式,目前引擎会自动引入weapp-adapter.js 文件做兼容处理. * 不允 ...
最新文章
- 提升你的开发效率,10 个 NPM 使用技巧
- MySQL 函数积累
- Oracle 的成功无法复制,国产数据库该如何突破?
- 话里话外:从信息系统两大特性理解信息化的实施难度
- 你知道 JavaScript 中的 Arguments 对象都有哪些用途吗?
- 【6.10校内test】T3 加分二叉树
- MATLAB实现主成分分析
- 数独问题流程图_算法实践——数独的基本解法
- 御用导航提示提醒_AR实景导航,让你安全驾驶,不再“绕弯”
- Python列表排序_revered逆序_max_min_sum
- 科学计算机怎么按出arctan,计算器arctan怎么按
- C++的友元函数,友元类及#pragma once的作用
- 无论你处于Java学习的哪个阶段,这些都适合你
- Linux(centos7.9)常用命令大全及基础知识
- 报表开发工程师面试准备
- PPP拨号和NDIS拨号的区别:
- Python之 列表推导式(含例题)
- 计算机二级黑板板书书写,清华老师的板书惊艳朋友圈 8个技巧让黑板亮起来
- HFSS入门 T型波导模型优化
- 牛!各种变态的数独谜题
热门文章
- c盘空间不足,删除 wer/reportqueue目录文件
- Unity中文输入法不能输入问题解决
- IIS7环境下支持mp4视频随意拖动和预览,WIN2008以上,边播放边下载
- greenDao3 0使用小结
- 中国乌龙茶市场趋势报告、技术动态创新及市场预测
- 用Python绘制分子结构
- Hive 启动报错java.net.URISyntaxException: Relative path in absolute URI 解决方法
- Linux下系统如何监控服务器硬件、操作系统、应用服务和业务
- linux下 postgresql 安装 postgis 拓展
- table隐藏列与colgroup标签