Black-White-Blocks

微信小程序黑白块游戏

代码如下：

//play.js
// play 
var app = getApp()
Page({
  data: {
    typeName: '计时模式',
    score: 0,
    time: 60,
    shouldStop: false,
    blockData:[]
  },
  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()
      });
  },
  handleClick: function(events){
      var id = events.currentTarget.id;
      var line = id.split("-")[1];
      var column = id.split("-")[2];
      var isBlack = id.split("-")[3];
      var blockData = this.data.blockData.reverse();
      var score = this.data.score;
      var orderArray = [0,0,0,0];
      // 判断是否是第一行
      if(line != blockData[0].id){
        this.handleWrong(0, score);
        return;
      }
      // 判断是否正确
      if(isBlack != 1){
        this.handleWrong(1, score);
        return;
      }

      // 正确下一个
      // 分数++
      // 最后一个小块的id为分数+10
      score++;
      orderArray[Math.floor(Math.random() * 4)] = 1;
      blockData.push({id: score+10, block: orderArray});
      blockData.shift();
      this.setData({
          silding: true,
          score: score,
          blockData: blockData.reverse()
      });
  },
  handleWrong: function( type , score){
      const titleArr = ["请点击第一个白块！游戏结束", "别点白块！游戏结束", "时间到"];
      var _this = this;
      wx.showToast({
            title: titleArr[type],
            icon: 'cancel', 
            duration: 2000,
            complete: function(){
                // 将此分数存入全局变量
                app.globalData.currentScore = score;
                // 停止计数器
                _this.setData({
                  shouldStop: true
                });
                // 若此分数比最高分数还高 将其存入本地
                if(score > app.globalData.timeScore){
                    app.globalData.timeScore = score;
                    wx.setStorageSync('timeScore',score);
                }
                var timer = setTimeout(function(){
                        wx.redirectTo({
                            url: '../end/end?type=time&score=' + score
                        })
                        clearTimeout(timer);
                    }, 2000);
            }
        })
  },
  timeInterval: function(){
    var that = this;
    var timer = setInterval(function(){
        // 判断是否小于0
        var nowTime = that.data.time;
        
        if(that.data.shouldStop){
          clearInterval(timer);
        }

        if(nowTime > 1){
          that.setData({
            time: nowTime-1
          });
          return;
        }

        that.setData({
          time: nowTime-1
        });
        that.handleWrong(2, that.data.score);
        clearInterval(timer);
      }, 1000);
  },
  onLoad: function(){
      var that = this;
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
      this.timeInterval();
  }
})

急速模式

