OpenHarmony分布式五子棋-使用Canvas组件 实现棋盘、棋子的绘制

已于 2024-04-03 13:46:44 修改
阅读量1.1k 收藏 13
点赞数 24
分类专栏： 鸿蒙 鸿蒙工程师 HarmonyOS 文章标签： harmonyos OpenHarmony 鸿蒙开发 鸿蒙 鸿蒙应用开发 鸿蒙工程师 HarmonyOS
于 2024-04-01 17:46:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/137241306
版权
鸿蒙 同时被 3 个专栏收录
567 篇文章 1 订阅
订阅专栏
鸿蒙工程师
567 篇文章 5 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏

介绍

五子棋是一款比较流行的棋类游戏，此游戏使用分布式数据管理功能开发完成的。

本示例使用Canvas组件 实现棋盘、棋子的绘制，使用分布式数据管理 实现两台设备间数据的同步。

本示例使用分布式设备管理能力接口@ohos.distributedDeviceManager。

分布式数据管理接口@ohos.data.distributedData。

效果预览

首页

使用说明：

1.启动应用，同一个网络下两台设备都确认权限后，一台设备退出。点击右上角流转按钮，选择需要拉起的远程设备，点击后拉起远程设备，第一次拉起设备时，若未进行认证，输入认证码进行认证，认证成功后拉起远程设备。

2.游戏过程中，本地设备的用户可以重开，悔棋，远程设备无此功能。下子时，在棋盘某位置点击第一次时预下子，若确定下在该位置，继续点击该位置，若不确定，点击其他位置即可。若远程设备因特殊原因退出或者掉线，本地设备可重新拉起远程设备，拉起后，本地设备点击棋盘任意位置，数据会同步到远程设备，继续进行未完成的游戏。

工程目录

entry/src/main/ets/
|---pages
|   |---index.ets                           // 五子棋首页
|   |---DeviceDialog.ets                    // 选择设备模块
|   |---TitleBar.ets                        // 标题导航栏
|---model                                  
|   |---DistributedDataModel.ts             // 分布式数据模块
|   |---KvStoreModel.ts                     // KvStore数据模块
|   |---RemoteDeviceModel.ts                // 管理分布式设备模块
|---util                                    
|   |---GobangConst.ts                      // 定义游戏用到的初始值

具体实现

  • 管理分布式设备（节点）
    1、创建设备管理对象，并指定参数kvstore应用包deviceManager.createDeviceManager("ohos.samples.distributeddatagobang", (error, value) => {})
    2、获取可信设备列表"this.deviceManager.getTrustedDeviceListSync()"。
    3、监听设备状态"this.deviceManager.on('deviceStateChange', (data) => {})"。
  • 分布式数据管理
    1、页面初始化时获取此应用所需能力，引入@ohos.data.distributedData初始化分布式数据库，并使用kvstore.on对数据change进行监听，通过appstorge判断获取相应的key判断是否是分布式节点。
    2、如果是分布式节点，如果数据发生变化处理数据，使用this.kvManager.getKVStore()通过指定Options和storeId，创建并获取KVStore数据库。以及添加键值对到数据库this.kvStore.put(key, value) 
    3、页面通过kvStore对象进行增删改查会触发其他已连接设备的kvStore.on监听。
  • 游戏规则编写
    1、init()函数初始化游戏规则，通过canvas组件绘制棋盘背景和棋子，游戏状态为开始，共计回合为0，并生成棋盘。源码参考 2、触发onClick函数，每click一次，清除一次canvas，数组中添加当前棋子，重绘。 3、当在A盘，且步长是偶数，表示B下的棋子会在A盘显示，绘制确定好的棋子，例如：this.deviceFlag === 'A' && this.distributedData.step % 2 === 0; 4、当在B盘，且步长是奇数，表示A下的棋子会在B盘显示，绘制确定好的棋子，例如：this.deviceFlag === 'B' && this.distributedData.step % 2 !== 0; 5、如果A盘重开(isRestart=true)，那B盘就要清空棋子;不重开(isRestart=false)时，B盘正常显示。

相关权限

允许不同设备间的数据交换：ohos.permission.DISTRIBUTED_DATASYNC

允许系统应用获取分布式设备的认证组网能力：ohos.permission.ACCESS_SERVICE_DM

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行，支持设备：RK3568。

2.本示例为Stage模型，支持API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)。

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

