从0开始用CocosCreator开发兔了个兔消消乐小游戏(八)

195 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第33天,点击查看活动详情

上次说到了添加了一个加的按钮,用来切换编辑模式的,今天我们继续。

1.添加一个减的按钮

(1)在preBlockEdit节点下,添加一个按钮,并且命名为btn_jian image.png

(2)调整按钮的位置 image.png

(3)按钮下的Label的Sring设置为减 image.png   (4)按钮的过渡类型设置为SCALE image.png

(5)添加点击事件,并且关联到callBackBtn函数,增加标识btn_jian image.png

2. 打开game.ts脚本,在callBackBtn函里进行处理当前属于哪一种模块 image.png

3. 为了更方便确认当前是增加元素块还是减元素块,增加一个函数来改变顶部的标题信息

(1)打开game.ts脚本,添加装饰器

    @property({type:Label})

    labelTitle =null

(2)关联节点 image.png

(3)添加showtitle函数

    showtitle(){

        if(this.isEditing){

            if(this.numTypeEdit==1){

                this.labelTitle.string='添加块模式'    

            }else{

                this.labelTitle.string='删除块模式'    

            }

        }

    }

(4)在init函数里调用showtitle函数

       this.showtitle()

image.png

(5) 调整下start里的配置信息,将numTypeEdit 和 isEditing移到this.init()前面 image.png

(6)在按钮处理函数里再次调用showtitle函数 image.png

(7)效果如下

image.png

4. 接下我们继续完成减元素块的,即是当切换到减的模式后,点击元素块就删除该元素块

(1)在onTouchStart函数里增加对删除的逻辑

else if(this.numTypeEdit==0){

            let children=this.parentBlocks.children

            for(let i=children.length-1;i>=0;i--){

                      let ts_block=children[i].getComponent(block)

                      let node_UITransform=children[i].getComponent(UITransform)

                      if(node_UITransform.getBoundingBox().contains( new Vec2(v3_touchStart.x,v3_touchStart.y))){

                                children[i].removeFromParent()

                         this.pddj()

                         break

                      }

              }

        }

image.png

  (3)同样,在手指划动的时候,也删除划动过的元素块,加入判断处理,当numTypeEdit等于1是增加元素块,等于0时是删除元素块

else if(this.numTypeEdit==0){

                let children=this.parentBlocks.children

                for(let i=children.length-1;i>=0;i--){

                          let ts_block=children[i].getComponent(block)

                          let node_UITransform=children[i].getComponent(UITransform)

                          if(node_UITransform.getBoundingBox().contains( new Vec2(v3_touchStart.x,v3_touchStart.y))){                                        children[i].removeFromParent()

                             this.pddj()

                             break

                          }             

                  }

            }

image.png

  5. 虽然加入了删除功能,但为了方便增加一个删除全部的功能

(1)在preBlockEdit节点下新增一个按钮,并且命名为btn_qingkong image.png

(2)调整按钮的位置 image.png

(3)按钮下的Label的Sring设置为清空 image.png

(4)按钮的过渡类型设置为SCALE image.png

(5)添加点击事件,并且关联到callBackBtn函数,增加标识btn_qingkong image.png

(6) 打开game.ts脚本,在callBackBtn增加逻辑处理

    this.parentBlocks.removeAllChildren()

image.png

今天就到这里了,主要说了元素块的删除,可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家