【视频】Vue3 开发扫雷游戏 Workshop 视频录像

经过连续几周的奋斗，终于把这套教程做完了，共四期，从入门开始，直到在本地搭建开发环境，并使用 pinia 记录游戏成绩。所有视频都在 B 站，欢迎各位读者观看，敬请三连。

第一期：启动项目，基础知识

1. Vue 组件开发游乐场，免环境学开发的神器
2. 什么是 MVVM 框架
3. Vue3 基础
4. 使用 display:grid 画地图
5. 生成地雷
6. 生成游戏地图

第二期：组件式开发

1. 父子组件间传递数据的方式
2. defineEmits，defineProps，defineExpose 的使用
3. 使用变量切换状态
4. 递归变更节点状态（最后拼错了导致翻车

第三期：游戏逻辑 => 数理逻辑

1. 添加胜利效果
2. 添加难度选择

第四期：本地开发 Vite，状态管理 Pinia

1. 总结，梳理回顾代码
2. 修改布雷时机，让游戏更好玩
3. 将项目迁移到本地，使用 Vite 搭建开发环境
4. 使用 pinia 存储记录

参考代码

扫雷相关代码在这个仓库：meathill/minesweeper: yet another minesweeper game (github.com)，欢迎学习，有任何问题均欢迎提问。目前我也时不时更新一下。

想试玩的话这里有 DEMO。

---

写在第一期之后

周日，Workshop 如期开始。有 5、6 位同学到场，出勤率 50%，还不错。

这次 Workshop 我选择用浏览器 SFC Playground 的形式，减少环境部署的需求，希望大家集中精神在其它技术内容上。

Vue3 开发扫雷游戏比想象中复杂，一节课讲不完，这节课的知识点有：

1. Vue 组件开发游乐场，免环境学开发的神器
2. 什么是 MVVM 框架
3. Vue3 基础
4. 使用 display:grid 画地图
5. 生成地雷
6. 生成游戏地图

没有到现场的同学可以看录像，敬请一键三连：

（视频挪到上面了）

因为我上午清理 Sentry 的时候不小心断网，把服务器搞挂了，所以提前下播加班维护服务器，所以时间比预期要少，只有 1.5 小时。但是我觉得强度还是太大了，对我对同学来说都是。下次理想时间是讲 1 小时，分析和作业 半小时；课间休息 10 分钟。

不出意外的话，本周日下午 3 点继续，欢迎听过的没听过的同学一起来参加。没来过的同学可以加我微信：wakabanga。

布置一个作业：我计算每个砖块四周有几个炸弹的算法，可以优化。提出你的优化点并实现它，发给我，我就送你一本技术类书籍。大家都来试试吧。