鸿蒙开发入门实战案例-五子棋游戏（附源码）_围棋定式助记应用鸿蒙代码(4)

于 2024-04-21 14:06:34 发布
阅读量905 收藏 19
点赞数 14
分类专栏： 2024年程序员学习 文章标签： harmonyos 游戏 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84159911/article/details/138032697
版权

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
img

img
img
htt

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）
img

正文

今天我们就做点有意思的，使用鸿蒙的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）最新学习路线

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
img

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

止，不再深入研究，那么很难做到真正的技术提升。**

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
[外链图片转存中…(img-kuvth18v-1713679583073)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84159911
关注
  • 14
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制中国象棋
PPaio的博客
08-27 447
const draw = (id) => { let pieces = [ //黑 { x: 0, y: 0, name: "車", type: "black" }, { x: 1, y: 0, name: "馬", type: "black" }, { x: 2, y: 0, name: "象", type: "black" }, { x: 3, y: 0, name: "仕", type: "black".
java简易五子棋源代码+图片素材（图形界面）
10-29
本人是学生，闲暇之余写的五子棋小程序（个人感觉不错），通俗易懂适合刚刚入门的同学学习。喜欢的可以下载一下，谢谢各位客官老爷。
鸿蒙开发入门实战案例-五子棋游戏（附源码）
shudaoshanQAQ的博客
03-05 1335
鸿蒙实战案例-五子棋游戏（附源码）
【Demo见真章】基于HarmonyOS手机实现五子棋对战小游戏
华为开发者联盟
02-22 2489
一、功能介绍： 基于鸿蒙JAVA SDK开发的一款五子棋小游戏，自带简单AI。 二、开发要点： 鸿蒙代码结构， Ability、Slice等组件使用，xml布局文件编写 自定义Component开发，layout、canvas绘图，位图操作，点击事件处理 三、源码 限于精力有限，未写详细说明文档，请参考源码地址： https://github.com/cuiqingandroid/hmos_fivechess 四、游戏截图 原文链接：https://developer.huawei.com/consum
鸿蒙小案例-五子棋
幻凡ss
02-20 759
鸿蒙小案例-五子棋
基于鸿蒙js框架实现的wearable五子棋软件.rar
06-14
基于鸿蒙js框架实现的wearable五子棋软件
【鸿蒙项目实战】基于鸿蒙服务卡片的分布式游戏：找我
08-07
本课程将以一个鸿蒙（HarmonyOS）App作为基础讲解如何使用Java开发鸿蒙App。这个App是一个基于鸿蒙服务卡片的游戏，类似“连连看”。这款游戏涉及到的技术如下： 1. 组件的使用（Button、Text、ListContainer）2. 服务卡片的基本使用方法3. 服务卡片之间的交互4. FA（Page Ability的使用方法）5. FA的流转6. 获取设备列表7. 数据库技术8. 网络技术9. 多线程技术10. 国际化   
鸿蒙OpenHarmony开发实战-0开始做游戏渲染引擎
m0_62167422的博客
01-02 1347
首先实现了一个通用的画廊组件来作为练手项目，它主要使用了四个基础组件和容器组件：我们放置一个按钮来触发 showGallery 方法，该方法控制 panel 弹出式组件的显示和隐藏，这里的 div 和 button 标签就是 hml 内置的组件，跟我们平常写 html 很相似，它支持我们大部分的常规属性如 id ，class 和 type 等，方便我们用来设置组件基本标识和外观特征显示。
20年老程序员谈谈：鸿蒙开发会成为下一个java吗？_鸿蒙程序员怎么样(1)
2401_84150320的博客
04-15 915
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。而鸿蒙开发也是一个这样的新风口。互联网大厂都是行业的领头羊和先行者，鸿蒙系统无疑将成为一个新的发展趋势，现在成为第一波投入学习成本的人将获得时间优势，在鸿蒙系统开发在市场广泛流行之前掌握先机，自然有更大的机会进入大厂工作!
python项目开发实战_简易五子棋游戏-控制台版_编程案例实例详解课程教程.pdf
12-25
五子棋是中国古代的传统黑白棋种之一。五子棋不仅能増强思维能力,提高智力,而且富含哲理,有助于修身养性。...本章将使用 Python语言开发一个彩色的控制台版五子棋游戏,以便让用户熟悉五子棋游戏的实现原理。
安卓期末大作业-五子棋游戏源码+数据库+使用文档（高分项目）
最新发布
06-12
安卓期末大作业-五子棋游戏源码+数据库+使用文档（高分项目）高分项目期末大作业开发的97分高分设计项目，可作为高分课程设计和期末大作业的参考，含有代码注释小白也可看的懂，有能力的小伙伴也可以在此基础上进行...
UNITY3D五子棋完好代码及图片
06-04
用unity3D已编好的五子棋软件，是个新手，可能不太好看，特效也比较差，敬请原谅
C语言项目实战源码-课程设计源码-毕业设计源码-游戏源码-c语言五子棋源码
06-01
C语言项目实战源码-课程设计源码-毕业设计源码-游戏源码-c语言五子棋源码
qt-使用qt开发的五子棋小游戏-附项目源码.zip
01-24
qt qt_使用qt开发的五子棋小游戏_附项目源码
简化后--人机五子棋.zip_dozenlqo_labview_labview五子棋_labview游戏_五子棋
07-14
labview五子棋小游戏，可以来看看哦，、很不错
中国象棋——即时类游戏
hjy的博客
03-08 566
象棋——即时类游戏 对于即时类应用或者即时类的游戏，HTTP协议很多时候无法满足我们的需求。而Socket对于即时类通信软件和游戏软件来说无疑是最好的选择。这篇文章介绍的象棋游戏采用的是服务器/客户端的模式，界面都是根据AWT和Swing编程所实现的，通过这篇文章你可以主要了解到ServerSocket、Socket、多线程，而AWT和Swing的编程并不是重点。至于要不要学Swing及AW
OpenHarmony分布式五子棋-使用Canvas组件 实现棋盘、棋子的绘制
2401_82546228的博客
04-01 1058
五子棋是一款比较流行的棋类游戏，此游戏使用分布式数据管理功能开发完成的。
鸿蒙开发入门实战案例-五子棋游戏（附源码）_鸿蒙围棋定式案例
2401_84159839的博客
04-16 587
有一个问题，我们很难做到每一次都准确的点击到十字中间，所以获取到的坐标要对24取整，得到的值乘以24就是最近的十字格，然后把得到的坐标存入数组，界面上使用Foreach循环渲染即可。我说的再简单一点，棋子的落点范围只能在红色框内的十字上，且每一个格子和棋子的大小都是24，所以，我以红框的左上角为原点，只要棋子的x坐标和y坐标都是24的倍数，就能准确的落在十字上。界面布局完成之后，真正的难点来了，怎么判断棋盘上有没有五子连珠？console.log(“黑棋赢了！console.log(“白棋赢了！
编写五子棋的完整python代码_python制作简单五子棋游戏
06-08
好的，以下是一个简单的五子棋游戏的Python代码： ```python import numpy as np # 定义棋盘大小 BOARD_SIZE = 15 class Board(): def __init__(self): self.board = np.zeros((BOARD_SIZE, BOARD_SIZE), dtype=int) self.player = 1 def move(self, x, y): # 检查是否合法落子 if self.board[x][y] == 0: self.board[x][y] = self.player self.player = 3 - self.player # 切换玩家 return True else: return False def check_win(self): # 检查行 for i in range(BOARD_SIZE): for j in range(BOARD_SIZE - 4): if (self.board[i][j] == self.board[i][j+1] == self.board[i][j+2] == self.board[i][j+3] == self.board[i][j+4]) and self.board[i][j] != 0: return self.board[i][j] # 检查列 for i in range(BOARD_SIZE - 4): for j in range(BOARD_SIZE): if (self.board[i][j] == self.board[i+1][j] == self.board[i+2][j] == self.board[i+3][j] == self.board[i+4][j]) and self.board[i][j] != 0: return self.board[i][j] # 检查正对角线 for i in range(BOARD_SIZE - 4): for j in range(BOARD_SIZE - 4): if (self.board[i][j] == self.board[i+1][j+1] == self.board[i+2][j+2] == self.board[i+3][j+3] == self.board[i+4][j+4]) and self.board[i][j] != 0: return self.board[i][j] # 检查反对角线 for i in range(BOARD_SIZE - 4): for j in range(4, BOARD_SIZE): if (self.board[i][j] == self.board[i+1][j-1] == self.board[i+2][j-2] == self.board[i+3][j-3] == self.board[i+4][j-4]) and self.board[i][j] != 0: return self.board[i][j] # 没有胜者 return 0 def print_board(self): print(" ", end="") for i in range(BOARD_SIZE): print("{0:2d}".format(i), end="") print() for i in range(BOARD_SIZE): print("{0:2d}".format(i), end=" ") for j in range(BOARD_SIZE): if self.board[i][j] == 1: print("●", end="") elif self.board[i][j] == 2: print("○", end="") else: print("＋", end="") print() board = Board() while True: board.print_board() print("轮到玩家 {0} 落子".format(board.player)) x = int(input("请输入落子横坐标：")) y = int(input("请输入落子纵坐标：")) if board.move(x, y): winner = board.check_win() if winner != 0: board.print_board() print("玩家 {0} 获胜".format(winner)) break else: print("落子不合法，请重新落子") ``` 这段代码定义了一个类`Board`，它包含了棋盘、玩家以及相关的方法，如落子、检查胜利等。在程序中，先创建一个`Board`对象，然后循环进行游戏。每轮循环中，先打印当前棋盘，并询问当前玩家要落子的位置。如果落子合法，则判断是否有胜者。如果有胜者，则打印出胜者，并跳出循环。如果落子不合法，则提示重新落子。 注意：这段代码只是一个简单的五子棋游戏，还有很多优化和功能可以添加。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值