TypeScript案例-下棋游戏（XXOO）

1. 游戏准备

1.1 游戏演示

 

玩法：两个玩家，一个玩家使用（X），一个玩家使用（O），轮流在棋盘上下棋（点击单元格）。

获胜条件：横、竖、斜（对角线）三个棋子相同。

平局：棋盘满子，但是，不满足任何一种获胜条件。

1.2 游戏模板说明

重点：运用学到的 TS 知识，来开发下棋游戏。

游戏的模板（HTML、CSS），已准备好，直接使用即可。

模板（HTML、CSS）的说明：

1. 下一步提示：给游戏面板（#bord）标签，添加 x 或 o 类名。

2. 下棋（点击单元格）：给单元格（.cell）标签，添加 x 或 o 类名。

3. 展示和隐藏获胜信息：设置获胜信息面板（#message）标签的样式属性 display。

2. 点击下棋

2.1 单元格点击

效果：点击棋盘的任意单元格，单元格显示 X（默认）。

1. 获取到所有的单元格列表。

3. 给当前被点击的单元格添加类名 x。

2. 遍历单元格列表，给每一个单元格添加点击事件。

优化（1）：防止单元格重复点击，在添加事件时，使用 once 属性，让单元格只能被点击一次。

优化（2）：使用函数声明形式的事件处理程序（代码多了后，代码结构会更清晰）。

2.2 切换玩家

效果：玩家（X）和玩家（O）轮流交替下棋。

1. 创建一个存储当前玩家的变量（currentPlayer），默认值为：x。

3. 切换到另一个玩家：在添加类名（下棋完成一步）后，根据当前玩家，得到另外一个玩家。

2. 将添加给单元格时写死的类名 x ，替换为变量（currentPlayer）的值。

4. 处理下一步提示：移除游戏面板中的 x 和 o 类名，添加下一个玩家对应的类名。

枚举

使用变量（currentPlayer）处理当前玩家，存在的问题：

变量的类型是 string，它的值可以是任意字符串。

如果不小心写错了（o  0），代码不会报错，但功能就无法实现了，并且很难找错。

也就是：string 类型的变量，取值太宽泛，无法很好的限制值为 x 和 o。

枚举是组织有关联数据的一种方式（比如，x 和 o 就是有关联的数据）。

使用场景：当变量的值，只能是几个固定值中的一个，应该使用枚举来实现。

注意：JS