微信小程序:拼图游戏 源代码:https://github.com/lcp1551/lcpISfat 游戏界面初始化游戏:
游戏成功:
思路&功能:1.初始化,将数字1~8存放在数组中,随机打乱后拼接一个9(空白格),修改空白格的样式 2.点击数字,判断空白格对于其所在位置的方向,进行相应的上下左右移动 3.上下左右移动,及把移动的两个数字互换在数组中的位置 4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9],是则游戏成功, 5.计时,利用定时器,结束,清除定时器 代码:项目中所用到的数据:
构建页面:index.wxml
需要传两个数据过去,一个是被点击块的下标index和块中的数字item 动态为空白格[9]添加样式active
游戏初始化:
初始化的时候,这里用了sortArr(arr)打乱数组,并拼接个空白格[9],这样让空白格初始化的时候永远处于最后一位。 随机打乱数组:
这里用了最简单的打乱方法,缺点就是打乱不完全 给每个块添加点击事件onMoveTap:
如果空白格的下标比所点击的块的下表大3,则表示空白格在所点击块的下方,那么点击后向下移动; 如果空白格的下标比所点击的块的下表小3,则表示空白格在所点击块的上方,那么点击后向上移动; 如果空白格的下标比所点击的块的下表大1,则表示空白格在所点击块的右方,那么点击后向右移动,需考虑点击快是否在容器右边缘; 如果空白格的下标比所点击的块的下表小1,则表示空白格在所点击块的左方,那么点击后向左移动,需考虑点击快是否在容器左边缘; 移动:以向上移动举例
移动后,将所点击块与空白格互换在数组中的位置,并判断目前的数组是否满足游戏成功的条件,判断数组相等,我这里把数组转化成字符串做的比较 游戏成功:
游戏成功,弹出交互反馈窗口,并初始化重新打乱数组 定时器:
开始结束游戏:
给开始按钮绑定timeBegin事件,初始化游戏 给结束按钮绑定timeStop事件,判断是否游戏成功
|
微信小程序:拼图游戏
发布:2018-08-29 09:17浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08