舒爾特方格小程序

博客班級	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;
}