4.本示例需要使用@ohos.distributedDeviceManager系统权限的系统接口。使用Full SDK时需要手动从镜像站点获取，并在DevEco Studio中替换，具体操作可参考替换指南 。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/Solutions/Game/DistributedDataGobang/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

为了帮助大家更深入有效的学习到鸿蒙开发知识点，小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源，获取完整版方式请点击→《HarmonyOS教学视频》

HarmonyOS教学视频：语法ArkTS、TypeScript、ArkUI等…视频教程

鸿蒙生态应用开发白皮书V2.0PDF：

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF (qq.com)》

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

  1. 应用开发导读(ArkTS)
  2. .……

在这里插入图片描述


二、HarmonyOS 概念

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全
  5. …

在这里插入图片描述

三、如何快速入门？《》

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. .……

在这里插入图片描述


四、开发基础知识

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. .……

在这里插入图片描述


五、基于ArkTS 开发

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 7.网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. .……

在这里插入图片描述


更多了解更多鸿蒙开发的相关知识可以参考：《鸿蒙 (Harmony OS)开发学习手册 (qq.com)》

码牛程序猿
关注
  • 24
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于鸿蒙js框架实现的wearable五子棋软件.rar
06-14
基于鸿蒙js框架实现的wearable五子棋软件
react-sketch-canvas：使用SVG绘制的React组件
02-06
要求需要React 16.4 取决于和想在使用之前测试React Sketch Canvas吗？ 试试安装如果您使用npm npm i react-sketch-canvas 或与纱线yarn add react-sketch-canvas例常见用法示例import React from "react" ;import {...
鸿蒙开发入门实战案例-五子棋游戏（附源码）
shudaoshanQAQ的博客
03-05 1529
鸿蒙实战案例-五子棋游戏（附源码）
鸿蒙小案例-五子棋
幻凡ss
02-20 820
鸿蒙小案例-五子棋
鸿蒙开发入门实战案例-五子棋游戏（附源码）_围棋定式助记应用鸿蒙代码(4)
最新发布
2401_84159911的博客
04-21 932
有一个问题，我们很难做到每一次都准确的点击到十字中间，所以获取到的坐标要对24取整，得到的值乘以24就是最近的十字格，然后把得到的坐标存入数组，界面上使用Foreach循环渲染即可。我说的再简单一点，棋子的落点范围只能在红色框内的十字上，且每一个格子和棋子的大小都是24，所以，我以红框的左上角为原点，只要棋子的x坐标和y坐标都是24的倍数，就能准确的落在十字上。界面布局完成之后，真正的难点来了，怎么判断棋盘上有没有五子连珠？console.log(“黑棋赢了！console.log(“白棋赢了！
如何通过ArkTS卡片的Canvas自定义绘制能力实现五子棋游戏卡片
m0_70749039的博客
04-02 1223
本示例展示了如何通过ArkTS卡片的Canvas自定义绘制能力实现一个简单的五子棋游戏卡片。
20年老程序员谈谈：鸿蒙开发会成为下一个java吗？_鸿蒙程序员怎么样(1)
2401_84150320的博客
04-15 947
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。而鸿蒙开发也是一个这样的新风口。互联网大厂都是行业的领头羊和先行者，鸿蒙系统无疑将成为一个新的发展趋势，现在成为第一波投入学习成本的人将获得时间优势，在鸿蒙系统开发在市场广泛流行之前掌握先机，自然有更大的机会进入大厂工作!
canvas绘制五子棋
qq_21277357的博客
01-02 125
【代码】canvas绘制五子棋。
实战项目教你一步步写完五子棋
qq_45893999的博客
06-03 2312
文章目录开发工具效果展示逻辑关系源代码 开发工具 VS2013 easyx图形库 官网下载 效果展示 逻辑关系 easyx网图形库的介绍与使用 initgraph函数的简介 设定背景色和图展示 如何调用easyx图形库 使用循环语句结合判断语句实现五子棋效果 五子棋的判断流程逻辑图 分板块各个布局的实现 获取鼠标点击事件 计算鼠标点击的位置 设置棋盘数据 从玩家点击事件上确定点击的位置 从每次的点击位置进行判断 胜利后重新开始游戏 最小化 源代码 #include<stdio.h> #in
鸿蒙开发入门实战案例-五子棋游戏（附源码）_鸿蒙围棋定式案例
2401_84159839的博客
04-16 604
有一个问题，我们很难做到每一次都准确的点击到十字中间，所以获取到的坐标要对24取整，得到的值乘以24就是最近的十字格，然后把得到的坐标存入数组，界面上使用Foreach循环渲染即可。我说的再简单一点，棋子的落点范围只能在红色框内的十字上，且每一个格子和棋子的大小都是24，所以，我以红框的左上角为原点，只要棋子的x坐标和y坐标都是24的倍数，就能准确的落在十字上。界面布局完成之后，真正的难点来了，怎么判断棋盘上有没有五子连珠？console.log(“黑棋赢了！console.log(“白棋赢了！
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ...
canvas完美绘制中国象棋棋盘
11-20
canvas绘制中国象棋棋盘，简单易懂的小Demo,想学canvas的小伙伴可以自行下载学习下
vue ---- 基于canvas的绘制海报组件
03-04
在这个组件中，Canvas成为了海报绘制的画布，开发者可以通过JavaScript API来控制每一像素的颜色、形状、文字等元素，实现高度自定义的视觉效果。 Vue组件化的特点在于将UI界面拆分成可复用的独立单元，每个单元都...
QML--Canvas画布实现矩形圆形等圈定
01-10
在QML中，Canvas是一个强大的组件，用于在用户界面上进行低级的图形绘制。它提供了JavaScript API，允许开发者直接在2D画布上绘制图形，包括但不限于矩形、圆形以及其他几何形状。QML（Qt Meta Language）是Qt框架的...
JS canvas绘制五子棋的棋盘
10-17
【JS Canvas绘制五子棋棋盘详解】 Canvas是HTML5中的一个强大特性，它允许开发者在网页上进行动态图形绘制。本教程将详细介绍如何利用JavaScript的Canvas API来创建一个五子棋的游戏棋盘。 首先，我们需要一个HTML...
canvas绘制国际棋盘
qq_24618061的博客
11-26 738
方法1，笨办法，一个一个黑白格子画，画到天亮。 方法2，for循环，一步到位。 完整代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ background:#f2f2f2; } </style> <s
【canvas画棋盘精简版】
trytryba的博客
06-28 355
程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用canvas画一个，网上找了几个，写的有些繁琐，自己改了一个。只有几十行代码。需要的拿去参考。
支持API 9的Sample已上新，速来拿走
HarmonyOSDev的博客
12-28 186
本Sample展示一款分布式五子棋游戏，该游戏基于分布式数据管理实现，使用Canvas组件实现棋盘、棋子的绘制，使用分布式数据管理实现设备间数据的同步。通过学习本Sample，可以掌握如何使用一套代码，实现应用在不同屏幕尺寸下，保持整体风格一致性的同时，还能保障各设备上应用界面体验的差异性。本Sample展示一个天气应用，包括首页、城市管理、添加城市、更新时间弹窗，体现一次开发，多端部署的能力。通过学习本sample，可以掌握数据的请求与响应，屏幕截图设置，文件管理，媒体服务等相关能力。
基于鸿蒙js框架实现的wearable五子棋软件
qym2005723的博客
06-14 655
我基于鸿蒙js框架开发了一个运行于wearable设备的五子棋软件。主要供大家交流学习使用。软件主要由三个page组成，主要逻辑在index中，其余用来显示输赢。 鸿蒙os每个page都由一个css，一个js，一个hml组成。hml编程方式与html极为相似。学过html的可以快速上手。 hml文件展示如下： <div> <image class="backcolor"></image> <text class="title">
uni-app中使用canvas五子棋
05-02
在uni-app中使用canvas实现五子棋可以按照以下步骤进行： 1. 创建canvas组件 在需要使用canvas的页面中，添加一个canvas组件： ```html <canvas class="chessboard" canvas-id="canvas"></canvas> ``` 2. 获取canvas上下文 在页面的`onLoad`生命周期函数中，获取canvas的上下文： ```js onLoad() { // 获取canvas上下文 this.ctx = uni.createCanvasContext('canvas', this); } ``` 3. 绘制棋盘 绘制棋盘可以使用`ctx`的绘图API，例如`ctx.beginPath()`、`ctx.moveTo()`、`ctx.lineTo()`等。具体的绘制方法可以参考以下代码： ```js drawChessboard() { const cellWidth = this.data.cellWidth; const boardWidth = this.data.boardWidth; const rows = this.data.rows; const cols = this.data.cols; const margin = this.data.margin; // 绘制棋盘背景 this.ctx.fillStyle = '#D1B18F'; this.ctx.fillRect(0, 0, boardWidth, boardWidth); // 绘制棋盘格线 this.ctx.beginPath(); for (let i = 0; i < rows; i++) { this.ctx.moveTo(margin + cellWidth / 2, margin + i * cellWidth + cellWidth / 2); this.ctx.lineTo(boardWidth - margin - cellWidth / 2, margin + i * cellWidth + cellWidth / 2); } for (let i = 0; i < cols; i++) { this.ctx.moveTo(margin + i * cellWidth + cellWidth / 2, margin + cellWidth / 2); this.ctx.lineTo(margin + i * cellWidth + cellWidth / 2, boardWidth - margin - cellWidth / 2); } this.ctx.stroke(); } ``` 4. 绘制棋子 绘制棋子可以使用`ctx.arc()`和`ctx.fill()`方法实现。具体的绘制方法可以参考以下代码： ```js drawChess(x, y, color) { const cellWidth = this.data.cellWidth; const margin = this.data.margin; const radius = cellWidth / 2 - margin; // 计算棋子的坐标 const cx = margin + x * cellWidth; const cy = margin + y * cellWidth; // 绘制棋子 this.ctx.beginPath(); this.ctx.arc(cx, cy, radius, 0, 2 * Math.PI); this.ctx.fillStyle = color; this.ctx.fill(); } ``` 5. 绑定事件 在canvas上绑定事件可以使用`canvas`组件的`@touchstart`、`@touchmove`、`@touchend`等事件。具体的绑定方法可以参考以下代码： ```html <canvas class="chessboard" canvas-id="canvas" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" ></canvas> ``` 6. 实现游戏逻辑 实现五子棋的游戏逻辑可以在页面的`methods`中进行。例如，判断胜负可以使用一个二维数组来记录棋盘上的棋子，然后通过遍历该数组来判断是否存在连成五个的棋子。具体的实现方法可以参考以下代码： ```js data() { return { // 棋盘格子的宽度 cellWidth: 30, // 棋盘的行数和列数 rows: 15, cols: 15, // 棋盘的宽度 boardWidth: 450, // 棋盘的边缘空白区域 margin: 15, // 棋子的颜色 chessColor: ['white', 'black'], // 当前下棋的玩家 currentPlayer: 0, // 棋盘上的棋子 chessboard: [], // 是否游戏结束 gameOver: false, }; }, onLoad() { this.ctx = uni.createCanvasContext('canvas', this); this.initChessboard(); this.drawChessboard(); }, initChessboard() { // 初始化棋盘 for (let i = 0; i < this.rows; i++) { this.chessboard[i] = []; for (let j = 0; j < this.cols; j++) { this.chessboard[i][j] = -1; } } }, onTouchStart(e) { // 获取触摸点的坐标 const x = e.touches[0].x; const y = e.touches[0].y; // 计算在棋盘中的位置 const i = Math.floor((y - this.data.margin) / this.data.cellWidth); const j = Math.floor((x - this.data.margin) / this.data.cellWidth); // 判断该位置是否为空 if (this.chessboard[i][j] === -1 && !this.gameOver) { // 绘制棋子 this.drawChess(j, i, this.chessColor[this.currentPlayer]); // 记录棋子 this.chessboard[i][j] = this.currentPlayer; // 判断是否胜利 if (this.checkWin(i, j, this.currentPlayer)) { this.gameOver = true; uni.showToast({ title: `玩家${this.currentPlayer + 1}胜利`, icon: 'none' }); return; } // 切换玩家 this.currentPlayer = 1 - this.currentPlayer; } }, checkWin(row, col, player) { const dirs = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [1, 1], [-1, 1], [1, -1]]; for (let i = 0; i < dirs.length; i++) { let count = 1; const dx = dirs[i][0]; const dy = dirs[i][1]; for (let j = 1; j < 5; j++) { const x = row + j * dx; const y = col + j * dy; if (x < 0 || x >= this.rows || y < 0 || y >= this.cols || this.chessboard[x][y] !== player) { break; } count++; } if (count === 5) { return true; } } return false; }, ``` 以上就是在uni-app中使用canvas实现五子棋的步骤，希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值