鸿蒙ArkTS+ArkUI实现五子棋游戏

鸿蒙ArkTS+ArkUI实现五子棋游戏

前言

  近期，鸿蒙系统热度飙升，引发了周围浩繁朋友的热烈探讨。出于这份浓厚的好奇心，我初步浏览了其官方文档，发现信息量庞大，全面消化需耗时很久并考验人的毅力。自踏入编程范畴以来，我不停秉持着“实践出真知”的原则，倾向于在动手操纵中意会文字背后的深意。恰逢我之前已利用Java和Python成功开辟过五子棋游戏，一个念头油然而生：何不借助鸿蒙系统，再次挑衅这一经典游戏的项目实践呢？正是这份灵感与刻意，催生了本篇文章的诞生。
  让我们一同利用鸿蒙系统，将五子棋游戏从Java和Python的实践迁移到鸿蒙平台，通过亲身实践深入明白鸿蒙的开辟魅力。这不但是一次技术尝试，更是一场布满乐趣与成长的学习之旅。
结果图

技术栈

• 版本：HarmonyOS 5.0.3(15)
  
• 编程语言：ArkTS
  
• UI框架：ArkUI
  

源码

  这里只展示pages文件下的代码，如要获取整个项目，可以访问我的GitHub堆栈，不知道堆栈地址的朋友可以私聊我获取。

Index.ets —— 开始界面

1. import { font, router } from '@kit.ArkUI';
3. @Entry
4. @Component
5. struct Index {
6.   // 注册字体
7.   aboutToAppear() {
8.     font.registerFont({
9.       familyName: $r('app.string.index_title_font_name'),
10.       familySrc: $r('app.string.index_title_font_src'),
11.     })
12.   }
14.   build() {
15.     Column() {
16.       Row() {
17.         Text($r("app.string.index_title"))
18.           .fontSize($r('app.float.title_text_font_size'))
19.           .fontWeight(FontWeight.Bold)
20.           .fontFamily('SThuawenxingkai')
21.       }
23.       Row() {
24.         Button() {
25.           Text($r("app.string.start_button_text"))
26.             .fontSize(20)
27.             .fontWeight(FontWeight.Bold)
28.             .fontColor('#000')
29.             .fontFamily('SThuawenxingkai')
30.         }
31.         .onClick(() => {
32.           router.pushUrl({ url: "pages/Second" })
33.         })
34.         .type(ButtonType.Capsule)
35.         .startButtonStyle()
36.       }
37.     }
38.     .height('100%')
39.     .width('100%')
40.     .justifyContent(FlexAlign.Center)
41.     .backgroundImage($r("app.media.background_img"))
42.     .backgroundImageSize(ImageSize.Cover)
43.   }
45.   @Styles
46.   startButtonStyle() {
47.     .margin({
48.       top: 20
49.     })
50.     .backgroundColor($r('sys.color.button_background_color_transparent'))
51.     .width('40%')
52.     .height('6%')
53.     .borderRadius(20)
54.     .shadow({
55.       radius: 10,
56.       color: '#000',
57.       offsetX: 0,
58.       offsetY: 5
59.     })
60.   }
61. }

复制代码

Second.ets —— 游戏界面

