CocosCreator开发合成大西瓜(九)

263 阅读2分钟

上一次说到了创建游戏结束画面,今天说下如何判断游戏失败显示游戏结束画面。

1. 打开game.ts脚本,

(1)定义

    is_over: boolean; //是否结束

  (2)在初始化函数init里先设置r为false

        this.layerOver.active=false

        this.is_over=false

        this.node_xian.active=false

        this.block_show.active=false

  (3)添加处理游戏结束函数

    //游戏结束

    gameOver(){

        this.node_xian.active=false //警戒线先隐藏

        this.block_show.active=false

          this.label_score_over.string=this.score_curr //当前分数

          let num_bestScore=Number(sys.localStorage.getItem('num_bestScore'))

        if(!num_bestScore){

            num_bestScore =0

        }

        if(num_bestScore <this.score_curr){

            num_bestScore=this.score_curr

        }

        sys.localStorage.setItem('num_bestScore',String(num_bestScore))

        this.label_bestScore.string=num_bestScore //最好分数

       this.is_over=true 

       let children=this.node.children

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

           let js_block=children[i].getComponent('block')

           console.log(js_block)

            if(js_block){

                          let block_type=js_block.block_type

                console.log(js_block.block_type)

                let pos_block=children[i].getPosition()

                let block_wh= children[i].getComponent(UITransform).width

               

                tween(this.block_show)

                .call(() => {

                    this.createTx(block_type,pos_block,block_wh)

                    this.addScore(block_type)

                    children[i].active=false

                 })

                .delay(1)

                .start()

                }

       }

       this.layerOver.active=true //显示游戏结束页面

    }

  2. 打开脚本block.ts

(1)在初始化函数init设置is_over为0

        this.i_over=0  

(2)因为每次小球落下都要进行检测,判断是否超出警戒线,游戏是否结束,因此要update函数里进行判断处理。

    update(deltaTime: number) {

        if(this.tsGame.is_over){

            return

        }

        let y_gao= this.node.getPosition().y  + this.node.getComponent(UITransform).height /2

        if(y_gao > this.tsGame.node_xian.getPosition().y ){

            this.i_over++

            if(this.i_over>300){

                this.tsGame.gameOver()

            }

        }else{

            this.i_over=0  

        }

    }

3. 重玩功能,之前已经在游戏结束的界面添加了一个点击重新玩的按钮了,还没有作相关的处理,现在把这个功能完善下

(1)打开game.ts脚本,添加重玩函数,其实只需调用初始化函数即可

    btnCallBack(){

        this.init()

    }

(2)打开btn_rePay节点,添加点击事件,并且绑定到btnCallBack函数上

image.png

(3)在初始化时还需清理掉场景中的水果元素,因此在game.ts脚本上添加一个清除场景中元素的函数

    cleanAllBlocks(){

        let children=this.node.children

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

          let js_block=children[i].getComponent('block')

          if(js_block){

            children[i].removeFromParent()

          }          

        }

    }

  (4)在init函数中调用清除水果元素

        this.cleanAllBlocks()

image.png

  4. 构建发布

(1)打开偏好设置

image.png

  (2)在外部程序中微信开发者工具中,选择你微信开发者中的安装路径。

image.png

(3)打开项目中的构建发布 image.png

(4)新建构建任务。发布平台选择微信小游戏

image.png

(5)填写微信小游戏的Appid,然后点击构建 image.png

(6)点击文件夹图标,打开的目录就是构建微信小游戏的工程目录 image.png

(7)打开微信开发者工具的小游戏,添加项目 image.png

(8)导入项目 image.png

(9)这样就可以在微信开者工具进行发布了,这些跟普通微信小游戏是一样,在这里就不多说了 image.png

今天就到这里了,这个项目也结束了。可能在写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家