用CocosCreator3.6开发一款拼图游戏(九)

127 阅读2分钟

上次我们说到不同难道的华容道的实现,今天我们继续,今天我们实现触摸方块事件。废话少说,下面直接开始。

1. 打开script文件夹下的game.ts脚本。

(1)在addItemContent函数里添加触摸事件监听。

node_item.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);

image.png

 因为我们只需用到TOUCH_END这个类型,触摸事件监听还有其它类型的,像TOUCH_START,TOUCH_MOVE,TOUCH_CANCEL,大家有空的时候,可以去看下。

  (2)增加事件触发后的回调函数onTouchEnd,这个函数是自定义的。

onTouchEnd(event: EventTouch){

}

  (3)获取当前被点击的节点的坐标。

    onTouchEnd(event: EventTouch){

        let targetNode = event.target

        let pos=   targetNode.getPosition();

        console.log('post'+pos)

    }

(4)测试结果如下

image.png

2. 打开item.ts脚本,新建一个函数onLoad,  将start 函数的  this.is_end=false 移动到onLoad函数里。

image.png

3. 回到game.ts脚本,在initklotski函数里增加获取两个块之间的距离

 this.distance_item=this.itemWithHight+this.interval  //两个块之间的距离

image.png

记得,要在顶部声明distance_item

image.png

4. (1)接下来增加一个函数checkMove,通过两个方块的距离用来判断方块能否移动。

    //判断是否可以移动

    checkMove(pos){

        let children=this.bg.children //获取bg下的所有节点

        let pos_2=new Vec3(0,0,0)

        for (let i = 0; i < children.length; i++) {

            let itemjs=children[i].getComponent(item)

            if(itemjs && itemjs.is_end ){ //找到item节点和is_end=true的节点

                 pos_2=children[i].getPosition() //获取该节点的坐标

            }            

        }

 

       let distance_x=Math.abs(pos.x-pos_2.x);

       let distance_y=Math.abs(pos.y-pos_2.y);

       let distance=Math.sqrt(distance_x* distance_x + distance_y *distance_y )

 

       if((distance-this.distance_item) <10){

         console.log('是相邻的,可移动')

       }

 

    }

 

(2)在onTouchEnd函数里进行调用。

    onTouchEnd(event: EventTouch){

        let targetNode = event.target

        if(targetNode){

            let pos=   targetNode.getPosition(); //获取当前点击的节点的坐标

            console.log('post'+pos)

            this.checkMove(pos)

        }

    }

 

 

5. 为了方便处理方块的移动,我们在checkMove上再传多一个num的参数。

(1)onTouchEnd上获取到当前点击方块的数字,然后传递该checkMove

   let num=targetNode.children[0].getComponent(Label).string

image.png

(2) 在checkMove函数上接收,打印出来看下。

image.png

(3)测试下,没问题

image.png

  好了今天就到这里了,主要说了两个方块之间能否移动。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家