分享自己开发的网页版扫雷

[yqianjiang]

地址： https://minesweeperplay.online/

大家伙，我是一名兴趣使然的前端开发。喜欢复刻益智小游戏，扫雷是我小时候很喜欢玩的一款游戏，在做的过程中也希望在经典的基础上增加一些新的功能，很享受自己定制游戏的乐趣！欢迎大家提建议～

特色：

• 界面追求还原童年回忆
• 经典扫雷的功能（右键标雷，双击，扫雷英雄榜）
• 下方工具栏可切换单击是“挖开”还是“插旗”，方便手机插旗
• 自动标雷（可开关）

计划中的功能：

• 更丰富的数据统计（包括现在 windows 版本中记录的胜率、连胜等信息）
• 回退/撤销功能
• 无猜版本（辛辛苦苦推理半天结果遇到死猜局面真的很难受...个人还是挺希望把扫雷当作纯推理游戏玩的）

[mxgarbage]

不错。去年由于兴趣我也尝试用 react native 开发一个扫雷，但是因为性能没优化好等因素，中途放弃了。因为我自己玩扫雷算是高手吧（鼠标很废，但是 iPad 上中级最高 15 秒），我当时不仅想做得丰富，而且关键是更专业的数据统计，（参考 https://minesweeper.online 上的）。可惜没坚持下去。

[mxgarbage]

楼主有兴趣的话可以交流，我 js 水平一般，技术上可能给不了什么建议，游戏本身功能似乎已经差不多了，除了一些 UI 的细节。

[yqianjiang]

@mxgarbage #2 好呀～中级 15 秒好强！我也去看看专业的数据统计部分。性能部分我是猜测用 canvas 可能会比直接用 DOM 好一些（不过 rn 是部署到移动端的话我就不太清楚有没有 canvas 了...）。有哪些 UI 细节建议呀？

[mxgarbage]

@yqianjiang 最明显的是鼠标点击格子的动作：其他版本鼠标点击一个格子且保持点击时，格子会明显从凸起来变成平的，而鼠标松开后才会打开格子。而你的好像是直接 onClick 瞬间就打开了。

[coolfan]

无猜版本😍😍😍

[thetbw]

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.
at renderDigit (digit.js:22:13)
at update (main.js:75:9)
at HTMLCanvasElement.handleDoubleClick (main.js:151:13)

[myqoo]

当年第一个小游戏就是网页版的扫雷，不过是 vbscript 开发的~

[peoren]

优化小建议：点击事件有点奇怪，可能换成 mousedown 做点击按下动画，mouseup 做你原来的 click 事件会更好点。

[yqianjiang]

@mxgarbage #4
@peoren #8
好的，我改一下，谢谢建议～

[royalknight]

有开源嘛 ，想引入到项目里

[https://myim.online/]( https://myim.online/)

[yqianjiang]

@thetbw #6 谢谢提醒，今早改的一个代码有 bug ，修复啦～

[yqianjiang]

@royalknight #10 有开源，请问是怎么引入的呀？

[chenzw2]

我也做过一个，可以支持定制大小和难度

https://wiki.bqrdh.com/mine-sweeper

[yqianjiang]

这段时间陆续更新了一些内容～包括：
1. 鼠标点击格子的动作
2. 自定义难度
3. 更多地参考了 Windows XP 的界面
4. 扫雷数据统计（胜率、连胜等信息）

[yqianjiang]

@yqianjiang #14
5. 标记功能（可以选择几种不同的颜色来标记）