软工导论第一次作业——初试微信小程序

头部信息

博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标 1. 编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2. 熟悉git代码管理流程，将源代码上传到到github 3. 在博客园班级中写一篇相应的博文
作业源代码 https://gitee.com/SevDaisy/shult_grid
学号 31801146
院系 浙大城市学院计算机系
班级姓名 计算机1803 章一砚

Taps

  • 关闭 sitemap 的 调试器Warning
    • 在 project.config.json 中设置
"setting": {"checkSiteMap": false}

作业需求分析

  • 写个微信小程序及配套博文

开始

  • 想来想去，自己最想做又确实好做的东西就是，舒尔特方格
  • 在gitee找了个舒尔特方格的原始项目：https://gitee.com/mygia/shult_grid
  • 项目fork然后clone下来之后，看了一遍源码，啊这，实在是看不下去啊
  • 实在是项目都没看完就忍不住上手改了。

修改项目

  • 耗时显示 HH:MM:SS 更改为 MM::SS
    • 默认游戏超时终止时间，从6小时调整为1小时
  • 首页点击进入测试按钮再开始游戏 更改为 首页就是游戏界面
  • 游戏难度扩充，可以动态设置当前难度
  • 只有 5*5 难度 更改为 支持 3阶～9阶 的不同难度
  • 棋盘数组用二维数组 更改为 一维数组
  • 不同的难度匹配各自的历史最快记录
  • UI美观优化
  • 重构代码结构
    • 除了 打乱数组，游戏结算弹窗 沿用了原始代码
    • 其余部分全部重写

项目资料网址：

原始项目

old演示image-20201019112002647

我的项目

new演示

