返回发烧友论坛
发 帖  

[文章]【木棉花】：手表游戏——黑白翻棋 之 小改进（后续）

jf_16575311
2021-09-18 20:31:31
阅读量0
HarmonyOS
1
5


前言
这篇文章的讲述是在上一篇文章（前篇）的基础上进行部分修改，如“上集预告”，本文会对黑白翻棋一些功能的实现采用另一种算法来实现，并且还会对相关知识注解作一个小分享O(∩_∩)O
概述
本文是对上一篇的“实现色块的翻转”采用另一种算法来实现，原文章的实现方法是给这49个色块分别添加一个按钮，并分别添加点击事件获取坐标再传给changeOneGrids，本文讲述的是获取点击的坐标位置然后作一个距离判断是属于7x7数组中的哪一位置，然后再传给changeOneGrids。以下我会先对JS中获取触摸位置的坐标作个知识小分享，再对代码实现部分作个注解。
正文1.获取触摸位置的坐标
老规矩，先看文档
01.png
02.png
03.png
这里我们要给画布组件canvas添加事件touchstart，在手指刚触摸屏幕时就触发该事件，其参数为TouchEvent，通过表2我们可以知道其对象属性touches包含屏幕触摸点的信息数组，而我们需要的坐标信息就包含在这个数组里；这里我们需要获取到的坐标是相对于组件左上角的，这样也方便我们设置点击范围来触发色块的翻转。代码如下：
index.hml文件：把之前添加的49个按钮组件删掉，然后给canvas修改成以下代码
  1. <canvas class="canvas" ref="canvas" @touchstart='touchstartfunc'> </canvas>
复制代码
index.js文件：把之前49个按钮对应的点击事件删掉，然后添加canvas组件的触摸事件，获取触摸位置相对于canvas组件左上角的坐标值
  1. var localx;
  2. var localy;
  3. var a;
  4. var b;
复制代码
  1.    touchstartfunc(msg) {
  2.        localx=msg.touches[0].localX;
  3.        localy=msg.touches[0].localY;
  4. }
复制代码
index.css文件：删掉之前49个按钮的布局
2.坐标转换成方块对应的行列
设置函数getgrid对坐标值划成对应的行列值，分别赋给变量a和b
  1.     getgrid(){
  2.     if(MARGIN<localx && localx<(MARGIN+SIDELEN)){b=0;}
  3.     if(1*(MARGIN+SIDELEN)+MARGIN<localx && localx<2*(MARGIN+SIDELEN)){b=1;}
  4.     if(2*(MARGIN+SIDELEN)+MARGIN<localx && localx<3*(MARGIN+SIDELEN)){b=2;}
  5.     if(3*(MARGIN+SIDELEN)+MARGIN<localx && localx<4*(MARGIN+SIDELEN)){b=3;}
  6.     if(4*(MARGIN+SIDELEN)+MARGIN<localx && localx<5*(MARGIN+SIDELEN)){b=4;}
  7.     if(5*(MARGIN+SIDELEN)+MARGIN<localx && localx<6*(MARGIN+SIDELEN)){b=5;}
  8.     if(6*(MARGIN+SIDELEN)+MARGIN<localx && localx<7*(MARGIN+SIDELEN)){b=6;}
  9.     if(MARGIN<localy && localy<(MARGIN+SIDELEN)){a=0;}
  10.     if(1*(MARGIN+SIDELEN)+MARGIN<localy && localy<2*(MARGIN+SIDELEN)){a=1;}
  11.     if(2*(MARGIN+SIDELEN)+MARGIN<localy && localy<3*(MARGIN+SIDELEN)){a=2;}
  12.     if(3*(MARGIN+SIDELEN)+MARGIN<localy && localy<4*(MARGIN+SIDELEN)){a=3;}
  13.     if(4*(MARGIN+SIDELEN)+MARGIN<localy && localy<5*(MARGIN+SIDELEN)){a=4;}
  14.     if(5*(MARGIN+SIDELEN)+MARGIN<localy && localy<6*(MARGIN+SIDELEN)){a=5;}
  15.     if(6*(MARGIN+SIDELEN)+MARGIN<localy && localy<7*(MARGIN+SIDELEN)){a=6;}
复制代码
3.在canvas的点击事件里调用getgrid函数，并把触摸位置所对应的色块位置传给changeOneGrids来实现色块的翻转。
  1.   click(){
  2.         this.getgrid();
  3.         this.changeOneGrids(a,b);
  4.     },
复制代码
结语
以上就是我这次的小分享啦❀❀！
更多资料请关注我们的项目 : Awesome-Harmony_木棉花
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友