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

348 阅读2分钟

上一次我们说到了两个节点之间的切换,但还没有做完,今天我们继续来做完它。

1. 打开game.ts脚本,添加一个函数用来处理按钮的点击事件。

    onclick(event:Event,str:string){

        console.log('点击按钮了')

    }

image.png

2. 接下来,我们在按钮上绑定点击事件。

(1)选择btn_return节点,找到Click Events

image.png

(2) 在Click Events处,填写1,按下回车键。

image.png

(3)拖动Canvas到node处

image.png

(4)选择game下面的onclick。也就是我们之前在脚本game.ts上创建的函数onclick。传过去的字符串填写”return”。

image.png

(5)运行下,点击“返回”按钮,可以看到了我们之前在onclick 函数行的打印。说明我们在这个返回按钮上绑定的事件是成功的。

image.png  

3. 同样btn_jigsaw这个按钮跟btn_return按钮的处理方式也是一样的,也是绑定到onclick这个函数上。不同的是传递的字符串不一样,这个传递的字符串是jigsaw

image.png

4. 接下来增加一个初始化函数。让jigsaw节点一开始隐藏。

(1)控制节点的激活或者隐藏,通过设置节点的 active 属性,当active为true时,该节点为激活状态,为false时为隐藏状态。

    init(){

          this.jigsaw.active=false

    }

  (2)还要在start函数里进行调用init函数。

    start() {

        this.init()

    }

  (3)运行游戏时,没有显示其他节点了。

image.png

5. (1)在onclick函数上对不同的按钮进行处理,我们可以通过传递过来不同的参数来区别是哪个按钮点击了。

    onclick(event:Event,str:string){

        if(str=='return'){

            this.jigsaw.active=false

            this.nodeRedy.active=true

        }else if(str=='jigsaw'){

            this.jigsaw.active=true

            this.nodeRedy.active=false

        }

    }

  (2)点击“拼图”按钮,调到了返回所在的节点上了 image.png

(3)点击“返回”按钮,回到了拼图所在的节点。 image.png  

今天就到这里了,把 jigsaw节点和nodeRedy节点的切换功能实现了。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家