项目总结

  • CSS设计对我来说是最难的部分。
  • 业务逻辑部分，额，这不挺简单的嘛。。没啥特别要说（除了数据绑定）的。
  • 数据绑定部分：涉及到视图层更新的数据变更必须使用 Page::setData({...} 来更新
  • 为了养成一个良好的效果，不如所有的Page全局数据的更新都用Page::setData({...} 来做

设计思路 & 大体步骤

  • 应该有一个数组，里面是 【1 ~ N * N】的整数序列
    • N，就是游戏的难度阶级
    • 使用 JS for 循环 来生成初始数组
  • 游戏开始，则数组应该被打乱
    • 如何打乱一个JS一维数组，百度一搜就有，我用的是下面的代码
    • function randoms(r){for(var n,a,o=r.length,t=o,e=*new* Array,d=0;d<t;d++)n=Math.random()*o|0,e[d]=r[n],a=r[n],r[n]=r[o-1],r[o-1]=a,o--;return e}
  • 被打乱的数组，用 wx:for 列表渲染 至页面
    • 列表渲染出来是一长条，怎么把一长条变成一个方形棋盘呢？
    • 我选择，使用 flex 弹性盒子布局
    • 设置CSS样式类，.chess_map作为棋盘，.chess_box 作为棋子，.chess_num 是棋子里面的数字和背景
    • .chess_map：设置弹性盒子display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: space-between;
    • WXML 中 .chess_map 的 view 标签增加STYLE属性：设定自己大小：
      • style="width:calc({{windowWidth}}px - 60rpx + {{(nowDifficulty-1)*2}}rpx);height:calc({{windowWidth}}px - 60rpx + {{(nowDifficulty-1)*2}}rpx);"
    • WXML 中 .chess_box 的 view 标签增加STYLE属性：设定自己大小：
      • style="width:calc(({{windowWidth}}px - 60rpx) / {{nowDifficulty}});height:calc(({{windowWidth}}px - 60rpx) / {{nowDifficulty}})"
    • 特殊的：其实我觉得上面代码中的{{windowsWidth}}px 可以用 750rpx 来代替，这正是官网文档中对rpx这一相对单位的解释
  • 棋盘被渲染后，接受了用户的点击
    • 肯定是绑定函数实现，没毛病。bindtap="$Func_Name"
    • 怎么判定点对没有？
      • 怎么知道被点的是哪个
        • wx:for="{{mimeMap}}" wx:key="item" 条件渲染数字数组mimeMap，设置遍历子元素的标识符为 item
        • data-value="{{item}}" 子元素设置 dataset.value 这一属性，并且，值为 item
        • 点击触发函数中，使用 event.target.dataset.value 即可取得当前被点棋子的数字值
      • 点对没有？
        • 设置Page级数据 succ_steps，就是已经点过的棋子计数。
        • 下一个应该点的棋子的数字应该是 succ_steps + 1
      • 点对了的话，怎么让棋子变亮？
        • 使用三元表达式来设置棋子标签的class属性
        • class="chess_box {{succ_steps==item ?'gold':''}}"
  • 游戏计时如何进行
    • 把 数组打乱 和 计时开始 绑定在函数 startGame——乱序数组已经渲染在屏幕上了，游戏应该立即开始
    • 把 检查当前棋子 和 计时结束 绑定在函数 digGold——当前棋子已经是第N*N个了，游戏应该立即结束
  • 游戏结束以后。。。
    • 计算出本次用时，并弹出弹窗提醒用户
    • 用户点击确认，则，历史最快用时 = min(历史最快用时, 本次用时)
    • 数组重置，不打乱
    • 设置当前游戏状态 Page.data.staus = 0
    • 当前游戏状态 【0：游戏未开始，1：游戏开始、正在计时】
  • 如何方便用户选择难度？
    • 使用 微信小程序API wx.showActionSheet({...})
    • 尴尬的是，它要求，itemlist 不能多于6项
    • 于是，我在难度选择里只设置了 4×4 ~ 9×9
    • 也就是说，游戏初始化的时候是 3×3
    • 选择其他难度以后，就回不去3×3了🤣

数据接口：

以下数据都位于 grid.js | Page.data

  • 难度等级：int nowDifficulty; /* 3~9，init=3*/
  • 历史最快记录：maxScore = [9999,.....] /* 各个难度的完成时长换算成秒数，初始数字为9999 */
  • mimeMap: ["这是存储数字方格的一维数组"]
  • status: 0, /*0 游戏未开始或已经结束； 1 游戏运行中、正在计时 */
  • succ_steps: 0, /* 已经成功点击的棋子数 */
  • seconds: 0,/* 游戏开始至今的秒数 */
  • time_add_er: null，/* 每秒更新页面显示当前耗时的计时器ID */

有趣的细节

  • 一开始的时候，我没设置time_add_er来保存计时器ID
  • 于是，当用户反复点击 “重开一把” 的时候，会不停地生成新的计时器。而旧的计时器也在起效🤣
  • 设置了time_add_er来保存计时器ID之后，每次设置新计时器的时候，我都要先检查time_add_er是不是null
  • 如果不是null，就需要先执行一次 clearTimeout(that.data.time_add_er);

About ME

本篇博文也同步于我的个人博客（基于HEXO）

个人博客 www.zdiml.xyz

Git 历次提交信息

CommitID info MSG
1091c12 HEAD@{0}: rebase (finish): returning to refs/heads/dev
1091c12 HEAD@{1}: rebase (start): checkout zyy
1d9b9cc HEAD@{2}: checkout: moving from zyy to dev
1091c12 HEAD@{3}: checkout: moving from dev to zyy
1d9b9cc HEAD@{4}: checkout: moving from zyy to dev
1091c12 HEAD@{5}: checkout: moving from d8291f6cbb4f747ebb7105b8aaff93367b1ed225 to zyy
d8291f6 HEAD@{6}: rebase (pick): 通过sm.ms图床，background-size: 100% 100%; 实现更换棋子图片和大小自适应
a87814b HEAD@{7}: rebase (pick): 设置margin使棋盘居中
1d9b9cc HEAD@{8}: rebase (start): checkout dev
1091c12 HEAD@{9}: checkout: moving from dev to zyy
1d9b9cc HEAD@{10}: commit (cherry-pick): 发布前调试
21f9ec4 HEAD@{11}: checkout: moving from zyy to dev
1091c12 HEAD@{12}: commit: 发布前调试
6987f92 HEAD@{13}: commit: 再次微调CSS
933f6fc HEAD@{14}: commit: 通过sm.ms图床，background-size: 100% 100%; 实现更换棋子图片和大小自适应
888b150 HEAD@{15}: commit: 设置margin使棋盘居中
21f9ec4 HEAD@{16}: rebase (finish): returning to refs/heads/zyy
21f9ec4 HEAD@{17}: rebase (start): checkout dev
94ff9dd HEAD@{18}: reset: moving to 94ff9dd
94ff9dd HEAD@{19}: reset: moving to 94ff9dd
284e5a1 HEAD@{20}: commit (cherry-pick): 多难度有各自的历史最快记录
94ff9dd HEAD@{21}: checkout: moving from dev to zyy
21f9ec4 HEAD@{22}: commit: 多难度有各自的历史最快记录
08897d7 HEAD@{23}: commit: 一轮游戏结束后，或选择难度后，游戏自动初始化。等待点击“开始游戏”，主动更新当前耗时为00:00
664fcc2 HEAD@{24}: reset: moving to HEAD^
bbf2b1a HEAD@{25}: commit: 一轮游戏结束后，或选择难度后，游戏自动初始化。等待点击“开始游戏”，主动更新当前耗时为00:00
664fcc2 HEAD@{26}: commit: 更改了 data-value 的绑定元素，修复了点击dataset为空的bug
328d041 HEAD@{27}: commit: 样式调整 第一版 OK。开始修复游戏不能正常进行的问题
94ff9dd HEAD@{28}: checkout: moving from zyy to dev
94ff9dd HEAD@{29}: rebase (finish): returning to refs/heads/zyy
94ff9dd HEAD@{30}: rebase (start): checkout dev
5384554 HEAD@{31}: reset: moving to 5384554c42acf27e28482bd9dfc7b99e597b6738
5950125 HEAD@{32}: commit (cherry-pick): 用base64背景图片添加了棋子边框，用310rpx/diff设定了数字字号大小
5384554 HEAD@{33}: reset: moving to 5384554c42acf27e28482bd9dfc7b99e597b6738
fcdd315 HEAD@{34}: checkout: moving from dev to zyy
94ff9dd HEAD@{35}: checkout: moving from zyy to dev
fcdd315 HEAD@{36}: commit (cherry-pick): 用base64背景图片添加了棋子边框，用310rpx/diff设定了数字字号大小
79c8750 HEAD@{37}: checkout: moving from dev to zyy
94ff9dd HEAD@{38}: commit: 用base64背景图片添加了棋子边框，用310rpx/diff设定了数字字号大小
aac6e98 HEAD@{39}: commit: 好像很整齐的 44 ～ 66
e41c600 HEAD@{40}: commit: 点按瞬间是亮黄，中间色是 99ffcc
6f290b7 HEAD@{41}: reset: moving to 6f290b7cca60040fc91d6b28ecb13b8c7a522bc4
d7c70bd HEAD@{42}: revert: Revert "点按成功的 :hover 实现黄色会自动消失，但是有闪烁现在，且复按会变黄"
6f290b7 HEAD@{43}: commit: 点按成功的 :hover 实现黄色会自动消失，但是有闪烁现在，且复按会变黄
f797f23 HEAD@{44}: commit: 正确的点击现在会使方块变黄，但是黄色不会自动消失
ef1f6f4 HEAD@{45}: cherry-pick: 成功开始并完成一把4✗4，被按下时样式不会改变
cfaf4ef HEAD@{46}: reset: moving to cfaf4ef3b17fe0af5a781abdcf03b58091c9dc63
e8f6d84 HEAD@{47}: commit: 成功开始并完成一把4✗4，被按下时样式不会改变
cfaf4ef HEAD@{48}: commit: 成功添加难度选择 4 ~ 9
8573662 HEAD@{49}: commit: 首页添加按钮 开始游戏/重开一盘，正在开发“选择难度”
21f7964 HEAD@{50}: commit: 设置 Page:index OnReady 跳转至 grid ，并且，app.json首页设为grid
8d8a1bd HEAD@{51}: commit: 修改项目名称，取消启动日志的存储
7ecfad8 HEAD@{52}: checkout: moving from zyy to dev
79c8750 HEAD@{53}: cherry-pick: 一维数组支持到9*9棋盘都不会变形（配色还是很丑）
5384554 HEAD@{54}: checkout: moving from master to zyy
17cc294 HEAD@{55}: checkout: moving from dev to master
7ecfad8 HEAD@{56}: commit: 一维数组支持到9*9棋盘都不会变形（配色还是很丑）
5204fcc HEAD@{57}: commit: Page:logs 中成功一维数组转棋盘视图
98233a1 HEAD@{58}: commit: dev
1ef95c3 HEAD@{59}: commit (amend): 准备练习 在页面中打印方格数组
89c0711 HEAD@{60}: commit: 准备联系 在页面中打印方格数组
5384554 HEAD@{61}: checkout: moving from zyy to dev
5384554 HEAD@{62}: merge dev: Fast-forward
17cc294 HEAD@{63}: checkout: moving from zyy to zyy
17cc294 HEAD@{64}: checkout: moving from dev to zyy
5384554 HEAD@{65}: commit: 添加方块图片
a49a964 HEAD@{66}: reset: moving to a49a964
e0ccd44 HEAD@{67}: reset: moving to e0ccd44
a49a964 HEAD@{68}: reset: moving to a49a96401fee4af4558090867f8d781a84e56c10
e0ccd44 HEAD@{69}: commit: rebuild
35798c1 HEAD@{70}: reset: moving to 35798c1
6edf54d HEAD@{71}: reset: moving to 6edf54d4a936c8b74ab12729ab37b8ae271400c3
35798c1 HEAD@{72}: commit: dev
a49a964 HEAD@{73}: commit (amend): 重构代码为支持多种难度，但是视图有缺点
935c461 HEAD@{74}: commit: 重构代码为支持多种难度
6edf54d HEAD@{75}: commit: 微调 当前耗时 的显示，取消了 hours 段
17cc294 HEAD@{76}: checkout: moving from master to dev
17cc294 HEAD@{77}: checkout: moving from zyy to master
17cc294 HEAD@{78}: checkout: moving from master to zyy
17cc294 HEAD@{79}: commit: dev
b111da5 HEAD@{80}: commit: dev
b87b888 HEAD@{81}: clone: from https://gitee.com/SevDaisy/shult_grid.git
posted @ 2020-10-19 21:22  章一砚  阅读(321)  评论(3)  编辑  收藏  举报