登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›开发HarmonyOS NEXT版五子棋游戏实战

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

东门芳洲 7 天前
大家好，我是 V 哥。首先要公布一个好消息，V 哥原创的《鸿蒙HarmonyOS NEXT 开发之路 卷1：ArkTS 语言篇》图书终于出版了，有正在学习鸿蒙的兄弟可以关注一下，写书真是磨人，耗时半年之久，感概一下，希望可以帮助到正在入门鸿蒙开发的小伙伴，一书在手 ArkTS无优。
今天要给大家分享一个 ArkTS小游戏的开发，五子棋游戏，通过这个小游戏的学习，可以帮助小伙伴们快速开发出自己的第一款纯血鸿蒙应用，先上图：
1.png

五子棋游戏介绍

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. 导入和声明
  1. @Entry
  2. @Component
  3. struct GobangGame {
复制代码

  • @Entry 和 @Component 是装饰器，用于标记这是一个页面组件。
  • struct GobangGame 定义了一个名为 GobangGame 的结构体，表示五子棋游戏的主界面。
2. 状态变量
  1.   @State board: number[][] = Array(15).fill(null).map(() => Array(15).fill(0))
  2.   @State currentPlayer: number = 1 // 1: 黑棋, 2: 白棋
  3.   @State gameOver: boolean = false
复制代码

  • @State 表示这些变量是可变的状态。
  • board 是一个15x15的二维数组，表示棋盘，初始值为0（空位），1表示黑棋，2表示白棋。
  • currentPlayer 表示当前玩家，1为黑棋，2为白棋。
  • gameOver 表示游戏是否结束。
3. 构建UI
  1.   build() {
  2.     Column() {
  3.       // 游戏标题
  4.       Text(this.gameOver ? '游戏结束' : `当前玩家: ${this.currentPlayer === 1 ? '黑棋' : '白棋'}`)
  5.         .fontSize(20)
  6.         .margin(10)
  8.       // 重新开始按钮
  9.       Button('重新开始')
  10.         .onClick(() => this.resetGame())
  11.         .margin(5)
  13.       // 棋盘
  14.       Column() {
  15.         ForEach(this.board, (row: number[], rowIndex: number) => {
  16.           Row() {
  17.             ForEach(row, (cell: number, colIndex: number) => {
  18.               Column()
  19.                 .width(30)
  20.                 .height(30)
  21.                 .border({ width: 1, color: '#999' })
  22.                 .backgroundColor(this.getCellColor(cell))
  23.                 .onTouch((event: TouchEvent) => {
  24.                   if (event.type === TouchType.Down) {
  25.                     this.handleClick(rowIndex, colIndex)
  26.                   }
  27.                 })
  28.             }, (colIndex: number) => colIndex.toString())
  29.           }
  30.         }, (rowIndex: number) => rowIndex.toString())
  31.       }
  32.       .margin(10)
  33.     }
  34.     .width('100%')
  35.     .height('100%')
  36.     .justifyContent(FlexAlign.Center)
  37.   }
复制代码

  • build() 方法用于构建页面的UI。
  • 使用 Column 和 Row 布局容器来排列元素。
  • 显示当前玩家或游戏结束信息。
  • 提供一个“重新开始”按钮，点击后调用 resetGame() 方法重置游戏。
  • 使用 ForEach 循环渲染棋盘，每个单元格是一个 Column，设置了宽度、高度、边框和背景颜色，并绑定了触摸事件。
4. 获取单元格颜色
  1.   private getCellColor(value: number): ResourceColor {
  2.     return value === 1 ? '#000' : value === 2 ? '#fff' : '#CBA'
  3.   }
复制代码

  • getCellColor 方法根据单元格的值返回相应的颜色：

    • 1（黑棋）返回黑色 (#000)
    • 2（白棋）返回白色 (#fff)
    • 0（空位）返回浅灰色 (#CBA)

5. 处理点击事件
  1.   private handleClick(row: number, col: number) {
  2.     if (this.gameOver || this.board[row][col] !== 0) return
  4.     let newBoard = [...this.board]
  5.     newBoard[row][col] = this.currentPlayer
  6.     this.board = newBoard
  8.     if (this.checkWin(row, col)) {
  9.       this.gameOver = true
  10.       AlertDialog.show({ message: `${this.currentPlayer === 1 ? '黑棋' : '白棋'}获胜!` })
  11.     } else {
  12.       this.currentPlayer = this.currentPlayer === 1 ? 2 : 1
  13.     }
  14.   }
复制代码

  • handleClick 方法处理玩家点击棋盘的动作：

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

6. 检查胜利条件
  1.   private checkWin(row: number, col: number): boolean {
  2.     const directions = [
  3.       [[-1, 0], [1, 0]],   // 垂直
  4.       [[0, -1], [0, 1]],   // 水平
  5.       [[-1, -1], [1, 1]],  // 主对角线
  6.       [[-1, 1], [1, -1]]    // 副对角线
  7.     ]
  9.     for (let direction of directions) {
  10.       let count = 1
  11.       for (let i = 0; i < direction.length; i++) {
  12.         let dx = direction[i][0]
  13.         let dy = direction[i][1]
  14.         let x = row + dx
  15.         let y = col + dy
  16.         while (x >= 0 && x < 15 && y >= 0 && y < 15 &&
  17.           this.board[x][y] === this.currentPlayer) {
  18.           count++
  19.           x += dx
  20.           y += dy
  21.         }
  22.       }
  23.       if (count >= 5) return true
  24.     }
  25.     return false
  26.   }
复制代码

  • checkWin 方法检查当前玩家是否在某个方向上连成五子：

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

7. 重置游戏
  1.   private resetGame() {
  2.     this.board = Array(15).fill(null).map(() => Array(15).fill(0))
  3.     this.currentPlayer = 1
  4.     this.gameOver = false
  5.   }
复制代码

  • resetGame 方法重置游戏状态：

    • 清空棋盘。
    • 将当前玩家设置为黑棋（1）。
    • 设置 gameOver 为 false，表示游戏未结束。

最后小结

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
东门芳洲
7 天前

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