一款跨平台跨终端的扫雷游戏
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
build-assets
dist
src
.babelrc
.eslintrc.json
.gitignore
LICENSE.md
README.md
favicon.ico
index.html
main.js
manifest.json
minesweeper-service-worker.js
package.json
screenshot.jpg
updater.html
updater.js
webpack.config.js
webpack.production.config.js
yarn.lock

README.md

屏幕截图

Minesweeper - 扫雷

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

项目说明

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

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

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

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

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

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

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

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

主要技术栈:

浏览器支持

  • 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。

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