//play.js
// // play 
var app = getApp()
Page({
  data: {
    typeName: '急速模式',
    score: 0,
    blockData:[],
    scrollHeight: 0,
    canRun: false
  },
  onLoad: function(){
      var that = this;
      // 设置title
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
  },
  onReady: function(){
      var array = [];
      // 先生成一个10个长度的数组
      for(var i = 0; i < 10; i++){
        array.push(this.getNewLine(i));
      }
      this.setData({
          blockData: array.reverse()
      });
  },
  handleClickWhite: function(events){
      // 点击白块一定会报错 差别在于报错文案
      // 判断是否是点击的第一行
      // 被点击的id
      var id = events.currentTarget.id;
      // 被点击的行
      var line = id.split("-")[1];
      // 数据
      var blockData = this.data.blockData.concat().reverse();
      // 当前分数
      var score = this.data.score;

      // 判断是否是第一行
      if(line != this.getClickableBlockLine(blockData)){
        this.handleWrong("请点击第一个黑块！游戏结束", score);
      } else {
        // 点击的第一行白块  
        this.handleWrong("别点白块！游戏结束", score);
      }
  },
  handleClickBlack: function(events){
      // 黑块是应该点击的块
      // 判断是否是点击的第一行
      // 被点击的id
      var id = events.currentTarget.id;
      // 被点击的行
      var line = id.split("-")[1];
      // 数据
      var blockData = this.data.blockData.concat().reverse();
      // 当前分数
      var score = this.data.score;
      // 可点击的第一行
      var clickableLine = this.getClickableBlockLine(blockData);

      // 判断是否是第一行
      if(line == clickableLine){
        // 点击了第一行黑块 
        // 判断是否是是第一次
        if(score == 0){
            // 启动滑动程序
            this.run();
        }
        score++;

        // 将黑块变灰块
        this.getBlockBlackToGray(line, blockData);
        // 分数++
        this.setData({
            score: score,
            blockData: blockData.concat().reverse()
        });

      } else {
        // 点击的不是第一行白块  
        this.handleWrong("请点击第一个黑块！游戏结束", score);
      }
  },
  handleClickGray: function(events){
      // 灰块是指黑块点击之后的块 
      // 其在显示是白块 并且同样不可点
      var score = this.data.score;
      this.handleWrong("别点白块！游戏结束", score);
  },
  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);
  },
  checkFirstLineBlockClicked: function(blockDataLine){

      for(var i = 0; i < blockDataLine.length; i++){
          if(blockDataLine[i] == 2){
              return true;
          }
      }

      return false;
  },
  getBlockBlackToGray: function(line, blockData){
      for(var i = 0; i < blockData.length; i++){
          if(blockData[i].id == line){
              var currentArray = blockData[i].block;
              for(var j = 0; j < currentArray.length; j++){
                  if(currentArray[j] == 1){
                      currentArray[j] = 2;
                      return;
                  }
              }
          }
      }
  },
  getClickableBlockLine: function(blockData){
      var line = 0;
      for(var i = 0; i < blockData.length; i++){
          var block = blockData[i].block;
          for(var j = 0; j < block.length; j++){
            // 行内四个元素 有1即可
            if(block[j] == 1){
                return blockData[i].id;
            }
          }
      }
      return line;
  },
  getNewLine: function(i){
      // 生成一个标准的数据
      var orderArray = [0,0,0,0];
      // 生成一个随机数
      var randomNum = Math.floor(Math.random() * 4);
      // 赋值给对应的obj
      orderArray[randomNum] = 1;
      return {id: i, block: orderArray};
  },
  handleWrong: function(text, score){

      this.setData({
          canRun: false
      });

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

无尽模式

//play.js
// play 
var app = getApp()
Page({
  data: {
    typeName: '无尽模式',
    silding: false,
    score: 0,
    blockData:[]
  },
  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()
      });
  },
  handleClick: function(events){
      var id = events.currentTarget.id;
      var line = id.split("-")[1];
      var column = id.split("-")[2];
      var isBlack = id.split("-")[3];
      var blockData = this.data.blockData.reverse();
      var score = this.data.score;
      var orderArray = [0,0,0,0];
      // 判断是否是第一行
      if(line != blockData[0].id){
        this.handleWrong(0, score);
        return;
      }
      // 判断是否正确
      if(isBlack != 1){
        this.handleWrong(1, score);
        return;
      }

      // 正确下一个
      // 分数++
      // 最后一个小块的id为分数+10
      score++;
      orderArray[Math.floor(Math.random() * 4)] = 1;
      blockData.push({id: score+10, block: orderArray});
      blockData.shift();
      this.setData({
          silding: true,
          score: score,
          blockData: blockData.reverse()
      });
  },
  handleWrong: function( type , score){
      const titleArr = ["请点击第一个白块！游戏结束", "别点白块！游戏结束"];
      wx.showToast({
            title: titleArr[type],
            icon: 'cancel', 
            duration: 2000,
            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);
            }
        })
  },
  onLoad: function(){
      var that = this;
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
  }
})

//结束
var app = getApp()
Page({
  data: {
    currentScore: 0,
    gameType: "",
    heighestScore: 0,
    backUrl: ""
  },
  onLoad: function(options){
    var score = options.score;
    var gameType = options.type;
    var text = {endless: "无尽模式", time: "计时模式", speed: "极速模式"};
    // 从全局变量中获取分数
    this.setData({
      currentScore: app.globalData.currentScore,
      gameType: text[gameType],
      heighestScore: app.globalData[gameType + "Score"],
      backUrl: '../'+gameType+'/play'
    });
  }
})

本文感谢无私开源的程序员点击获取项目