鸿蒙元服务实战 - 笑笑五子棋（4）

作者：万少

2025-01-06
江苏
本文字数：1919 字
阅读完需：约 6 分钟

鸿蒙元服务实战-笑笑五子棋（4）

我们在这一章节主要实现五子棋的基本逻辑

核心目录结构

├─ets│  ├─entryability│  │      EntryAbility.ets│  ││  ├─entryformability│  │      EntryFormAbility.ets│  ││  ├─pages│  │      Index.ets│  ││  ├─views│  │      About.ets│  │      Home.ets│  ││  └─widget│      └─pages│              WidgetCard.ets│└─resources    ├─base    │  ├─element    │  │      color.json    │  │      float.json    │  │      string.json    │  │    │  ├─media    │  │      right.svg    │  │      startIcon.png    │  │    │  └─profile    │          form_config.json    │          main_pages.json    │    ├─en_US    │  └─element    │          string.json    │    ├─rawfile    └─zh_CN        └─element                string.json

复制代码

沉浸式设计

entry/src/main/ets/entryability/EntryAbility.ets 中统一设置
页面通过 padding 避开顶部和底部

AtomicServiceTabs

AtomicServiceTabs是元服务独有的 tab 组件。Tabs 组件后续不再支持在元服务中进行使用。，对 Tabs 组件一些不需提供给用户自定义设计的属性进行简化，限制最多显示 5 个页签，固定页签样式，位置和大小。

基本用法

AtomicServiceTabs({  // 内容  tabContents: [    () => {      // 自定义构建函数      this.tabContent1();    },    () => {      // 自定义构建函数      this.tabContent2();    },  ],  // 标题  tabBarOptionsArray: [    new TabBarOptions(      $r("sys.media.save_button_picture"),      "玩吧",      "#666",      "#07C160"    ),    new TabBarOptions($r("sys.media.AI_keyboard"), "关于", "#666", "#07C160"),  ],  // 标题显示的位置  tabBarPosition: TabBarPosition.BOTTOM,  // 背景颜色  barBackgroundColor: 0xffffff,});

复制代码

Home 和 About

Home 表示首页，用来显示主要内容

About 表示关于，用来存放项目的基本信息

他们目前都是普通的组件，分别放在 tabContent1 和 tabContent2 内

引入 canvas

在 Home 中开始引入 canvas

@Componentexport struct Home {  settings: RenderingContextSettings = new RenderingContextSettings(true);  ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  build() {    Column() {      Canvas(this.ctx)        .width(width)        .height(width)        .backgroundColor(Color.Orange)    }    .width("100%")    .height("100%")    .justifyContent(FlexAlign.Center)  }}

复制代码

绘制棋盘

绘制棋盘的思路如下：

确定要绘制多少个格子。
每一个格子多大

这里的想法比较简单：

确定要绘制的格子是 15 个。
每一个格多大，由屏幕宽度决定。比如屏幕宽度的 90%，然后分成 15 份。每一份就是格子的宽度
然后封装描绘画面的方法 drawBoard

// 绘制棋盘drawBoard = () => {  this.ctx.clearRect(0, 0, width, height);  // 绘制网格  this.ctx.strokeStyle = "#000";  this.ctx.lineWidth = 1;  for (let i = 0; i < this.gridSize; i++) {    this.ctx.beginPath();    this.ctx.moveTo(this.cellSize * i, 0);    this.ctx.lineTo(this.cellSize * i, height);    this.ctx.stroke();
    this.ctx.beginPath();    this.ctx.moveTo(0, this.cellSize * i);    this.ctx.lineTo(width, this.cellSize * i);    this.ctx.stroke();  }};

复制代码

canvas 准备好的时候开始绘制

点击下棋

点击下棋要是做挺多的处理的，比如：

当前是下黑棋还是白棋
下完这一子之后，胜利了还是继续下。

我们开始吧：

初始化棋盘数据，它是一个二维数组，下棋的时候，其实也是往里面填充内容
初始化当前下棋的角色设定 1：黑旗，2：白旗
声明初始化棋盘的函数，负责初始化棋盘数据和描绘棋盘
声明点击棋盘事件，事件中执行下棋逻辑
调整 drawBoard 函数，根据 this.board[row][col] 描绘出旗子
效果

判断输赢

五子棋判断输赢的方法比较简单，只需要知道是否有五子连珠就行

定义判断输赢的方法 checkWin
在点击下棋时判断是否输赢 handleClick
在 handleClick中判断输赢后，再做后续的一些小逻辑
如还没决定输赢，继续下棋
决定输赢了，弹出对话框恭喜胜利者，询问是否还要再下一盘。。
完整代码
效果

总结

本章节多了一些业务的具体实现，尤其是下棋的一些逻辑处理上。

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯，欢迎在评论区留言或者私信或者看我个人信息，可以加入技术交流群。

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/37960c0cb7e5489a93b6f29e3】。文章转载请联系作者。

万少

关注

还未添加个人签名 2021-12-02 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙元服务实战 - 笑笑五子棋（4）

鸿蒙元服务实战-笑笑五子棋（4）

核心目录结构

沉浸式设计

AtomicServiceTabs

基本用法

Home 和 About

引入 canvas

绘制棋盘

点击下棋

判断输赢

总结

万少

评论