Repository files navigation

一款跨平台跨终端的扫雷游戏

这款扫雷游戏是我对Phaser,Electron,PWA等相关技术的一次实践与总结。此项目具有如下特点：

• 跨平台 - 以Web前端技术（HTML5 + CSS + JavaScript）为核心，能运行在任何操作系统之上。

• 响应式 - 游戏使用了响应式的布局模式 + 矢量图形资源 + 动态生成图形资源（Canvas）+DPI自适应的方式实现了游戏分辨率的自适应，理论上能在任何容器尺寸（屏幕尺寸），分辨率，DPI上完美呈现。

• 可缩放 - 游戏在响应式的基础之上同时还支持DPI自适应模式的用户缩放功能（使用鼠标滚轮或双指捏合缩放），进一步优化了在小尺寸屏幕设备上的操作体验。

• 跨终端 - 游戏同时支持鼠标，触摸手势，手写笔多种交互模式，所以理论上能在任何桌面端，移动端，智能电视等设备上运行。

• 多客户端 - 由于游戏具有上面列出的几种特性，所以游戏除了可以运行在浏览器端以外，还可以通过各种Web客户端技术（其实大多数还是基于浏览器）来创建多种客户端，例如，用Electron或NW.js创建桌面版客户端，用Cordova或React Native创建移动版客户端。此项目目前使用了Electron技术来生成桌面版客户端。

• 自动更新 - 浏览器端的自动更新自不必说，这是B/S架构的天然优势，与此同时Electron桌面版客户端也实现了自动更新的功能。

• 离线运行 - 桌面版客户端的离线运行能力自不必说，与此同时还使用了PWA技术使游戏也能在浏览器环境下离线运行，当然，这是一项比较新的技术，目前为止只有部分较新版本的浏览器支持。

• Phaser(Game Engine)
• Canvas
• Electron
• Node.js
• ES6 + ES7
• Webpack
• PWA(Progressive Web Apps)

• Internet Explorer >=9
• Edge >=12
• Chrome >=4
• Firefox >=4
• Safari >=4
• Opera >=10.1
• iOS Safari >=3.2
• Android Browser >=3
• Internet Explorer Mobile >=10

网页版线上地址（推荐使用最新版的Chrome浏览器访问）

网页版备用地址（部署在Github Pages上，国内用户访问速度可能会比较缓慢）

Windows桌面版客户端安装包下载地址

Windows桌面版客户端免安装版下载地址（压缩包，无需安装，解压缩后运行minesweeper.exe即可）

备用下载地址（Github Releases下载地址，国内用户会可能无法下载）

• 优化游戏面板缩放功能
• 增加游戏操作教学UI
• 增加游戏设置面板
• 发布移动版客户端
• 支持游戏尺寸动态响应式（Resizing Responsive）

• 部分旧版浏览器上存在游戏图形资源被部分裁切（显示不完整）问题，属于当前Phaser引擎PIXI模块渲染Web Font上的一个Bug。

• 部分触摸设备在多点触摸操作时可能出现程序卡死，停止响应，尚未明确重现条件。