CocosCreator fight hand-speed mini game (tutorial + source code) TS implementation mini game

CocosCreator fight hand-speed mini game (tutorial + source code) TS implementation mini game

Preface

After the game is complete

How to play: Click the button in the middle of the screen within 10 seconds, and finally record the total number of clicks. The
source code is in the Q group: 1130122408.
This game is relatively simple.
For this game, the width and height of the canvas is the best setting

. The content of this article

Preface
First, set up the game scene
two, write to the master controller to control the game
three or binding node
Fourth, add a start to the game interface
Conclusion

1. Build the game scene

First create a new scene named Main and then open.

Then we create a new button under the canvas node, named main_btn , as the button to click in the middle of the screen.
Set the width and height of the button a bit larger, I set the width 500 , high 300
text on the button to display the content instead point I

Next, a new text layout used to blank node, named Layout_label , adding to the empty node Layout assembly and Widget assembly
to move the empty node to the appropriate position, provided that where I x is 0, y 360
the Layout and Widget are set up according to the picture.


The Layout here uses a vertical layout to scale the size of the container
. The purpose of creating this empty node is to lay out the bunch of text, and then you can create the text . Create four
under Layout_label Label, name these Labels according to the picture. The purpose of naming is to prevent confusion .

Turn off the active of atlast_label . This text is only displayed when the game is over, so you don’t need to show it at the beginning of the game. only at the end of the game show is enough

then set the text font size
string_label and atlast_label text size and line height are set to 60
time_label text size and line height to 55
history_label text size and line height is set to40
This setting is a bit cumbersome, but if you don’t set the text to be the same size, it looks a bit rigid, and you can set it as needed to make these texts not crowded together.

The game scene is almost built, if you want a background, you can add a nice background image

Two, write the main controller to control the game

It’s not enough for us to build the game scene. We also need to write a script to control the game.
Create a new script named MainController , and then hang it on the canvas.
Open the script.
Let’s write some properties first.

    @property(cc.Label)
    string_label:cc.Label = null;//当前点击次数的文字

    @property(cc.Node)
    btn:cc.Node = null;//屏幕中间的按钮，负责加点击次数的

    @property(cc.Label)
    time_label:cc.Label = null;//剩余时间

    @property(cc.Label)
    atlast_label:cc.Label = null;//显示最终点击了多少次屏幕的文字

    @property(cc.Label)
    lishi:cc.Label = null;//历史最高分

    @property
    time:number = 10;//开始时候的时间

    @property
    cishu:number = 0;//点击的次数

    @property
    history_s:number = 0;//历史点击最高次数

There is a comment behind the attribute
. Then hide the label that counts the number of clicks in the Start function, and then initialize the history record

start(){
    
    
        this.atlast_label.node.active = false;//在开始的时候把最终点击了多少下的文字隐藏
        if(cc.sys.localStorage.getItem(this.history_s) == null){
    
    //如果历史记录为null就初始化历史记录
            cc.sys.localStorage.setItem(this.history_s,0);//初始化
        }
    }

The gameplay is to click the button in the middle of the screen to increase the number of clicks, so we need to bind an event
to the button in the middle of the screen (that is, btn in the properties). First write the event to be bound

onbtn(){
    
    
        this.cishu = this.cishu + 1;//点击次数+1
        console.log("按下了按钮")//打印log
    }

Then bind in onload

onLoad(){
    
    
        this.btn.on(cc.Node.EventType.TOUCH_START,this.onbtn,this);//给按钮绑定事件
    }

In this way, when we click the button in the middle of the screen, the number of clicks will increase.
We also need to update the content displayed by each text every frame, and we need to judge whether the game is over, and we need to make the current remaining time -1 per second, and write these logics In update

update(dt:number){
    
    
        this.string_label.string = "当前点击次数:" + this.cishu.toString();//每帧更新当前点击的次数
        this.time_label.string = "当前剩余时间:" + Math.floor(this.time).toString();//每帧更新当前剩余的时间
        if(this.time > 0){
    
    //如果当前剩余时间大于0那么不断减小
            this.time -= dt;//当前剩余时间每秒-1
        }
        if(this.time < 0){
    
    //当剩余时间小于0游戏结束
            this.gameover();//游戏结束
        }
        this.atlast_label.string = "最终分数:"+this.cishu.toString();//每帧更新最终分数
        this.lishi.string = "历史最高分:" + cc.sys.localStorage.getItem(this.history_s);//每帧更新历史最高分
    }

At this time, you will find that an error has been reported

