请选择 进入手机版 | 继续访问电脑版
精品多端仿淘宝电商系统源码,明志自主开发包售后
宝塔钜惠3188元礼券
阿里云新人福利专场
华为服务器0元大促
阿里云双12免费领取优惠券
安卓苹果APP上架
网站SEO/软文代写代发
小程序定制开发软著代办
APP定制开发软著代办
软著申请

小程序开发者论坛-汇集最优质源码、开发者教程、小程序资源

 找回密码
 注册

QQ登录

只需一步,快速开始

下载本站资源大合集、源码、教程、视频大合集
点我获取
关于【附件下载】的说明
查看: 992|回复: 12

拼图游戏小程序源码

[复制链接]

125

主题

153

帖子

38万

积分

管理员

小绵羊管管

Rank: 9Rank: 9Rank: 9

积分
389756
QQ
发表于 2018-8-12 17:26:03 | 显示全部楼层 |阅读模式

登录后查看更多内容,推荐微信扫码快速登录

您需要 登录 才可以下载或查看,没有帐号?注册

x
拼图游戏小程序源码


  1. 思路&功能:
  2. 1.初始化,将数字1~8存放在数组中,随机打乱后拼接一个9(空白格),修改空白格的样式
  3. 2.点击数字,判断空白格对于其所在位置的方向,进行相应的上下左右移动
  4. 3.上下左右移动,及把移动的两个数字互换在数组中的位置
  5. 4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9],是则游戏成功,
  6. 5.计时,利用定时器,结束,清除定时器

  7. 代码:

  8. 项目中所用到的数据:data: {   
  9.     num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'],   //初始化前   
  10.     hidden: true,   //隐藏空白格中的数字   
  11.     time:0,           //秒数   
  12.     t:''                  //定时器  
  13. },
  14. 构建页面:index.wxml
  15. <view class="container">
  16.   <view class="row" wx:for="{{num}}" wx:for-item="item" wx:for-index="index">
  17.     <button class="btn {{item == 9?'active':''}}" catchtap='onMoveTap'  data-item="{{item}}" data-index="{{index}}">{{item}}</button>
  18.   </view>
  19. </view>

  20. 需要传两个数据过去,一个是被点击块的下标index和块中的数字item动态为空白格[9]添加样式active{{item == 9?'active':''}}

  21. 游戏初始化:
  22. init:function(){
  23.     this.setData({
  24.       num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
  25.     })
  26.   },
  27.   
  28.   初始化的时候,这里用了sortArr(arr)打乱数组,并拼接个空白格[9],这样让空白格初始化的时候永远处于最后一位。


  29. 随机打乱数组:
  30.   sortArr: function (arr) {
  31.     return arr.sort(function () {
  32.       return Math.random() - 0.5
  33.     })
  34.   }
  35.   
  36.   这里用了最简单的打乱方法,缺点就是打乱不完全
  37.   
  38.   给每个块添加点击事件
  39.   
  40.   onMoveTap:onMoveTap: function (e) {
  41.     var index = e.currentTarget.dataset.index;
  42.     var item = e.currentTarget.dataset.item;
  43.     if (this.data.num[index + 3] == 9) {
  44.       this.down(e);
  45.     }   
  46.     if (this.data.num[index - 3] == 9) {
  47.       this.up(e);   
  48.     }   
  49.     if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {      
  50.       this.right(e);
  51.     }
  52.     if (this.data.num[index - 1] == 9 && index != 3 & index != 6) {
  53.       this.left(e);
  54.     }  
  55.     }
  56.     如果空白格的下标比所点击的块的下表大3,则表示空白格在所点击块的下方,那么点击后向下移动;
  57.     如果空白格的下标比所点击的块的下表小3,则表示空白格在所点击块的上方,那么点击后向上移动;
  58.     如果空白格的下标比所点击的块的下表大1,则表示空白格在所点击块的右方,那么点击后向右移动,需考虑点击快是否在容器右边缘;
  59.     如果空白格的下标比所点击的块的下表小1,则表示空白格在所点击块的左方,那么点击后向左移动,需考虑点击快是否在容器左边缘;
  60.    
  61.     移动:以向上移动举例
  62.     up: function (e) {
  63.     var index = e.currentTarget.dataset.index; //当前数字下标
  64.     var temp = this.data.num[index];
  65.     this.data.num[index] = this.data.num[index - 3]
  66.     this.data.num[index - 3] = temp;
  67.     this.setData({
  68.       num: this.data.num
  69.     })   
  70.     if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
  71.       this.success();
  72.     }
  73.   }
  74.   
  75.   移动后,将所点击块与空白格互换在数组中的位置,并判断目前的数组是否满足游戏成功的条件,判断数组相等,我这里把数组转化成字符串做的比较
  76.   
  77.   游戏成功:
  78.   success: function () {
  79.     var that = this;
  80.     wx.showToast({
  81.       title: '闯关成功',
  82.       icon: 'success',
  83.       success: function () {
  84.         that.init();
  85.       }
  86.     })
  87.   }
  88.   游戏成功,弹出交互反馈窗口,并初始化重新打乱数组
  89.   
  90.   定时器: timeCount:function(){
  91.     var that = this;
  92.     var timer = that.data.time;
  93.     that.setData({
  94.       t:setInterval(function(){
  95.         timer++;
  96.         that.setData({
  97.          time:timer
  98.        })
  99.       },1000)
  100.     })
  101.   }
  102.   
  103.   开始结束游戏:
  104.   timeBegin:function(){
  105.     clearInterval(this.data.t);
  106.     this.setData({
  107.       time:0
  108.     })
  109.     this.timeCount();
  110.     this.init();
  111.   },
  112.   timeStop:function(){
  113.     clearInterval(this.data.t);
  114.     if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
  115.       this.fail();
  116.     }
  117.   }
  118.   
  119.   给开始按钮绑定timeBegin事件,初始化游戏给结束按钮绑定timeStop事件,判断是否游戏成功

