【木棉花】：手表游戏——黑白翻棋之小改进（后续）原创

木棉花潘颖琳

发布于 2021-9-13 20:14

浏览

1收藏

前言

这篇文章的讲述是在上一篇文章（前篇）的基础上进行部分修改，如“上集预告”，本文会对黑白翻棋一些功能的实现采用另一种算法来实现，并且还会对相关知识注解作一个小分享O(∩_∩)O

概述

本文是对上一篇的“实现色块的翻转”采用另一种算法来实现，原文章的实现方法是给这49个色块分别添加一个按钮，并分别添加点击事件获取坐标再传给changeOneGrids，本文讲述的是获取点击的坐标位置然后作一个距离判断是属于7x7数组中的哪一位置，然后再传给changeOneGrids。以下我会先对JS中获取触摸位置的坐标作个知识小分享，再对代码实现部分作个注解。

正文

1.获取触摸位置的坐标

老规矩，先看文档👇

这里我们要给画布组件canvas添加事件touchstart，在手指刚触摸屏幕时就触发该事件，其参数为TouchEvent，通过表2我们可以知道其对象属性touches包含屏幕触摸点的信息数组，而我们需要的坐标信息就包含在这个数组里；这里我们需要获取到的坐标是相对于组件左上角的，这样也方便我们设置点击范围来触发色块的翻转。代码如下：
index.hml文件：把之前添加的49个按钮组件删掉，然后给canvas修改成以下代码

 <canvas class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'> </canvas>
1.

index.js文件：把之前49个按钮对应的点击事件删掉，然后添加canvas组件的触摸事件，获取触摸位置相对于canvas组件左上角的坐标值

var localx;
var localy;
var a;
var b;
1.
2.
3.
4.

   touchstartfunc(msg) {
       localx=msg.touches[0].localX;
       localy=msg.touches[0].localY;
}
1.
2.
3.
4.

index.css文件：删掉之前49个按钮的布局

2.坐标转换成方块对应的行列

设置函数getgrid对坐标值划成对应的行列值，分别赋给变量a和b

    getgrid(){
    if(MARGIN<localx && localx<(MARGIN+SIDELEN)){b=0;}
    if(1*(MARGIN+SIDELEN)+MARGIN<localx && localx<2*(MARGIN+SIDELEN)){b=1;}
    if(2*(MARGIN+SIDELEN)+MARGIN<localx && localx<3*(MARGIN+SIDELEN)){b=2;}
    if(3*(MARGIN+SIDELEN)+MARGIN<localx && localx<4*(MARGIN+SIDELEN)){b=3;}
    if(4*(MARGIN+SIDELEN)+MARGIN<localx && localx<5*(MARGIN+SIDELEN)){b=4;}
    if(5*(MARGIN+SIDELEN)+MARGIN<localx && localx<6*(MARGIN+SIDELEN)){b=5;}
    if(6*(MARGIN+SIDELEN)+MARGIN<localx && localx<7*(MARGIN+SIDELEN)){b=6;}
    if(MARGIN<localy && localy<(MARGIN+SIDELEN)){a=0;}
    if(1*(MARGIN+SIDELEN)+MARGIN<localy && localy<2*(MARGIN+SIDELEN)){a=1;}
    if(2*(MARGIN+SIDELEN)+MARGIN<localy && localy<3*(MARGIN+SIDELEN)){a=2;}
    if(3*(MARGIN+SIDELEN)+MARGIN<localy && localy<4*(MARGIN+SIDELEN)){a=3;}
    if(4*(MARGIN+SIDELEN)+MARGIN<localy && localy<5*(MARGIN+SIDELEN)){a=4;}
    if(5*(MARGIN+SIDELEN)+MARGIN<localy && localy<6*(MARGIN+SIDELEN)){a=5;}
    if(6*(MARGIN+SIDELEN)+MARGIN<localy && localy<7*(MARGIN+SIDELEN)){a=6;}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

3.在canvas的点击事件里调用getgrid函数，并把触摸位置所对应的色块位置传给changeOneGrids来实现色块的翻转。

  click(){
        this.getgrid();
        this.changeOneGrids(a,b);
    },
1.
2.
3.
4.

结语

以上就是我这次的小分享啦❀❀！

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

分类

标签

WatchGame_BW（2）.rar 2.75M 53次下载

已于2021-9-13 20:14:42修改

51CTO

51CTO博客

51CTO学堂

【木棉花】：手表游戏——黑白翻棋之小改进（后续）原创

前言

概述

正文

1.获取触摸位置的坐标

2.坐标转换成方块对应的行列

3.在canvas的点击事件里调用getgrid函数，并把触摸位置所对应的色块位置传给changeOneGrids来实现色块的翻转。

结语

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

【木棉花】：手表游戏——黑白翻棋 之 小改进（后续） 原创

前言

概述

正文

1.获取触摸位置的坐标

2.坐标转换成方块对应的行列

3.在canvas的点击事件里调用getgrid函数，并把触摸位置所对应的色块位置传给changeOneGrids来实现色块的翻转。

结语

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

目录

订阅鸿蒙技术特刊，精选内容抢先看

【木棉花】：手表游戏——黑白翻棋之小改进（后续）原创