because we did not write the function that should be executed when the game is over.
Now let’s write
that we need to hide the button, the current remaining time, and the current number of clicks at the end of the game, and the final statistics point How many times the text is displayed, you also need to get the highest score in history and determine whether to save

gameover(){
    
    
        this.btn.active = false;//当游戏结束时按钮隐藏
        this.time_label.node.active = false;//当游戏结束时当前时间隐藏
        this.string_label.node.active = false;//当游戏结束时当前点击次数隐藏
        this.atlast_label.node.active = true;//当游戏结束时让最终统计的文字显示
        let num = cc.sys.localStorage.getItem(this.history_s);//获取一下当前的历史最高分
        if(this.cishu > num){
    
    //如果分数超过了历史最高分
            cc.sys.localStorage.setItem(this.history_s,this.cishu);//那么就重新设置历史最高分
        }
    }

Then you’re done. The
main controller is written. It
should look like this after writing.

const {
    
    ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    
    

    @property(cc.Label)
    string_label:cc.Label = null;//当前点击次数的文字

    @property(cc.Node)
    btn:cc.Node = null;//屏幕中间的按钮，负责加点击次数的

    @property(cc.Label)
    time_label:cc.Label = null;//剩余时间

    @property(cc.Label)
    atlast_label:cc.Label = null;//显示最终点击了多少次屏幕的文字

    @property(cc.Label)
    lishi:cc.Label = null;//历史最高分

    @property
    time:number = 10;//开始时候的时间

    @property
    cishu:number = 0;//点击的次数

    @property
    history_s:number = 0;//历史点击最高次数

    start(){
    
    
        this.atlast_label.node.active = false;//在开始的时候把最终点击了多少下的文字隐藏
        if(cc.sys.localStorage.getItem(this.history_s) == null){
    
    //如果历史记录为null就初始化历史记录
            cc.sys.localStorage.setItem(this.history_s,0);//初始化
        }
    }

    onLoad(){
    
    
        this.btn.on(cc.Node.EventType.TOUCH_START,this.onbtn,this);//给按钮绑定事件
    }

    update(dt:number){
    
    
        this.string_label.string = "当前点击次数:" + this.cishu.toString();//每帧更新当前点击的次数
        this.time_label.string = "当前剩余时间:" + Math.floor(this.time).toString();//每帧更新当前剩余的时间
        if(this.time > 0){
    
    //如果当前剩余时间大于0那么不断减小
            this.time -= dt;//当前剩余时间每秒-1
        }
        if(this.time < 0){
    
    //当剩余时间小于0游戏结束
            this.gameover();//游戏结束
        }
        this.atlast_label.string = "最终分数:"+this.cishu.toString();//每帧更新最终分数
        this.lishi.string = "历史最高分:" + cc.sys.localStorage.getItem(this.history_s);//每帧更新历史最高分
    }

    onbtn(){
    
    
        this.cishu = this.cishu + 1;//点击次数+1
        console.log("按下了按钮")//打印log
    }

    gameover(){
    
    
        this.btn.active = false;//当游戏结束时按钮隐藏
        this.time_label.node.active = false;//当游戏结束时当前时间隐藏
        this.string_label.node.active = false;//当游戏结束时当前点击次数隐藏
        this.atlast_label.node.active = true;//当游戏结束时让最终统计的文字显示
        let num = cc.sys.localStorage.getItem(this.history_s);//获取一下当前的历史最高分
        if(this.cishu > num){
    
    //如果分数超过了历史最高分
            cc.sys.localStorage.setItem(this.history_s,this.cishu);//那么就重新设置历史最高分
        }
    }

}

Three, bind nodes

There are so many attributes written in the script, you need to specify what these attributes are

one by one,
and you can bind them one by one, and then you can play happily.

Fourth, add a start interface to the game

There is no new content at this point, just add a starting scene, you can skip it.
Create a new scene and name it Start, open it , and add a nice background image.
Create a new script with a name, hang it on the canvas, and write it inside

onbtn(){
    
    
        cc.director.loadScene("Main")//跳转到游戏场景
    }

Just write this one, to jump to the scene,
create a new button, add the event just written to the button,

and then add a text title,

like this,
go back to the Main scene, create a new button and move it to a suitable position
, write another event in the MainController script

fanhui_function(){
    
    
        cc.director.loadScene("Start");//返回开始场景
    }

Bind this event to the newly created button,

and then you can switch between the start scene and the game scene at will

Concluding remarks

Cocos technical exchange Q group: 1130122408
welcome to group chat, technical exchanges are welcome. The
source code is in the group.
Production is not easy. Thank you for watching
Thank You~~