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

281 阅读2分钟

上次我们说到了游戏类型的处理,区分是拼图游戏还是华容道。今天我们继续,今天我我们说下计时器功能,在说计时器前,修复下之前的一个Bug,就是点击方块移动时的问题。

1.(1)打开脚本itemJigsawContent.ts ,增加onLoad函数,并且设置is_end为false.

    onLoad(){

        this.is_end=false

    }

(2)定义item_x和item_y

    item_x: number;

    item_y: number;

image.png

(3)在 init函数里获取item的x和y坐标。

        this.item_x=this.node.getPosition().x

        this.item_y=this.node.getPosition().y

image.png

这点之前是忘记写了的。接下来我们正式开始做计时器功能。

2.(1)在jigsaw节点上新增一个Label(文本),并且命名为score

image.png

  (2)更改下节点的颜色,设置为黑色。

image.png

(3)调整字体大小为40

image.png

(4)调整位置。

image.png

(5)我们再新增一个Lable(文本)作为最好分数,即记录用户耗时最短的时间。

image.png

  (6)并且命名为best_score

image.png

(7)分别调整位置,颜色设置为黑色,字体大小设置为40

image.png

3.(1)打开game.ts脚本,声明装饰器,要声明两个。分别是分数的和最好分数的

    @property({type:Label})

    score=null

 
    @property({type:Label})

    best_score=null

(2)分别关联这两个节点

image.png

4.(1)打开game.ts脚本,增加分数初始化函数initTime

    initTime(){

        this.timeNum=0

        this.score.string='成绩:00:00';

        if(this.callback){

            this.unschedule(this.callback);

        }

        this.callback = function () {

           this.timeNum++;

           this.score.string= '成绩:'+this.formatTime(this.timeNum);

        }

        this.schedule(this.callback, 1);

    }

  (2)增加时间处理函数,即处理返回我们需要的格式

     formatTime(seconds) {

        var minutes = Math.floor(seconds / 60);

        var remainingSeconds = seconds % 60;

        return this.pad(minutes) + ":" + this.pad(remainingSeconds);

      }
 
       pad(time) {

        return (time < 10 ? "0" : "") + time;

      }

(3)在initklotski函数里调用initTime函数

   this.initTime()

(4)同样也要在initjigsaw函数里调用initTime函数

   this.initTime()   好了今天就到这里了,主要说了分数的处理,但还没有做完。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家