频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序之拼图游戏实战教程
2019-12-07 10:02:52           
收藏   我要投稿

微信小程序:拼图游戏

游戏界面

初始化游戏:

游戏成功:

 

思路&功能:

1.初始化,将数字1~8存放在数组中,随机打乱后拼接一个9(空白格),修改空白格的样式

2.点击数字,判断空白格对于其所在位置的方向,进行相应的上下左右移动

3.上下左右移动,及把移动的两个数字互换在数组中的位置

4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9],是则游戏成功,

5.计时,利用定时器,结束,清除定时器

 

代码:

项目中所用到的数据:

 


  1. data: {
  2. num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前
  3. hidden: true, //隐藏空白格中的数字
  4. time:0, //秒数
  5. t:'' //定时器
  6. },复制代码

构建页面:index.wxml

 


  1.  
  2. 复制代码

需要传两个数据过去,一个是被点击块的下标index和块中的数字item

动态为空白格[9]添加样式active

 


  1. {{item == 9'active':''}}复制代码

游戏初始化:

 


  1. init:function(){
  2. this.setData({
  3. num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
  4. })
  5. },复制代码

初始化的时候,这里用了sortArr(arr)打乱数组,并拼接个空白格[9],这样让空白格初始化的时候永远处于最后一位。

随机打乱数组:

 


  1. sortArr: function (arr) {
  2. return arr.sort(function () {
  3. return Math.random() - 0.5
  4. })
  5. }复制代码

这里用了最简单的打乱方法,缺点就是打乱不完全

给每个块添加点击事件onMoveTap:

 


  1. onMoveTap: function (e) {
  2. var index = e.currentTarget.dataset.index;
  3. var item = e.currentTarget.dataset.item;
  4. if (this.data.num[index + 3] == 9) {
  5. this.down(e);
  6. }
  7. if (this.data.num[index - 3] == 9) {
  8. this.up(e);
  9. }
  10. if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {
  11. this.right(e);
  12. }
  13. if (this.data.num[index - 1] == 9 && index != 3 & index != 6) {
  14. this.left(e);
  15. } }复制代码

如果空白格的下标比所点击的块的下表大3,则表示空白格在所点击块的下方,那么点击后向下移动;

如果空白格的下标比所点击的块的下表小3,则表示空白格在所点击块的上方,那么点击后向上移动;

如果空白格的下标比所点击的块的下表大1,则表示空白格在所点击块的右方,那么点击后向右移动,需考虑点击快是否在容器右边缘;

如果空白格的下标比所点击的块的下表小1,则表示空白格在所点击块的左方,那么点击后向左移动,需考虑点击快是否在容器左边缘;

 

移动:

以向上移动举例

 


  1. up: function (e) {
  2. var index = e.currentTarget.dataset.index; //当前数字下标
  3. var temp = this.data.num[index];
  4. this.data.num[index] = this.data.num[index - 3]
  5. this.data.num[index - 3] = temp;
  6. this.setData({
  7. num: this.data.num
  8. })
  9. if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
  10. this.success();
  11. }
  12. }复制代码

移动后,将所点击块与空白格互换在数组中的位置,并判断目前的数组是否满足游戏成功的条件,判断数组相等,我这里把数组转化成字符串做的比较

 

游戏成功:

 


  1. success: function () {
  2. var that = this;
  3. wx.showToast({
  4. title: '闯关成功',
  5. icon: 'success',
  6. success: function () {
  7. that.init();
  8. }
  9. })
  10. }复制代码

游戏成功,弹出交互反馈窗口,并初始化重新打乱数组

 

定时器:

 


  1. timeCount:function(){
  2. var that = this;
  3. var timer = that.data.time;
  4. that.setData({
  5. t:setInterval(function(){
  6. timer++;
  7. that.setData({
  8. time:timer
  9. })
  10. },1000)
  11. })
  12. }复制代码

 

开始结束游戏:

 


  1. timeBegin:function(){
  2. clearInterval(this.data.t);
  3. this.setData({
  4. time:0
  5. })
  6. this.timeCount();
  7. this.init();
  8. },
  9. timeStop:function(){
  10. clearInterval(this.data.t);
  11. if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
  12. this.fail();
  13. }
  14. }复制代码

给开始按钮绑定timeBegin事件,初始化游戏

给结束按钮绑定timeStop事件,判断是否游戏成功

 

试玩:

源代码:github.com/lcp1551/lcp…

 

待开发:

选择难度

自传图片

赞赏

点击复制链接 与好友分享!回本站首页
上一篇:小程序生成海报保存分享图片详细教程
下一篇:微信小程序有旋转动画效果的音乐组件实例展示
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 全峰安全联盟--致力于做实用的IT技术学习网站