1. // 坐标类型
2. interface Coord {
3.   x: number;
4.   y: number;
5.   color: boolean;
6. }
8. @Entry
9. @Component
10. struct Index {
11.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
12.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
13.   // 棋盘起始坐标
14.   board_x: number = 0
15.   board_y: number = 0
16.   // 棋盘宽度
17.   board_width: number = 0
18.   // 棋盘线的间距
19.   line_spacing: number = 0
20.   // true黑 false白
21.   chess_color: boolean = true
22.   // 棋子坐标
23.   chess_coord: Coord[] = []
25.   build() {
26.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
27.       Canvas(this.context)
28.         .width('100%')
29.         .height('100%')
30.         .backgroundColor($r("sys.color.ohos_id_color_background"))
31.         .onReady(() => {
32.           this.init()
33.         })
34.         .onClick((e) => {
35.           this.drawChess(e.x, e.y)
36.         })
37.         .backgroundImage($r("app.media.background_img"))
38.         .backgroundImageSize(ImageSize.Cover)
39.     }
40.     .width('100%')
41.     .height('100%')
42.   }
44.   // 初始化棋盘方法
45.   init() {
46.     // 计算宽度，适配横屏
47.     if (this.context.width < this.context.height) {
48.       this.board_width = this.context.width - 40
49.     } else {
50.       this.board_width = this.context.height - 40
51.     }
52.     this.board_x = (this.context.width - this.board_width) / 2
53.     this.board_y = (this.context.height - this.board_width) / 2
54.     // 绘制正方形
55.     this.context.lineWidth = 4
56.     this.context.fillStyle = '#DBC26F'; // 设置填充颜色
57.     this.context.strokeStyle = '#000'
58.     this.context.fillRect(this.board_x, this.board_y, this.board_width, this.board_width); // 填充圆形
59.     this.context.strokeRect(this.board_x, this.board_y, this.board_width, this.board_width)
61.     // 计算棋盘线间距
62.     this.line_spacing = this.board_width / 14
63.     this.context.beginPath(); // 开始新路径
64.     this.context.lineWidth = 2
65.     for (let i = 0; i < 14; i++) {
66.       this.context.moveTo(this.board_x, this.board_y + i * this.line_spacing)
67.       this.context.lineTo(this.board_x + this.board_width, this.board_y + i * this.line_spacing)
68.     }
69.     for (let i = 0; i < 14; i++) {
70.       this.context.moveTo(this.board_x + i * this.line_spacing, this.board_y)
71.       this.context.lineTo(this.board_x + i * this.line_spacing, this.board_y + this.board_width)
72.     }
73.     this.context.stroke() // 绘制
75.     // 绘制棋盘上的五个点
76.     const points: Coord[] = [
77.       { x: 3, y: 3, color: true },
78.       { x: 11, y: 3, color: true },
79.       { x: 3, y: 11, color: true },
80.       { x: 11, y: 11, color: true },
81.       { x: 7, y: 7, color: true }
82.     ];
84.     this.context.fillStyle = '#000'; // 设置填充颜色
85.     this.context.lineWidth = 1; // 设置描边宽度
87.     for (const point of points) {
88.       this.context.beginPath(); // 新路径
89.       const x = this.board_x + this.line_spacing * point.x;
90.       const y = this.board_y + this.line_spacing * point.y;
91.       this.context.arc(x, y, 4, 0, 2 * Math.PI); // 绘制圆形路径
92.       this.context.fill(); // 填充圆形
93.     }
94.   }
96.   // 绘制棋子
97.   drawChess(x: number, y: number) {
98.     // 判断点击区域是否在棋盘内
99.     if (x >= this.board_x && x <= this.board_x + this.board_width && y >= this.board_y &&
100.       y <= this.board_y + this.board_width) {
102.       // 判断并设置棋子颜色
103.       if (this.chess_color) {
104.         this.context.fillStyle = '#000';
105.       } else {
106.         this.context.fillStyle = '#FFF';
107.       }
109.       // 修正坐标
110.       x = Math.round((x - this.board_x) / this.line_spacing);
111.       y = Math.round((y - this.board_y) / this.line_spacing);
113.       // 判断是否已经有棋子
114.       for (const coord of this.chess_coord) {
115.         if (coord.x === x && coord.y === y) {
116.           return
117.         }
118.       }
120.       // 绘制棋子
121.       this.context.strokeStyle = '#000'; // 设置描边颜色
122.       this.context.beginPath(); // 新路径
123.       this.context.arc(x * this.line_spacing + this.board_x, y * this.line_spacing + this.board_y,
124.         this.line_spacing / 2 - 1, 0, 2 * Math.PI); // 绘制圆形路径
125.       this.context.fill(); // 填充圆形
126.       this.context.stroke(); // 描边圆形
128.       // 加入棋子坐标
129.       this.chess_coord.push({ x, y, color: this.chess_color })
131.       // 判断是否五子连珠
132.       this.checkLink()
134.       // 切换棋子颜色
135.       this.chess_color = !this.chess_color
137.     }
138.   }
140.   // 判断是否五子连珠
141.   checkLink() {
142.     if (!this.chess_coord || this.chess_coord.length === 0) {
143.       return;
144.     }
146.     const lastCoord = this.chess_coord[this.chess_coord.length - 1];
147.     const directions: [number, number][] = [
148.       [1, 0], // 垂直方向
149.       [0, 1], // 水平方向
150.       [1, 1], // 右对角线
151.       [-1, 1]// 左对角线
152.     ];
154.     for (const direction of directions) {
155.       for (let method = 0; method < 5; method++) {
156.         const linkingCoords: Coord[] = [];
157.         for (let i = 0; i < 5; i++) {
158.           const newCoord: Coord = {
159.             x: lastCoord.x + direction[0] * (i - method),
160.             y: lastCoord.y + direction[1] * (i - method),
161.             color: lastCoord.color
162.           };
164.           const found = this.chess_coord.find(coord =>
165.           coord.x === newCoord.x && coord.y === newCoord.y && coord.color === newCoord.color
166.           );
168.           if (found) {
169.             linkingCoords.push(found)
170.           }
171.         }
172.         if (linkingCoords.length >= 5) {
173.           linkingCoords.forEach(item => {
174.             console.log(item.x.toString(), item.y.toString(), item.color)
175.             this.context.strokeStyle = '#FEFE00'; // 设置描边颜色
176.             this.context.beginPath(); // 新路径
177.             this.context.arc(item.x * this.line_spacing + this.board_x, item.y * this.line_spacing + this.board_y,
178.               this.line_spacing / 2 - 1, 0, 2 * Math.PI); // 绘制圆形路径
179.             this.context.stroke(); // 描边圆形
180.           })
181.           AlertDialog.show({
182.             message: `恭喜${this.chess_color ? '黑棋' : '白棋'}，你赢了！`,
183.             cancel: () => {
184.               // 初始化棋盘
185.               this.chess_coord = []
186.               this.chess_color = true
187.               // 初始化棋盘
188.               this.context.clearRect(0, 0, this.context.width, this.context.height);
189.               this.init()
190.             }
191.           });
192.         }
193.       }
194.     }
195.   }
196. }

复制代码

竣事语

  经过这一系列的探索与实践，我们不但成功地将五子棋游戏实现到了鸿蒙系统之上，更在这一过程中深刻体会到了鸿蒙平台的强盛功能与无穷潜力。从初步打仗鸿蒙的渺茫，到逐步熟悉并掌握其开辟技巧，每一次挑衅都见证了我们的成长与进步。如今，回首这段旅程，我们劳绩的不但仅是技术上的提升，更有对编程热爱的加深，以及对未来无穷可能的向往。愿这份经历可以或许鼓励更多开辟者，勇敢地在鸿蒙的世界里探索、实践、创新，共同书写属于我们的精彩篇章。
  由于我也是初学者，现在实现的功能非常简朴，如果后续有功能的更新，将实时更新到GitHub堆栈。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。