【木棉花】:手表游戏——黑白翻棋 之 小改进(后续) 原创

发布于 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>

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

var localx;
var localy;
var a;
var b;
   touchstartfunc(msg) {
       localx=msg.touches[0].localX;
       localy=msg.touches[0].localY;
}

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;}

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

  click(){
        this.getgrid();
        this.changeOneGrids(a,b);
    },

结语

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

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
WatchGame_BW(2).rar 2.75M 27次下载
已于2021-9-13 20:14:42修改
2
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