复制代码
下载地址:
游客,如果您要查看本帖隐藏内容请回复


维护论坛的小绵羊管管
回复

使用道具 举报

0

主题

8

帖子

27

积分

新手上路

Rank: 1

积分
27
发表于 2018-8-14 16:09:35 | 显示全部楼层
拼图游戏小程序源码 不错哦
回复

使用道具 举报

0

主题

14

帖子

228

积分

中级会员

Rank: 3Rank: 3

积分
228
发表于 2018-8-16 17:15:26 | 显示全部楼层
回复

使用道具 举报

0

主题

58

帖子

59

积分

注册会员

Rank: 2

积分
59
发表于 2018-10-9 13:43:34 | 显示全部楼层
回复

使用道具 举报

0

主题

20

帖子

72

积分

注册会员

Rank: 2

积分
72
发表于 2019-2-16 03:11:45 | 显示全部楼层
回复

使用道具 举报

0

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2019-2-28 13:46:38 | 显示全部楼层
回复

使用道具 举报

0

主题

10

帖子

47

积分

新手上路

Rank: 1

积分
47
发表于 2019-3-21 19:46:30 | 显示全部楼层
回复

使用道具 举报

0

主题

5

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2019-3-22 21:54:53 | 显示全部楼层
回复

使用道具 举报

0

主题

3

帖子

8

积分

新手上路

Rank: 1

积分
8
发表于 2019-5-30 11:07:12 | 显示全部楼层
回复

使用道具 举报

0

主题

1

帖子

82

积分

注册会员

Rank: 2

积分
82
发表于 2019-6-1 22:24:59 | 显示全部楼层
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies |上传

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|小程序开发者论坛-汇集最优质源码、开发者教程、小程序资源 ( 京ICP备14034797号-3 )

GMT+8, 2021-1-16 13:40 , Processed in 0.739502 second(s), 6 queries , File On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表