鸿蒙NEXT开发案例：区字棋

// 导入提示框操作模块
import { promptAction } from '@kit.ArkUI';

// 使用框架提供的特性，如属性追踪等
@ObservedV2
class Cell {
  // 定义棋子类型，0为空，1为黑方，2为白方
  @Trace user: number = 0;
  // 棋子的名字，例如"A"、"B"
  name: string = "";
  // 棋子的位置坐标
  x: number = 0;
  y: number = 0;
  // 棋子的尺寸
  width: number = 100;
  height: number = 100;

  // 构造函数初始化棋子的状态
  constructor(name: string, x: number, y: number, user: number) {
    this.user = user; // 设置棋子的用户类型
    this.name = name; // 设置棋子的名字
    this.x = x; // 设置棋子的X坐标
    this.y = y; // 设置棋子的Y坐标
  }

  // 动画中的X轴偏移量
  @Trace animX: number = 0;
  // 动画中的Y轴偏移量
  @Trace animY: number = 0;

  // 获取棋子中心点的X坐标
  getCenterX() {
    return this.x - this.width / 2; // 计算并返回中心X坐标
  }

  // 获取棋子中心点的Y坐标
  getCenterY() {
    return this.y - this.height / 2; // 计算并返回中心Y坐标
  }

  // 执行棋子移动动画
  moveAnimation(animationTime: number, toCell: Cell, callback?: () => void) {
    // 设置动画参数
    animateToImmediately({
      duration: animationTime, // 动画持续时间
      iterations: 1, // 动画迭代次数
      curve: Curve.Linear, // 动画曲线类型
      // 在动画完成后的回调函数
      onFinish: () => {
        animateToImmediately({
          duration: 0, // 立即完成
          iterations: 1,
          curve: Curve.Linear,
          // 在动画完成后的内部回调函数
          onFinish: () => {
            if (callback) {
              callback(); // 调用外部回调函数
            }
          }
        }, () => {
          // 重置动画偏移量
          this.animX = 0; // X轴偏移量重置
          this.animY = 0; // Y轴偏移量重置
          // 交换棋子的位置信息
          let temp = this.user; // 临时存储当前棋子的用户
          this.user = toCell.user; // 将目标棋子的用户赋值给当前棋子
          toCell.user = temp; // 将临时存储的用户赋值给目标棋子
        });
      }
    }, () => {
      // 设置动画的目标偏移量
      this.animX = toCell.x - this.x; // 计算X轴目标偏移量
      this.animY = toCell.y - this.y; // 计算Y轴目标偏移量
    });
  }
}

// 定义棋子之间的连接关系
class Connection {
  // 开始和结束节点的名字
  startName: string;
  endName: string;
  // 开始和结束节点的坐标
  startX: number;
  startY: number;
  endX: number;
  endY: number;

  // 构造函数初始化连接关系
  constructor(start: Cell, end: Cell) {
    this.startName = start.name; // 设置连接的起始棋子名字
    this.endName = end.name; // 设置连接的结束棋子名字
    this.startX = start.x; // 设置起始棋子的X坐标
    this.startY = start.y; // 设置起始棋子的Y坐标
    this.endX = end.x; // 设置结束棋子的X坐标
    this.endY = end.y; // 设置结束棋子的Y坐标
  }
}

// 定义游戏结构
@Entry
@Component
struct TwoSonChessGame {
  // 游戏状态标志，用于控制动画执行
  @State isAnimationRunning: boolean = false;
  // 当前棋盘上的所有棋子
  @State cells: Cell[] = [];
  // 当前棋盘上的所有连接关系
  @State connections: Connection[] = [];
  // 当前玩家，1代表黑方，2代表白方
  @State currentPlayer: number = 1;

  // 游戏加载时初始化棋盘
  aboutToAppear(): void {
    // 创建五个棋子
    const cellA = new Cell("A", 180, 180, 2); // 创建棋子A
    const cellB = new Cell("B", 540, 180, 1); // 创建棋子B
    const cellC = new Cell("C", 360, 360, 0); // 创建棋子C
    const cellD = new Cell("D", 180, 540, 1); // 创建棋子D
    const cellE = new Cell("E", 540, 540, 2); // 创建棋子E
    // 将创建的棋子添加到棋盘上
    this.cells.push(cellA, cellB, cellC, cellD, cellE);
    // 初始化棋子间的连接关系
    this.connections.push(new Connection(cellA, cellB)); // A与B连接
    this.connections.push(new Connection(cellA, cellC)); // A与C连接
    this.connections.push(new Connection(cellA, cellD)); // A与D连接
    this.connections.push(new Connection(cellB, cellC)); // B与C连接
    this.connections.push(new Connection(cellC, cellD)); // C与D连接
    this.connections.push(new Connection(cellC, cellE)); // C与E连接
    this.connections.push(new Connection(cellD, cellE)); // D与E连接
  }

  // 重置游戏状态
  resetGame() {
    this.currentPlayer = 1; // 重置当前玩家为黑方
    this.cells[0].user = 2; // 设置棋子A为白方
    this.cells[1].user = 1; // 设置棋子B为黑方
    this.cells[2].user = 0; // 设置棋子C为空
    this.cells[3].user = 1; // 设置棋子D为黑方
    this.cells[4].user = 2; // 设置棋子E为白方
  }

  // 处理棋子移动
  move(cell: Cell) {
    // 判断棋子是否可移动
    if (this.isCellValid(cell)) {
      let targetIndex = this.checkValidMove(cell); // 检查目标位置是否合法
      // 如果目标位置合法，则启动动画
      if (targetIndex !== -1) {
        this.isAnimationRunning = true; // 设置动画正在运行
        cell.moveAnimation(300, this.cells[targetIndex], () => {
          this.isAnimationRunning = false; // 动画完成后设置为不运行
          this.moveCompleted(); // 调用移动完成处理
        });
      } else {
        console.info(`当前位置无法移动`); // 输出无法移动的信息
      }
    }
  }

  // 移动完成后处理
  moveCompleted() {
    // 切换玩家
    this.currentPlayer = this.currentPlayer === 1 ? 2 : 1; // 切换当前玩家
    // 检查游戏是否结束
    if (this.isGameOver()) {
      let winner = this.currentPlayer === 1 ? '白棋赢了' : '黑棋赢了'; // 判断赢家
      console.info(`${winner}`); // 输出赢家信息
      // 显示游戏结束提示
      promptAction.showDialog({
        title: '游戏结束', // 提示框标题
        message: `${winner}`, // 提示框内容
        buttons: [{ text: '重新开始', color: '#ffa500' }] // 提示框按钮
      }).then(() => {
        this.resetGame(); // 重新开始游戏
      });
    } else {
      // 如果是白方回合，则进行AI自动走法
      if (this.currentPlayer === 2) {
        this.aiMove(); // 调用AI走法
      }
    }
  }

  // AI走法
  aiMove() {
    let whiteCells = this.cells.filter(cell => cell.user === 2 && this.checkValidMove(cell) !== -1); // 获取可移动的白棋
    // 根据当前情况选择最优走法
    if (whiteCells.length === 1) {
      this.move(whiteCells[0]); // 只有一个可移动棋子，直接移动
    } else if (whiteCells.length === 2) {
      let moveIndex = this.chooseBestMove(whiteCells); // 选择最佳走法
      this.move(whiteCells[moveIndex]); // 移动最佳棋子
    }
  }

  // 选择最佳走法
  chooseBestMove(whiteCells: Cell[]): number {
    let emptyIndex = this.cells.findIndex(cell => cell.user === 0); // 找到空棋子的位置 
    let bestMoveIndex = -1; // 初始化最佳移动索引
    for (let i = 0; i < whiteCells.length; i++) {
      let tempUser = whiteCells[i].user; // 临时存储当前白棋的用户
      whiteCells[i].user = this.cells[emptyIndex].user; // 将空位置的用户赋值给当前白棋
      this.cells[emptyIndex].user = tempUser; // 将当前白棋的用户赋值给空位置
      this.currentPlayer = 1; // 设置当前玩家为黑方
      let isGameOver = this.isGameOver(); // 检查游戏是否结束
      tempUser = whiteCells[i].user; // 恢复当前白棋的用户
      whiteCells[i].user = this.cells[emptyIndex].user; // 恢复空位置的用户
      this.cells[emptyIndex].user = tempUser; // 恢复空位置的用户
      this.currentPlayer = 2; // 恢复当前玩家为白方
      if (isGameOver) {
        bestMoveIndex = i; // 如果游戏结束，记录最佳移动索引
        break; // 退出循环
      }
    }
    if (bestMoveIndex === -1) {
      bestMoveIndex = Math.floor(Math.random() * 2); // 如果没有找到最佳移动，随机选择一个
    }
    return bestMoveIndex; // 返回最佳移动索引
  }

  // 判断棋子是否有效
  isCellValid(cell: Cell): boolean {
    return (cell.user === 1 && this.currentPlayer === 1) || (cell.user === 2 && this.currentPlayer === 2); // 判断棋子是否属于当前玩家
  }

  // 判断游戏是否结束
  isGameOver(): boolean {
    for (let i = 0; i < this.cells.length; i++) {
      if (this.currentPlayer == this.cells[i].user && this.checkValidMove(this.cells[i]) != -1) {
        return false; // 如果当前玩家还有可移动的棋子，游戏未结束
      }
    }
    return true; // 否则游戏结束
  }

  // 检查是否为有效走法
  checkValidMove(cell: Cell): number {
    for (let i = 0; i < this.connections.length; i++) {
      if (cell.name === this.connections[i].startName) { // 如果棋子是连接的起始点
        for (let j = 0; j < this.cells.length; j++) {
          if (this.cells[j].name === this.connections[i].endName && this.cells[j].user === 0) {
            return j; // 返回目标位置的索引
          }
        }
      } else if (cell.name === this.connections[i].endName) { // 如果棋子是连接的结束点
        for (let j = 0; j < this.cells.length; j++) {
          if (this.cells[j].name === this.connections[i].startName && this.cells[j].user === 0) {
            return j; // 返回目标位置的索引
          }
        }
      }
    }
    return -1; // 如果没有找到有效走法，返回-1
  }

  // 构建棋盘界面
  build() {
    Column({ space: 10 }) { // 创建一个垂直排列的列
      Stack() { // 创建一个堆叠布局
        ForEach(this.connections, (connection: Connection, _index) => { // 遍历所有连接关系
          Line() // 绘制连接线
            .width(5) // 设置线宽
            .height(5) // 设置线高
            .startPoint([`${connection.startX}lpx`, `${connection.startY}lpx`]) // 设置起始点
            .endPoint([`${connection.endX}lpx`, `${connection.endY}lpx`]) // 设置结束点
            .stroke(Color.Black) // 设置线条颜色
            .fill(Color.Green); // 设置填充颜色
        });

        ForEach(this.cells, (cell: Cell, _index) => { // 遍历所有棋子
          Text() // 绘制棋子
            .width(`${cell.width}lpx`) // 设置棋子宽度
            .height(`${cell.height}lpx`) // 设置棋子高度
            .margin({ left: `${cell.getCenterX()}lpx`, top: `${cell.getCenterY()}lpx` }) // 设置棋子位置
            .translate({ x: `${cell.animX}lpx`, y: `${cell.animY}lpx` }) // 设置动画偏移
            .backgroundColor(cell.user === 0 ? Color.Transparent : // 设置背景颜色
              (cell.user === 1 ? Color.Black : Color.White)) // 根据用户类型设置颜色
            .borderRadius('50%') // 设置圆角
            .onClick(() => { // 设置点击事件
              if (this.isAnimationRunning) { // 如果动画正在运行
                console.info(`动画执行中`); // 输出信息
                return; // 退出
              }
              this.move(cell); // 调用移动函数
            });
        });
      }
      .align(Alignment.TopStart) // 设置对齐方式
      .width('720lpx') // 设置宽度
      .height('720lpx') // 设置高度
      .backgroundColor(Color.Orange); // 设置背景颜色

      Button('重新开始').onClick(() => { // 创建重新开始按钮
        if (this.isAnimationRunning) { // 如果动画正在运行
          console.info(`动画执行中`); // 输出信息
          return; // 退出
        }
        this.resetGame(); // 调用重置游戏函数
      });
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.