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

171 阅读2分钟

上次我们说到了如何判断通关,今天我们继续,今天我们做的很简单,当通关后把最后一个方块显示出来。

1. 在开始做个小功能前,我们先优化之前的一个小问题。就是如果是打乱顺序的,我们就不再调用判断是否成功的函数。

(1)打开game.ts脚本,在checkMove函数里调用dealMove函数增加is_random参数

image.png

(2)在dealMove函数里进行判断处理。

        if(!is_random){  //如果不是打乱的才执行该函数,即是普通用户点击才执行

            this.checkSuccess()

        }

image.png

2.(1)增加showEndItem函数,当游戏通关后,显示最后的方块。

    showEndItem(){

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

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

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

            if(itemjs && itemjs.is_end ){ //

                let color = new Color(); // 克隆当前颜色对象

                color.r=245

                color.g=118

                color.b=87

                color.a = 255; // 设置 alpha 值为 50%,范围为 0 ~ 255

                children[i].getComponent(Sprite).color=color

            }            

        }

    }

(2)在checkSuccess函数里调用showEndItem函数。

      if(!this.isSuccess){

            this.showEndItem()

        }

  image.png

到此,华容道的大部分功能都已经做完了,接下来,我们把重心放在拼图上。 其实这个拼图跟华容道也差不多的。

3.(1)在jigsaw节点下新增一个Sprite(精灵),并且命名为bg_pic用来

image.png

(2)关联下图片资源。

image.png

(4)打开game.ts,声明Sprite

    @property({type:Sprite})

    bg_pic = null

(5)关联bg_pic

image.png

(6)接下来,我们先用返回按钮来测试下更换图片资源。声明下spf

    @property({type:SpriteFrame})

    spf=null

  (7)关联下令一张图片资源。

image.png

(8) 在onclick函数的返回的逻辑里进行处理。 先注销前面的部分,然后加上

    this.bg_pic.spriteFrame=this.spf

image.png

(9)测试一下,没问题。

image.png

  image.png

好了今天就说到这里了,主要说了游戏通关成功后,显示最后一块。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家