舒尔特方格小程序

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1. 编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2. 熟悉git代码管理流程，将源代码上传到到github 3. 在博客园班级中写一篇相应的博文
作业源代码	https://github.com/cXilicon/HW-Miniporgram-Schulte-Gird
学号	31801136 徐晨翔
院系	浙江大学城市学院计算分院

前言

受老师上课内容的启发，决定从零开始实现一个舒尔特方格小程序

开发工具：微信开发者工具

界面展示

文件结构

代码详解

WXML

<!--index.wxml-->
<view class="page">
  <!-- 舒尔特简介 -->
  <view class="page_hd">
    <view class="page_title">舒尔特方格</view>
    <view class="page_desc">
      舒尔特方格要求依次在打乱数字中按顺序找出数字，是全世界范围内最简单，最有效也是最科学的注意力训练方法。
    </view>
  </view>
  <!-- 主体部分 -->
  <view class="game">
    <!-- 排行榜按钮 -->
    <view class="leaderboardButton" bindtap="openLeaderboard">
      排行榜
    </view>
    <!-- 游戏控制: 计时 难度选择 重置按钮 -->
    <view class="flex_row gameControl">
      <view class="timer">{{timecount}}</view>
      <picker bindchange="changeDiff" class="difficulty" value="{{difficulty-3}}" range="{{difficulty_list}}">
        {{difficulty}} × {{difficulty}}
      </picker>
      <view class="reset" bindtap="initGame">重置</view>
    </view>
    <!-- 游戏主体 -->
    <view class="row" wx:for="{{array}}" wx:for-item="row" wx:key="*this">
      <view class="cell {{num>=flag+1?'':'cell_clicked'}}" wx:for="{{row}}" wx:for-item="num" wx:key="*this"
        bindtap="tapNum" data-num="{{num}}">
        <view>{{num}}</view>
      </view>
    </view>
  </view>
  <!-- 排行榜 -->
  <view class="mask" wx:if="{{leaderboardDisplay}}">
    <view class="leaderboardContainer">
      <view class="leaderboardBanner">
        <view class="closeLeaderboard"></view>
        <view class="leaderboardTitle">排行榜</view>
        <view class="closeLeaderboard" bindtap="closeLeaderboard">✖</view>
      </view>
      <scroll-view class="leaderboardContent" scroll-y="true">
        <view wx:for="{{leaderboardData[difficulty-3]}}" wx:for-item="data" wx:key="*this" class="leaderboardItem">
          {{data}}
        </view>
      </scroll-view>
    </view>
  </view>
</view>

JS 内容

数据

difficulty: 3, //难度
difficulty_list: [], // 难度选择子项
array: [0, 1, 2, 3, 4], // 用于生成方块的数组
flag: 0, // 标记已选方块
timecount: "0:00", // 计时器文字
second: 0, // 计时器 - 秒
millisecond: 0, // 计时器 - 毫秒
leaderboardDisplay: false, // 排行榜状态
leaderboardData: [], // 排行榜数据

游戏控制

随机打乱方块数组，点击第一个方块后开始计时，再利用变量 flag 标记已触发的舒尔特方格，与 WXML 中的 {{num>=flag+1?'':'cell_clicked'}} 配合渲染图像，点击最后一个方块停止计时器

initGame: function () { // 游戏初始化
  clearInterval(init);
  var num = [];
  var list = [];
  for (var i = 0; i < this.data.difficulty * this.data.difficulty; i++) { // 根据难度初始化方块生成数组
    num.push(i + 1);
  }
  for (var i = 0; i < this.data.difficulty; i++) { // 随机打乱方块数组
    var tmp = [];
    for (var j = 0; j < this.data.difficulty; j++) {
      var idx = Math.floor(Math.random() * (this.data.difficulty * this.data.difficulty - this.data.difficulty * i - j));
      tmp.push(num[idx]);
      num.splice(idx, 1);
    }
    list.push(tmp);
  }
  this.setData({ // 更新数据
    timecount: "0:00",
    array: list,
    flag: 0,
  })
},

tapNum: function (e) { // 方块点击事件
  var num = e.currentTarget.dataset.num - 1;
  if (this.data.flag == num) { // 确认该方块可以被点击
    if (num == 0) { // 点击第一个方块开始游戏
      this.setData({
        millisecond: 0,
        second: 0,
      });
      clearInterval(init);
      init = setInterval(this.timer, 10);
    }
    if (num == this.data.difficulty * this.data.difficulty - 1) { // 点击最后一个方块停止游戏并记录时间
      clearInterval(init);
      this.storageData(this.data.timecount, this.data.difficulty - 3);
    }
    this.setData({
      flag: this.data.flag + 1,
    })
  }
},

timer: function () { // 计时器
  this.setData({
    millisecond: this.data.millisecond + 1
  })
  if (this.data.millisecond >= 100) {
    this.setData({
      millisecond: 0,
      second: this.data.second + 1
    })
  }
  this.setData({
    timecount: this.data.second + ":" + (this.data.millisecond < 10 ? "0" + this.data.millisecond : this.data.millisecond),
  })
},

排行榜控制

通过 leaderboardDisplay 和 wx:if 控制排行榜的打开与关闭

closeLeaderboard: function() { // 关闭排行榜
    this.setData({
        leaderboardDisplay: false,
    })
},

openLeaderboard: function() { //打开排行榜
    this.setData({
        leaderboardDisplay: true
    })
    this.loadData();
},

数据存储

利用 wx.getStorageSync 和 wx.setStorageSync 将每次游戏的时间按照难度区分存储在本地

storageData: function(times, level) { // 根据难度存储数据 (排行榜取前 10 名)
    var storagedData = this.loadData();
    storagedData[level].push(times);
    storagedData[level] = storagedData[level].sort(function(a, b) {
        var ma = parseInt(a.split(":")[0]) * 100 + parseInt(a.split(":")[1]);
        var mb = parseInt(b.split(":")[0]) * 100 + parseInt(b.split(":")[1]);
        return ma - mb;
    }).slice(0, 9);
    try {
        wx.setStorageSync('leaderboard', storagedData)
    } catch (e) {}
},

loadData: function() { // 加载排行榜数据
    var ret = [];
    try {
        var value = wx.getStorageSync('leaderboard');
        if (value.length != 0) {
            ret = value;
        } else {
            for (var i = 0; i < 7; i++) ret.push(Array(0));
        }
    } catch (e) {}
    this.setData({
        leaderboardData: ret,
    });
    return ret;
}