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

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

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

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

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

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

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

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

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

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

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

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

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