鸿蒙开发入门实战案例-五子棋游戏（附源码）

最新推荐文章于 2024-06-17 21:49:08 发布

蜀道山QAQ

最新推荐文章于 2024-06-17 21:49:08 发布

阅读量1.5k

点赞数 17

分类专栏：鸿蒙鸿蒙项目文章标签： harmonyos 游戏华为前端鸿蒙鸿蒙系统 ArkTs

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/136490802

版权

鸿蒙同时被 2 个专栏收录

631 篇文章 64 订阅

订阅专栏

鸿蒙项目

31 篇文章 6 订阅

订阅专栏

相信大多数友友们都没有过开发游戏的经验，即便是从业多年的开发者也很少用应用程序语言来开发游戏，每天做的都是枯燥的数据列表。

今天我们就做点有意思的，使用鸿蒙的ArkTs语言开发一款五子棋游戏。

可能很多友友看到效果图会觉得束手无策，无从下手。不要怕，我先来讲一下思路：

界面上只有三种类型的图片：黑棋、白棋和棋盘，我们要做的就是在手指点击的位置添加指定颜色的棋子，并把它的位置校正到最近的十字格上。是不是也没那么难？

那我们就分析一下怎么布局。首先棋盘和棋子肯定是叠加的方式，黑白棋子乍一看像是网格布局，但是这里我们需要设置准确的位置，所以我使用Row容器，并设置position。先放两颗棋子试试看：


Stack({ }) {
        Column(){
          Image('/image/bord.png')
            .width(this.boardImageSize)
            .height(this.boardImageSize)

        }.width('100%').height('100%').backgroundColor('rgb(251,232,203)').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)

        Flex({direction:FlexDirection.Column}){
            Row(){
              Image('/image/blackChess.png')
                .width(this.chessEnableSize)
                .height(this.chessEnableSize)
            }
            .justifyContent(FlexAlign.Center)
            .alignItems(VerticalAlign.Center)
            .width(this.chessZoneSize)
            .height(this.chessZoneSize)
            .position({x: 10,y:10})

            Row(){
              Image('/image/whiteChess.png')
                .width(this.chessEnableSize)
                .height(this.chessEnableSize)
            }
            .justifyContent(FlexAlign.Center)
            .alignItems(VerticalAlign.Center)
            .width(this.chessZoneSize)
            .height(this.chessZoneSize)
            .position({x: 120,y:120})
        }
        .width(this.boardEnableSize)
        .height(this.boardEnableSize)
      }

虽然已经有些模样了，但是棋子并没有全都落在十字中间。该怎么做呢，分享一下我的思路，看图：

先确定图中的蓝色框内每一个格子的大小是24，每一行14个，但是我们要使用的是十字格，每一行只有13个。所以真正的游戏区域看似是蓝色框，其实是红色框，我把红色框分成13个绿色格子，每一个绿色格子的尺寸正好是24，而且中心点都落在十字上。

我说的再简单一点，棋子的落点范围只能在红色框内的十字上，且每一个格子和棋子的大小都是24，所以，我以红框的左上角为原点，只要棋子的x坐标和y坐标都是24的倍数，就能准确的落在十字上。所以上面的代码要改一下position：

然后我们要给Stack容器添加点击事件，获取点击的坐标，并在点击的位置添加棋子。有一个问题，我们很难做到每一次都准确的点击到十字中间，所以获取到的坐标要对24取整，得到的值乘以24就是最近的十字格，然后把得到的坐标存入数组，界面上使用Foreach循环渲染即可。

 let x = event.screenX - parseFloat(event.target.area.globalPosition.x.toString())
 let y = event.screenY - parseFloat(event.target.area.globalPosition.y.toString())
 let xv = x/24
 let yv = y/24
 let areaChess = {
      'x': parseInt(xv.toString()),
      'y': parseInt(yv.toString())
      }
 if(this.blackTurns){
      this.blackChesses.push(areaChess)
 }else {
      this.whiteChesses.push(areaChess)
 }

界面布局完成之后，真正的难点来了，怎么判断棋盘上有没有五子连珠？

强调一下，我刚才存入数组的是棋子的坐标，24的倍数，举个例子：


白棋：
[
   {'x':10,'y':5},
   {'x':3,'y':4},
   {'x':2,'y':3},
   {'x':7,'y':7},
]

黑棋：
[
   {'x':9,'y':4},
   {'x':5,'y':6},
   {'x':4,'y':3},
   {'x':8,'y':6},
]

某一方要完成五子连线的话，首先棋子数要达到5，然后我把棋子数组以x值进行从小到大排序。这样的话我再去遍历数组，五子连线只存在以下几种情况：

可以总结出规律：连成线的五颗棋子x值要么相等，要么是连续的5个数字，并且对应的y值也是这样。这样算法就不难写了：

//排序
this.sortarr = this.sortarr.sort(function (a: Object, b: Object) {
    return a['x'] - b['x'];
});
//遍历
for(let i=0;i<this.sortarr.length - 4;i++){
    let item1 = this.sortarr[i]
    let item2 = this.sortarr[i+1]
    let item3 = this.sortarr[i+2]
    let item4 = this.sortarr[i+3]
    let item5 = this.sortarr[i+4]

    let x1 = item1['x'];
    let x2 = item2['x'];
    let x3 = item3['x'];
    let x4 = item4['x'];
    let x5 = item5['x'];

    let y1 = item1['y'];
    let y2 = item2['y'];
    let y3 = item3['y'];
    let y4 = item4['y'];
    let y5 = item5['y'];

    if(x2-x1 == x3-x2 && x4-x3 == x2-x1 && x5-x4 == x2-x1 && x2-x1<2){
      if(y2-y1 == y3-y2 && y4-y3 == y2-y1 && y5-y4 == y2-y1 && y2-y1<2 && y2-y1>-2 ){
        if(isBlack){
          console.log("黑棋赢了！！！！！！！！！")
        }else {
          console.log("白棋赢了！！！！！！！！！")
        }

      }
    }
}

搞定了，就这么简单。需要此次完整源码，请点击下方链接获取

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料