一开始是写算法的时候写了扫雷的逻辑,发现内容并不复杂,就想写一个单个html页面就能解决的小游戏,使用了Vue2+Vant2,所有功能在一个页面里解决,通过v-if进行Dom节点的渲染。
-
计时器(已完成) 使用setInterval定时器对游戏进行以毫秒为单位的计时。
-
重新开始(已完成): 点击重新开始按钮后重置时间,还原棋盘状态并重新开始计时(将开始和重新开始合并为同个方法)。
-
插旗(已完成): 为了适配移动端,设定为点击插旗按钮后开启插旗功能,插旗状态下点击格子,判断是否已翻开,如果是已翻开的格子则return,如果未翻开则更新该格子状态,已插旗的格子不能翻开。
-
生成不同难度的棋盘(已完成) 分为三种难度,10雷9x9,40雷16x16,99雷16x30,并根据选择的难度配置生成对应的二维数组配置生成棋盘。
-
游戏结束(已完成) 当点击到地雷或翻开所有非地雷的格子时结束游戏,并停止计时。
-
击败统计(已完成) 根据不同的难度和挑战成功的时长判断配置中设置的时间对应百分比去显示击败百分比。
-
根据旗帜判断剩余炸弹数(已完成) 加入剩余炸弹数,并根据旗帜数更新炸弹数。
-
缓存记录最高纪录(已完成) 获取本地缓存的最高纪录,判断挑战成功的时间是否小于最高纪录,如果是或没有该缓存内容则设置本次挑战时间最最高纪录,并显示。
-
重选难度(已完成) 清空定时器并回到选择难度页面。
-
定制雷/棋图(已完成) 加入定制按钮,使用vant的uploader组件进行上传获取到图片的base64格式存入本地缓存并更新图片url,如果没有该缓存则为默认图标。
-
修改数字图片(已完成) 根据数字设置对应的svg文件。
-
图片压缩功能(已完成) 上传图片后根据图片大小进行压缩操作,如果图片大小大于2M则使用canvas绘制一个100*100的图像替换。
-
重新开始/选择难度确认按钮(已完成) 在游戏未结束时点击重新开始/选择难度时增加一个确认对话框避免误点(血的教训)TAT