0基础从前端到Web3 —— Mine Clearance Frontend(二)

在一的基础上继续往下,本篇主要是链上调用部分,让整个项目可以进行最基本的扫雷游戏。

S u i M o v e \mathit {Sui\ Move} Sui Move 链上部署的自主实现的简单扫雷游戏可以点击查看,只不过这里将区域大小扩大为了 10  × 20 \text {10}\ \times\ \text {20} 10 × 20,更新了雷格判断是否存在雷的逻辑使其不至于越界报错,具体内容已经 p u s h \mathit {push} push 到了 G i t h u b \mathit {Github} Github,可以自行查看。

一:创建游戏

在前篇,点击 G A M E \mathit {GAME} GAME 按钮只是判断了是否连接到了 S u i \mathit {Sui} Sui 钱包,在这里,我们往这个按钮的点击事件里额外调用两个函数,一个是清空当前的游戏区域,因为可能残存上一局的游戏内容,第二个则是链上调用,创建一局全新的游戏,并获取返回的链上对象GameInfoID

1.1 ClearCheckerboard

回想前篇,我们是如何绘制雷格的?
将一个个按钮组合成ButtonGroup再放到一起组合成 10  × 20 \text {10}\ \times\ \text {20} 10 × 20 的区域。
同理,想要改变每一个按钮的内容,也需要通过循环取用加以修改。

为了让功能更具有通用性,再来考虑链上调用后得到的游戏内容变化会以何种形式呈现?
S u i M o v e \mathit {Sui\ Move} Sui Move 的合约代码中会对每一次游戏点击触发一个事件,不管游戏成功、失败还是继续游戏,都会将最新的方格信息传回来。前端通过这一事件获得当前的雷区详情,而这一信息会以一个字符串数组的形式呈现。

也就是说,我们需要构建一个内容为空的字符串数组,再将其视为当前雷区的实际情形对每一个按钮的内容进行循环遍历删改。

function ChangeCheckerboard(checkerboard: any) {// console.log(checkerboard);// for (let row of checkerboard) {// 	console.log(row);// }const htmlCheckerboard = document.getElementById("Checkerboard")!.children[0].children;let i = 0, j = 0;for (let list of htmlCheckerboard) {// console.log(list);for (let row of list.children) {// console.log(row);// console.log(checkerboard[i][j]);const replace = checkerboard[i][j] !== "-" ? checkerboard[i][j] : " ";ChangeChess(row, replace);i += 1;}j += 1;i = 0;}
}function ChangeChess(html: Element, replace: string) {// console.log(html.innerHTML);const str1 = html.innerHTML.split('<', 1)[0];const str2 = html.innerHTML.substring(str1.length);html.innerHTML = replace.concat(str2);
}function ClearCheckerboard() {const checkerboard = [];for (let i = 0; i < MaxRow; i++) {let rowStr = "";for (let j = 0; j < MaxList; j++)rowStr = rowStr.concat("-");checkerboard.push(rowStr);}ChangeCheckerboard(checkerboard);HiddenFeedBack();
}

1.2 MoveCallStartGame

这个函数会在按钮的点击事件中被调用,如果到了那个时候再从一些SDK取值则会报错,所以我们需要事先声明,再通过参数的形式传入。

const account = useCurrentAccount();
const { mutate: signAndExecuteTransactionBlock } = useSignAndExecuteTransactionBlock();
const [gameInfoID, setGameInfoID] = React.useState("");

通过前前篇的文章可以知道,这里的链上调用其实跟直接用 T y p e S c r i p t \mathit {TypeScript} TypeScript 来调用没什么太大的区别,都是往TransactionBlock里面填充一笔笔交易信息,再signAndExecuteTransactionBlock签名提交交易块到链上执行,重点是如何对成功交易后返回的信息筛选处理,取得我们所需要的值。

首先,需要在signAndExecuteTransactionBlock中,将showObjectChanges设置为true,因为我们的目的是取得某一个对象的ID;接着可以通过onSuccess来截取返回的信息,如果不确定其结构,就将其console.log出来查看,最后不断通过.层层深入取用。

