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

315 阅读2分钟

上次我们说了更改菜单和方块的一些小调整,今天我们继续,今天我们做一个选项来控制华容道的难度。这样用户可以自由选择游戏的难度了,可以带来不同的体验。下面直接开始。

1.在nodeRedy节点下新建一个UI组件中的ToggleGroup(单选按钮)

image.png

2.在Toggle1节点下新增一个Lable(文本)

image.png

3.Label的String该成3:,并且颜色改为黑色。如果颜色是白色的,会看不到的。

image.png

image.png

4. (1)为了方便,先将Toggle2和Toggle3删掉,然后将Toggle1复制3份

image.png

(2)复制后

image.png

(3)调整这些节点的位置 image.png

(4)Label的数字分别改成3,4,5,6

image.png

5. 打开game.ts脚本

(1)添加一个方法用来处理单选按钮。

    onclicktoggle(event:Event,str:string){

        this.itemNum=parseInt(str)

    }

(2)将Toggle1单选按钮的点击事件绑定到onclicktoggle函数上,绑定的方法跟之前的按钮的绑定方法一样。传递的字符串为3

image.png

(3)同样Toggle2,Toggle3,Toggle4的处理方法跟Toggle1一样,只是传参不一样,其他的分别是4,5,6

image.png

(4)在onclicktoggle打印this.itemNum,测试结果没问题。

image.png

6. 我们修改一下之前的菜单上按钮的处理函数。

(1)将之前的函数initjigsaw改为initklotski

image.png

(2)在onclick函数里加多一个判断,并且调用initklotski函数。

image.png

(3)更改btn_Klotski按钮传过来的字符串,更改为klotski

image.png

(4)去掉initklotski函数里的

     this.itemNum=3;//横竖有多少个

(5)在start函数里加上

  this.itemNum=3;//横竖有多少个

7. 测试下,发现如果在返回时,再打开,会出现一些小问题。因为返回时,没有删除之前的东西,导致重复出现了

image.png

8.为了解决上面那个问题,我们添加一个方法,专门用来移除节点的。

    cleanallitem(){

        this.bg.removeAllChildren()

    }

9.在返回时调用cleanallitem函数

image.png

10. 再次测试时,没问题了

image.png

好了今天就到这里了,主要说了不同难道的华容道的实现。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家