鸿蒙HarmonyOS NEXT开发:简易五子棋小游戏的实现(悔棋、重开、胜利判断)

效果图:

鸿蒙HarmonyOS NEXT开发:简易五子棋小游戏的实现(悔棋、重开、胜利判断)_第1张图片

主组件中状态变量定义模块:

先定义每一行棋的对象DraughtBoard(因为使用@State UI无法检测到二维数组的数值变化)

@Observed
class DraughtBoard extends Array{
}

  • @State player:boolean:这是一个关键的状态变量,决定了当前轮到哪一方下棋。true表示当前轮到黑棋,false则表示轮到白棋。其初始值被设定为true,这意味着在游戏开始时,黑棋将率先落子。这种设计明确了游戏的起始下棋方,为后续的轮流下棋机制奠定了基础。
  • @State winner:number:此变量用于明确游戏的最终胜负结果。当winner的值为0时,代表游戏仍在进行中,尚未有一方取得胜利;当winner的值为1,表示黑棋获胜;而当winner的值为2,则表示白棋获胜。初始时,由于游戏尚未结束,winner的值被初始化为0,随着游戏进程的推进,其值会根据游戏的实际情况进行更新。
  • @State draughtBoard:DraughtBoard[]:这是一个二维数组,完整地代表了五子棋的棋盘状态。每一个元素都对应着棋盘上的一个位置。初始时,所有位置的值都被设置为0,表示这些位置尚未有棋子落下。通过对这个数组的实时更新和监控,可以精确地掌握棋盘上每个位置的状态变化,从而实现对游戏进程的准确跟踪和判断。
  • @State history:number[][]:这个状态变量的作用是存储下棋的历史记录。它以二维数组的形式,记录了每一步下棋的坐标位置。通过这种方式,可以实现悔棋的功能。在游戏开始时,history数组为空,随着玩家的下棋操作,不断将下棋的位置信息添加到数组中。
  •   // 判断下棋的为黑棋还是白棋   true 黑 false 白
      @State player:boolean=true
      // 判断胜利者  0 未胜利 1黑棋胜 2白棋胜
      @State winner:number=0
      // 棋盘 15行棋
      @State draughtBoard:DraughtBoard[] = [
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard(),
        new DraughtBoard()
      ]
      // 记录已下棋子的坐标和顺序  实现悔棋功能用
      @State history:number[][]= []

    棋盘行组件 draughtBoardRow

  • @ObjectLink draughtBoardItem:DraughtBoard:这一链接直接与每行棋的具体状态相关联。它能够实时反映出每行棋上棋子的分布情况,确保在游戏进行中,每行棋的状态都能得到准确和及时的更新和展示。
  • @Link draughtBoard:DraughtBoard[]:通过这种双向链接,组件能够获取到整个棋盘的状态信息。这对于在处理每行棋的逻辑时,特别是在进行胜利判断时,提供了全局的视角和必要的数据支持。
  • @Link player:boolean:明确当前是黑棋还是白棋在进行操作。这一信息对于决定当玩家点击空白位置时应设置的棋子颜色至关重要。它直接影响了游戏的逻辑流程和棋子的显示效果。
  • @State y:number:准确记录了棋盘中当前行的索引。在进行胜利判断时,这个索引值能够帮助确定具体的位置以及判断的方向,为准确判断是否有一方在某一行形成五子连珠提供了关键的位置信息。
  • @State colors:ResourceColor[]:定义了棋子可能呈现的颜色数组。其中,透明(未下棋)代表着棋盘上尚未落子的位置;黑色代表黑棋;白色代表白棋。默认情况下,棋盘上的位置颜色为透明,只有在玩家下棋后,相应位置的颜色才会根据棋子的颜色进行更新。
  • @Link winner:number:与主组件中的winner状态建立链接。这样,在处理每行棋的过程中,可以根据全局的胜利情况来决定是否需要进行某些特殊的处理或显示相应的提示信息。
  • @Link history:number[][]:接收来自主组件的下棋历史记录。这为实现悔棋等功能提供了不可或缺的数据基础。在需要进行悔棋操作时,可以从这个历史记录中获取到之前下棋的位置信息,并据此恢复棋盘的

在 build 方法中:

通过使用ForEach循环遍历每行棋的元素,从而实现了棋盘行的渲染和构建。当玩家点击棋盘上未下棋的位置时,会根据当前下棋者的身份(通过player的布尔值来判断)来设置相应的棋子颜色。具体来说,如果当前是黑棋下棋(即playertrue),那么会将对应位置的值设置为1,从而在视觉上显示为黑棋;如果当前是白棋下棋(即playerfalse),则将对应位置的值设置为2,显示为白棋。

紧接着,会调用win函数来进行胜利判断。这个判断过程综合考虑了横向、纵向、斜向和反斜向等多个方向上的棋子连续情况。如果判断当前的下棋操作导致了一方的胜利,那么会更新winner的值,以反映游戏的胜利结果。

同时,会将此次下棋的位置信息记录到history中,形成下棋的历史记录。这一记录不仅用于悔棋操作,还为后续可能的游戏复盘或其他相关功能提供了数据支持。最后,通过交换player的值,实现下棋者的交替,使游戏能够顺利地进行下去。

//    每一行棋封装成组件
@Component
struct draughtBoardRow{
  @ObjectLink  draughtBoardItem:DraughtBoard    //每一行棋
  @Link draughtBoard:DraughtBoard[]     //整幅棋的棋盘 为了便于判断胜利 使用@Link进行双向传递
  @Link player:boolean      // 判断下棋的为黑棋还是白棋   true 黑 false 白
  @State y:number=0       //棋盘中的第几行棋 为了判断胜利
  @State colors:ResourceColor[]=[Color.Transparent, Color.Black, Color.White]   //棋盘中的棋子颜色 默认透明
  &#

你可能感兴趣的:(ArkTS,交互,华为,harmonyos)