function MoveCallStartGame(signAndExecuteTransactionBlock: any, setGameInfoID: any) {const txb = new TransactionBlock();const [coin] = txb.splitCoins(txb.gas, [666]);txb.moveCall({target: `${Package}::player::start_game`,arguments: [txb.object(GameCap),coin,]});signAndExecuteTransactionBlock({transactionBlock: txb,chain: `sui:$network`,options: {showObjectChanges: true,}},{onSuccess: (result: any) => {// console.log(result.objectChanges);for (let obj of result.objectChanges) {// console.log(obj);if (obj.type === "created") {// console.log(obj.objectId);setGameInfoID(obj.objectId);break;}}}});
}

一切顺利的情况下,在编写该按钮点击事件的函数当中,一个名为gameInfoID的变量就已经被设置成了我们所需要的值。

二:享受游戏

在前篇当中,雷区的按钮点击逻辑就是显现一行提示语,再将其填充进 X \mathit {X} X,在这里,我们完善这一逻辑。

第一步,点击相当于链上调用,其中有个关键的参数就是需要知道玩家点击的是第几行第几列的方格。
在按钮中,有一个button-key的属性,可以通过点击事件的event.target.getAttribute('button-key')取得,如果是其父节点则是const l = event.target.parentElement.getAttribute('button-key')
我们将这两个值,按照按钮排列方式,一个设成行,一个设成列(生成区域时从循环的i, j来赋值),此时取出转换为数字类型传参即可。

已知点击过后的游戏区域的详细信息会通过链上事件的方式触发,那么这第二步就是从这信息当中截取我们所需要的,也就是从中找出存储有雷区揭示情形的字符串数组,通过上面的方法将其显现到前端。
看过该合约的一定也知道,一旦游戏成功或者失败,是会额外触发一个对应的事件的,这一点就可以用来判断该显示哪一句提示(胜利、继续、失败)。

function MoveCallGameClick(r: number, l: number, gameInfoID: string, signAndExecuteTransactionBlock: any) {const txb = new TransactionBlock();txb.moveCall({target: `${Package}::player::game_click`,arguments: [txb.pure(r),txb.pure(l),txb.object(gameInfoID),]});signAndExecuteTransactionBlock({transactionBlock: txb,chain: `sui:$network`,options: {showEvents: true,}},{onSuccess: (result: any) => {// console.log(result);let showed = false;for (let event of result.events) {if (event.type === GameEvent) {// console.log(event.parsedJson.checkerboard);ChangeCheckerboard(event.parsedJson.checkerboard);} else if (event.type === GameSuccessEvent) {ShowFeedBack("success_alert");showed = true;} else {ShowFeedBack("failure_alert");showed = true;}}if (!showed)ShowFeedBack("encourage_alert");}});
}

三:实机演示

在这里插入图片描述

在这里插入图片描述

四:加入组织,共同进步!

  • Sui 中文开发群(TG)
  • M o v e \mathit{Move} Move 语言学习交流群: 79489587

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/14418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣Hot100-73矩阵置零(标记数组)

给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例 2&#xff1a; 输入&…

JavaWeb Sevelet学习 创建Sevelet程序

Servlet 是JavaWeb中的开发动态Web一门技术 是由Sun公司提供的一个接口&#xff0c;允许开发者编写运行在服务器&#xff08;Tomcat&#xff09;上的Java程序&#xff0c;这些程序可以 生成动态网页内容&#xff0c; 响应客户端的请求。简单来说&#xff0c;Servlet就是Java E…

今日arXiv最热大模型论文:LoRA又有新用途,学得少忘得也少,成持续学习关键!

自大模型&#xff08;LLM&#xff09;诞生以来&#xff0c;苦于其高成本高消耗的训练模式&#xff0c;学界和业界也在努力探索更为高效的参数微调方法。其中Low-Rank Adaptation&#xff08;LoRA&#xff09;自其诞生以来&#xff0c;就因其较低的资源消耗而受到广泛关注和使用…

瑞芯微RV1126——交叉编译与移植

一、搭建这个nfs服务挂载 (1) sudo apt install nfs-kernel-server (2) 然后在你的ubuntu创建一个nfs共享目录&#xff1a; (3) sudo /etc/init.d/nfs-kernel-server restart 重启nfs服务 (4) 修改配置文件: sudo vim /etc/exports 在这个配置文件里面添加&#xff1a;/hom…

C语言/数据结构——每日一题(设计循环队列)

一.前言 上一次我们分享了关于队列的基本实现——https://blog.csdn.net/yiqingaa/article/details/139033067?spm1001.2014.3001.5502 现在我们将使用队列知识来解决问题——设计循环队列&#xff1a;https://leetcode.cn/problems/design-circular-queue/submissions/533299…

50.WEB渗透测试-信息收集-CDN识别绕过(3)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;49.WEB渗透测试-信息收集-CDN识别绕过&#xff08;2&#xff09; 关于cdn的识别方法内容…

智慧监狱人员行为识别监测系统

智慧监狱人员行为识别监测系统是基于神经网络AI视觉智能分析算法开发的技术。智慧监狱人员行为识别监测系统利用现场监控摄像头&#xff0c;通过对人体活动骨架的结构化分析&#xff0c;根据人体运动轨迹定义了多种异常行为&#xff0c;从而实现对监舍内的静坐不动、离床、攀高…

Mixiy(米思齐)安装

Mixiy(米思齐)安装 官网地址&#xff1a;爱上米思齐 打开官网&#xff0c;选择下图的软件进行下载 复制提取码&#xff0c;点击链接跳转到网盘进行下载&#xff0c;选择(RC4完整版) 下载完成后&#xff0c;解压到合适的位置&#xff0c;进入文件夹&#xff0c;双击Mixly.exe即…

Docker 部署Jenkins

1、运行镜像 docker run --namejenkins \--restartalways \--privilegedtrue \-u root \-p 8080:8080 \-p 50000:50000 \-v /home/docker/jenkins/jenkins_home:/var/jenkins_home \-v /usr/bin/docker:/usr/bin/docker \-v /var/run/docker.sock:/var/run/docker.sock \-e TZ…

【Crypto】MD5

文章目录 MD5解题感悟 MD5 提示的很明显MD5 小小flag&#xff0c;拿下&#xff01; 解题感悟 没啥感悟…

Java输入与输出详解

Java输入和输出 前言一、Java打印Hello World二、输出到控制台基本语法代码示例格式化字符串 三、从键盘输入读入一个字符正确写法 使用 Scanner 读取字符串/整数/浮点数使用 Scanner 循环读取 N 个数字 前言 推荐一个网站给想要了解或者学习人工智能知识的读者&#xff0c;这…

MySQL-性能分析

1、数据库服务器的优化步骤 2、查看系统性能参数 可以使用show status语句查询一些MySQL数据库服务器的性能参数 执行频率语法格式&#xff1a;show [ global | session ] status like 参数 &#xff1b;常用性能参数如下所示 参数名说明connection连接MySQL服务器的次数upti…

Autodesk 3ds Max下载,3ds MAX 2024三维建模渲染软件安装包下载安装

3ds MAX中文版&#xff0c;其强大的功能和灵活的操作为广大用户提供了无限的创意空间&#xff0c;使得高质量动画、最新游戏、设计效果等领域的制作需求得以完美满足。 ​ 作为一款三维建模软件&#xff0c;3ds MAX中文版具备极高的建模精度和渲染质量。它支持多种建模方式&am…

【Fiddler抓包工具】第四节.断点设置和弱网测试

文章目录 前言一、断点设置 1.1 全局断点 1.2 局部断点 1.3 打断点的几种常用命令 1.4 篡改响应报文二、弱网测试 2.1 网络限速 2.2 精准限速总结 前言 一、断点设置 1.1 全局断点 特点&#xff1a; 中断Fiddler捕获的所有请求&#xff0c;包括…

在链游中,智能合约如何被用于实现游戏内的各种功能

随着区块链技术的快速发展&#xff0c;链游&#xff08;Blockchain Games&#xff09;作为区块链技术的重要应用领域之一&#xff0c;正逐渐展现出其独特的魅力和优势。其中&#xff0c;智能合约作为链游的核心技术之一&#xff0c;对于实现游戏内的各种功能起到了至关重要的作…

【C++初阶】—— 类和对象 (下)

&#x1f4dd;个人主页&#x1f339;&#xff1a;EterNity_TiMe_ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 类和对象 1. 运算符重载运算符重载赋值运算符重载前置和后置重载 2. 成员函数的补充3. 初始化列…

CentOS上升级glibc2.17至glibc2.31

glibc是Linux系统中的重要组件之一。在CentOS中&#xff0c;glibc通常是作为系统的默认C标准库使用的&#xff0c;因为它是许多软件的基础库。在CentOS中&#xff0c;glibc的版本通常与CentOS版本一起发布。因为CentOS通常会优先选择稳定性而不是最新性&#xff0c;所以CentOS使…

Vue项目如何进行XSS防护

前言 在目前主推网络安全的情况下&#xff0c;很多开发项目都需要在上线前进行渗透测试&#xff0c;当符合渗透测试标准及没有安全漏洞即可正常上线&#xff0c;当前还会有代码审计的&#xff0c;这个另当别论。 如何对XSS进行防护 在很多的富文本编辑器项目中&#xff0c;x…

leecode热题100---994:腐烂的橘子

题目&#xff1a; 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b; 值 1 代表新鲜橘子&#xff1b; 值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回…

【MySQL精通之路】InnoDB(5)-内存结构

总目录&#xff1a; 【MySQL精通之路】InnoDB存储引擎-CSDN博客 上一篇&#xff1a; 【MySQL精通之路】InnoDB(4)-架构图-CSDN博客 目录 ​编辑 1 缓存池&#xff08;Buffer Pool&#xff09; 1.1 缓存池LRU算法 1.2 缓存区配置 1.3 使用InnoDB标准监视器监视缓存池 …