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

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

第一期:启动项目,基础知识

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

第二期:组件式开发

  1. 父子组件间传递数据的方式
  2. defineEmitsdefinePropsdefineExpose 的使用
  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。

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


Posted

in

by

Comments

欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: