开发 HarmonyOS NEXT 版五子棋游戏实战

2025-03-05
湖北
本文字数：2855 字
阅读完需：约 9 分钟

大家好，我是 V 哥。首先要公布一个好消息，V 哥原创的《鸿蒙 HarmonyOS NEXT 开发之路卷 1：ArkTS 语言篇》图书终于出版了，有正在学习鸿蒙的兄弟可以关注一下，写书真是磨人，耗时半年之久，感概一下，希望可以帮助到正在入门鸿蒙开发的小伙伴，一书在手 ArkTS 无优。

今天要给大家分享一个 ArkTS 小游戏的开发，五子棋游戏，通过这个小游戏的学习，可以帮助小伙伴们快速开发出自己的第一款纯血鸿蒙应用，先上图：

五子棋游戏介绍

1. 这个五子棋游戏包含以下功能：

使用 15x15 的标准棋盘
支持双人轮流下棋（黑棋先手）
自动判断胜负（任意方向五连即胜）
游戏结束提示
重新开始功能
触摸交互支持

2. 视觉反馈：

黑色棋子代表玩家 1
白色棋子代表玩家 2
棕色(#CBA)棋盘背景

3. 使用方法：

点击棋盘格子下棋
当一方达成五连时弹出胜利提示
点击"重新开始"按钮重置游戏

4. 游戏规则：

黑棋先手，白棋后手，轮流下棋
棋子只能下在空白处
率先在横、竖、斜任意方向形成五连者获胜
游戏结束后需要点击重新开始才能开始新游戏

5. 该代码使用了 HarmonyOS 的 ArkUI 框架，主要特性包括：

使用 Grid 布局实现棋盘
@State 管理游戏状态
TouchTarget 处理触摸事件
AlertDialog 显示胜利提示
Flex 布局实现整体界面
二维数组存储棋盘状态

注意：V 哥在测试时使用的是模拟器，在真实设备运行时可能需要根据屏幕尺寸调整单元格大小（修改.width(30)和.height(30)的数值）以获得最佳显示效果。

下面是详细代码实现及解释，按照以下思路即可完美实现。

五子棋游戏代码分析

这段代码实现了一个简单的五子棋游戏，使用了 ArkTS（Ark TypeScript）语言。下面我将详细解释每个部分的功能，帮助你理解代码。

1. 导入和声明

@Entry@Componentstruct GobangGame {

复制代码

@Entry 和 @Component 是装饰器，用于标记这是一个页面组件。
struct GobangGame 定义了一个名为 GobangGame 的结构体，表示五子棋游戏的主界面。

2. 状态变量

  @State board: number[][] = Array(15).fill(null).map(() => Array(15).fill(0))  @State currentPlayer: number = 1 // 1: 黑棋, 2: 白棋  @State gameOver: boolean = false

复制代码

@State 表示这些变量是可变的状态。
board 是一个 15x15 的二维数组，表示棋盘，初始值为 0（空位），1 表示黑棋，2 表示白棋。
currentPlayer 表示当前玩家，1 为黑棋，2 为白棋。
gameOver 表示游戏是否结束。

3. 构建 UI

  build() {    Column() {      // 游戏标题      Text(this.gameOver ? '游戏结束' : `当前玩家: ${this.currentPlayer === 1 ? '黑棋' : '白棋'}`)        .fontSize(20)        .margin(10)
      // 重新开始按钮      Button('重新开始')        .onClick(() => this.resetGame())        .margin(5)
      // 棋盘      Column() {        ForEach(this.board, (row: number[], rowIndex: number) => {          Row() {            ForEach(row, (cell: number, colIndex: number) => {              Column()                .width(30)                .height(30)                .border({ width: 1, color: '#999' })                .backgroundColor(this.getCellColor(cell))                .onTouch((event: TouchEvent) => {                  if (event.type === TouchType.Down) {                    this.handleClick(rowIndex, colIndex)                  }                })            }, (colIndex: number) => colIndex.toString())          }        }, (rowIndex: number) => rowIndex.toString())      }      .margin(10)    }    .width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)  }

复制代码

build() 方法用于构建页面的 UI。
使用 Column 和 Row 布局容器来排列元素。
显示当前玩家或游戏结束信息。
提供一个“重新开始”按钮，点击后调用 resetGame() 方法重置游戏。
使用 ForEach 循环渲染棋盘，每个单元格是一个 Column，设置了宽度、高度、边框和背景颜色，并绑定了触摸事件。

4. 获取单元格颜色

  private getCellColor(value: number): ResourceColor {    return value === 1 ? '#000' : value === 2 ? '#fff' : '#CBA'  }

复制代码

getCellColor 方法根据单元格的值返回相应的颜色：
1（黑棋）返回黑色 (#000)
2（白棋）返回白色 (#fff)
0（空位）返回浅灰色 (#CBA)

5. 处理点击事件

  private handleClick(row: number, col: number) {    if (this.gameOver || this.board[row][col] !== 0) return
    let newBoard = [...this.board]    newBoard[row][col] = this.currentPlayer    this.board = newBoard
    if (this.checkWin(row, col)) {      this.gameOver = true      AlertDialog.show({ message: `${this.currentPlayer === 1 ? '黑棋' : '白棋'}获胜!` })    } else {      this.currentPlayer = this.currentPlayer === 1 ? 2 : 1    }  }

复制代码

handleClick 方法处理玩家点击棋盘的动作：
如果游戏已经结束或该位置已有棋子，则不处理。
否则，在指定位置放置当前玩家的棋子。
检查是否有玩家获胜，如果有则显示胜利提示并结束游戏。
否则切换到下一个玩家。

6. 检查胜利条件

  private checkWin(row: number, col: number): boolean {    const directions = [      [[-1, 0], [1, 0]],   // 垂直      [[0, -1], [0, 1]],   // 水平      [[-1, -1], [1, 1]],  // 主对角线      [[-1, 1], [1, -1]]    // 副对角线    ]
    for (let direction of directions) {      let count = 1      for (let i = 0; i < direction.length; i++) {        let dx = direction[i][0]        let dy = direction[i][1]        let x = row + dx        let y = col + dy        while (x >= 0 && x < 15 && y >= 0 && y < 15 &&          this.board[x][y] === this.currentPlayer) {          count++          x += dx          y += dy        }      }      if (count >= 5) return true    }    return false  }

复制代码

checkWin 方法检查当前玩家是否在某个方向上连成五子：
定义了四个方向：垂直、水平、主对角线和副对角线。
对每个方向进行检查，统计连续相同棋子的数量。
如果任意方向上有五个或更多相同的棋子，则返回 true，表示当前玩家获胜。

7. 重置游戏

  private resetGame() {    this.board = Array(15).fill(null).map(() => Array(15).fill(0))    this.currentPlayer = 1    this.gameOver = false  }

复制代码

resetGame 方法重置游戏状态：
清空棋盘。
将当前玩家设置为黑棋（1）。
设置 gameOver 为 false，表示游戏未结束。

最后小结

这段代码实现了一个完整的五子棋游戏，包括棋盘绘制、玩家交互、胜负判断和游戏重置功能。通过理解每个部分的功能，你可以更好地掌握如何使用 ArkTS 开发类似的游戏应用。最后需要游戏源码的伙伴，可以到 Gitee 下载，V 哥已经把源代码上传到 Gitee（https://gitee.com/wgjava/GobangGame），欢迎一起交流鸿蒙原生开发。关注威哥爱编程，鸿蒙开发共前行。

发布于: 刚刚阅读数: 8

原文链接:【http://xie.infoq.cn/article/18ba05d9a37bf68d19bfaf391】。

威哥爱编程

关注

华为 HDE、CSDN 博客专家、Java畅销书作者 2018-05-30 加入

全栈领域优质创作者（Java/HarmonyOS/AI），公众号：威哥爱编程

发布

暂无评论

创作场景

开发 HarmonyOS NEXT 版五子棋游戏实战

五子棋游戏介绍

1. 这个五子棋游戏包含以下功能：

2. 视觉反馈：

3. 使用方法：

4. 游戏规则：

5. 该代码使用了 HarmonyOS 的 ArkUI 框架，主要特性包括：

五子棋游戏代码分析

1. 导入和声明

2. 状态变量

3. 构建 UI

4. 获取单元格颜色

5. 处理点击事件

6. 检查胜利条件

7. 重置游戏

最后小结

威哥爱编程

评论