如何用Angular开发一个长尾关键词驱动的扫雷游戏应用？

本文共计2149个文字，预计阅读时间需要9分钟。

最近想找些项目练练手，发现一些小游戏还挺有意思的。于是做了一个网页版的扫雷游戏。点击这里，看看最终效果。创建应用时，该项目使用了monorepo的代码存放形式。

最近想找些项目练练手，发现去复刻一些小游戏还挺有意思的，于是就做了一个网页版的扫雷。

点击这里 看看最终的效果。

创建应用

该项目使用的是 monorepo 的形式来存放代码。在 Angular 中，构建 monorepo 方法如下：

ng new simple-game --createApplication=false ng generate application mine-sweeper

在这里，因为该项目以后还会包含其他各种其他的应用，所以个人觉得使用 monorepo 构建项目是比较正确的选择。如果不想使用 monorepo，使用以下命令创建应用：

ng new mine-sweeper

流程图

首先，我们先来看看扫雷的基本流程。

数据结构抽象

通过观察流程图，可以得到扫雷基本上有这么几种状态：

• 开始
• 进行游戏
• 胜利
• 失败

方块的状态如下：

• 它有雷无雷，取决于它的初始设置；
• 如果没有雷，那么它需要展示附近地雷的数量；
• 是否已经被打开；

我们可以先定义好这些状态，之后根据不同的状态，执行不同的逻辑，同时反馈给组件。