微信小程序-拼图游戏

时间:2019-04-09 12:00:01 来源:证券资讯 当前位置:大学英语天地 > 旧物 > 手机阅读


微信小程序:拼图游戏

作者:windlany




游戏界面

初始化游戏:


游戏成功:


思路&功能:

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

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

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

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

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


代码:

项目中所用到的数据:

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



构建页面:index.wxml

<view class="container">
  <view class="row" wx:for="{{num}}" wx:for-item="item" wx:for-index="index">
    <button class="btn {{item == 9?'active':''}}" catchtap='onMoveTap'  data-item="{{item}}" data-index="{{index}}">{{item}}</button>
  </view>
</view>复制代码


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

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


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

游戏初始化:


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


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

随机打乱数组:


sortArr: function (arr) {    return arr.sort(function () {      return Math.random() - 0.5
    })
  }复制代码


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

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


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

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

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

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

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

移动:

以向上移动举例


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


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

游戏成功:


success: function () {
    var that = this;
    wx.showToast({
      title: '闯关成功',
      icon: 'success',
      success: function () {
        that.init();
      }
    })
  }复制代码


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

定时器:


 timeCount:function(){
    var that = this;
    var timer = that.data.time;
    that.setData({
      t:setInterval(function(){
        timer++;
        that.setData({ 
         time:timer
       })
      },1000)
    })
  }复制代码


开始结束游戏:


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


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

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



阅读原文得到源码





科技新闻:


随着第五代通信技术的到来,人们对于5G的讨论愈演愈烈。国内的运营商也在加紧的布局中,根据三大运营商的规划,2019年的三月份,5G将正式进入到商用阶段。相信许多的朋友已经充满了期待。

但是,就在国内人们还在讨论的过程中。荷兰的运营商Elisa便推出了全球首个5G套餐,在资费方面,每月需要50欧元,约合人民币400元。流量用户可以任意使用,没有任何的限制。一时间受到了许多人的关注。据称,这次运营商推出的5G,网速达到了75MB/S。可以极大地满足了人们的上网和下载需求。此时,许多的网友吐槽称,还是用wifi便宜。

虽然这个套餐是荷兰运营商推出的,但是还是引起了许多人的关注。在这时大多数人关心的还是国内以后的套餐情况,会不会和荷兰的运营商一样,资费也这么贵?其实,我们从以往运营商的流量套餐资费来看,从2G到3G,从3G到4G的过渡期间。购买同样的流量,资费是不断下降的。因此,如果我们国内5G真正的到来,那么,资费也是大概率下降的。

许多的朋友可能在这时纳闷,速度提高了这么多。怎么可能资费下降呢?其实,我们从某些方面来看的话,流量资费和网速并没有太大的关系。因为网速快了,用户消耗的流量就会多了。因此,为了满足自己的日常使用,用户会订购流量资费更高的套餐。所以对于运营商来说,盈利并不会减少。





广告位:(免费关联)




转载是一种动力 分享是一种美德


你与世界

只差一个

公众号

长按识别「二维码」可快速关注


上一篇以绿色引领行业发展 台达获颁“年度影响力企业”

下一篇游戏也要讲“面子”——电竞显示器我来选

相关文章:

旧物本月排行

旧物精选