微信小游戏之别踩白块

相信很多人都玩过这种小游戏，就是遇到黑色键就需要点，遇到白色键就绝对不能点。如果没有点到黑块或者点中了白块，都算输。

 onReady: function(){
      var array = [];
      // 先生成一个10个长度的数组
      for(var i = 0; i < 10; i++){
          // 生成一个随机位数为1的数组
          var orderArray = [0,0,0,0];
          var randomNum = Math.floor(Math.random() * 4);
          orderArray[randomNum] = 1;
          array.push({id: i, block: orderArray});
      }
      this.setData({
          blockData: array.reverse()
      });
  },

我们可以看见游戏里面一共四条道。我们的初始化是先确定前10个按键，随机出1~4的数字，随机出来便是哪一条道是黑色按键。

  run: function(){
      // 滑动方法
      var that = this;
      var speed = 10;

      this.setData({
          canRun: true
      });

      var timer = setInterval(function(){
          // 当前滑动距离
          if(!that.data.canRun){
              clearInterval(timer);
              return;
          }
          
          var currentScrollHeight = that.data.scrollHeight;
          // 当前分数
          var score = that.data.score;
          // 滑块数据
          var blockData = that.data.blockData.concat().reverse();

          if(Math.abs(currentScrollHeight) == 150){
              // 滑到临界点
              // 判断是否过期
              // 判断条件是 第一个滑块的状态是否为已点击
              if(that.checkFirstLineBlockClicked(blockData[0].block)){
                  // 继续 去除旧节点 插入新节点 scrolllHeight归0
                  var newId = blockData[blockData.length - 1].id + 1;
                  blockData.push(that.getNewLine(newId));
                  blockData.shift();
                  that.setData({
                      scrollHeight: 0,
                      blockData: blockData.concat().reverse()
                  });
                  return;
              }
              // 报错
              that.handleWrong("请点击白块！游戏结束", score);
              return;
          }

          currentScrollHeight = currentScrollHeight - speed;
          that.setData({
              scrollHeight: currentScrollHeight
          });
      }, 20);
  },

上面这一段逻辑是游戏的核心所在，就是让黑白键向下滑动。如果是黑键超过了临界值，这时候需要判断一下是否已经被点击过了。如果被点击过那就会有标记起来，这里只需要判断是否已经被标记就行。如果没有标记点过的，那就可以直接判输。

complete: function(){
                // 将此分数存入全局变量
                app.globalData.currentScore = score;
                // 若此分数比最高分数还高 将其存入本地
                if(score > app.globalData.endlessScore){
                    app.globalData.endlessScore = score;
                    wx.setStorageSync('endlessScore',score);
                }
                var timer = setTimeout(function(){
                        wx.redirectTo({
                            url: '../end/end?type=endless&score=' + score
                        })
                        clearTimeout(timer);
                    }, 2000);
            }

这里表示已经完成了游戏，然后将最高分保存到游戏中。用的是wx.setStorageSync('endlessScore',score);可以永久保存。

整体来说设计不算太难，有想要深入探讨学习的，可以关注公众号：诗一样的代码，找我一起学。