飞机打方块（一）菜单界面制作

一、创建项目

修改配置

 新建anim，Prefabs，Scene，Script文件夹分别用于存放动画，预制资源，场景，脚本

 

 新建场景和脚本，

 

1.游戏名称

新建title节点并修改属性：

 2.开始游戏按钮

1.新建menu容器：

 2.新建按钮start_btn:

3.新建Label节点：

 4.新建粒子：

 5.新建音乐节点：

 6.给容器Canvas绑定脚本，并绑定资源：

 7.编写开始游戏按钮交互方法：

Start.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    canvas: cc.Node = null

    @property({ type: cc.Node, displayName: "粒子", tooltip: "粒子节点" })
    particle: cc.Node = null

    @property({ type: cc.Node, displayName: "开始游戏按钮", tooltip: "开始游戏按钮" })
    btn: cc.Node = null;

    @property({ type: cc.Label, displayName: "显示历史最高分的文字", tooltip: "显示历史最高分的文字" })
    score_lb: cc.Label = null

    @property({ type: cc.AudioSource, displayName: "点击按钮音效", tooltip: "点击按钮音效" })
    music: cc.AudioSource = null;


    onLoad() {

        let self = this;
        //加载游戏场景
        cc.director.preloadScene("Game");

    }

    //点击按钮时执行的函数
    onbtn() {
        //打印log
        cc.log("点击了按钮")
        //跳转场景
        cc.director.loadScene("Game");
    }

    start() {

    }
}

8.新建脚本（Btn_Scale） 

const { ccclass, property } = cc._decorator;

@ccclass
export default class Btn_Scale extends cc.Component {



    onLoad() {
        let self = this;

        //当手指触摸时
        this.node.on(cc.Node.EventType.TOUCH_START, function () {
            //执行放大动作并使用缓动
            var b = cc.scaleTo(0.1, 1.2).easing(cc.easeCircleActionInOut());
            //执行并返回该执行的动作
            self.node.runAction(b)
        }, this);


        //两只手指离开按钮时
        //执行缩小动作并使用缓动
        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            var s = cc.scaleTo(0.08, 1);
            self.node.runAction(s);
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_CANCEL, function () {
            var s = cc.scaleTo(0.08, 1);
            self.node.runAction(s)
        }, this)
    }
}

9.绑定节点

 3.给Canvas绑定事件,粒子特效

Start.ts

onLoad() {

        let self = this;
        //加载游戏场景
        cc.director.preloadScene("Game");

        //给canvas绑定事件
        this.canvas.on(cc.Node.EventType.TOUCH_MOVE, this.onmove, this)
        this.canvas.on(cc.Node.EventType.TOUCH_END, this.end, this)

    }



 //当手指在屏幕上移动时执行的函数
    onmove(event: cc.Event.EventTouch) {
        //显示粒子特效
        this.particle.active = true;
        //打印log
        console.log("手指在屏幕上移动了");

        //触摸点的坐标
        var pos = new cc.Vec2(event.getLocationX(), event.getLocationY())
        //转换坐标
        //将一个点转换到节点(局部)空间坐标系，这个坐标系以锚点为原点
        pos = this.canvas.convertToNodeSpaceAR(pos);
        //给粒子特效赋值
        this.particle.position = cc.v3(pos)
    }

    //当手指离开屏幕时方法
    end() {
        //隐藏粒子特效
        this.particle.active = false;
    }

 4.历史最高分：

Start.ts

onLoad() {

        let self = this;

        //恢复游戏，避免游戏暂停导致无法继续
        cc.director.resume();
        
        //加载游戏场景
        cc.director.preloadScene("Game");

        //给canvas绑定事件
        this.canvas.on(cc.Node.EventType.TOUCH_MOVE, this.onmove, this)
        this.canvas.on(cc.Node.EventType.TOUCH_END, this.end, this)


        //如果历史最高分为null，初始化分数
        let score = cc.sys.localStorage.getItem("score")
        if (score == null) {
            cc.sys.localStorage.setItem("score", 0)
            cc.log("初始化分数")
        }
    }

5.游戏解释

1.新建容器

 2.新建飞机节点 

1.新建飞机子节点 ：

2.新建label节点： 

3.新建障碍节点：

 1.新建barrier子节点：

2.新建label节点 

 3.新建label节点

4.新建barrier节点

 1.新建buff节点：

 2.新建label节点：

3.新建label节点 ：

6.动态展示

1.新建UI_move_effect_start脚本并绑定canvas

 UI_move_effect_start.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    canvas: cc.Node = null;

    @property({ type: cc.Node, displayName: "从上向下飞", tooltip: "从上向下飞的节点" })
    t_b: cc.Node = null;

    @property({ type: cc.Float, displayName: "从上向下飞，飞到距离屏幕最上面多少", tooltip: "从上向下飞，飞到距离屏幕最上面多少" })
    t_b_num: number = 200;


    @property({ type: cc.Node, displayName: "从下向上飞", tooltip: "从下向上飞节点" })
    b_t: cc.Node = null;


    @property({ type: cc.Float, displayName: "从下向上飞，飞到距离屏幕最下面多少", tooltip: "从下向上飞，飞到距离屏幕最下面多少" })
    b_t_num: number = 30;


    @property({ type: cc.Node, displayName: "从左向右飞", tooltip: "从左向右飞的节点" })
    l_r: cc.Node = null;


    start() {
        //canvas的上下左右
        let l = -(this.canvas.width / 2);
        let r = (this.canvas.width / 2);
        let t = (this.canvas.height / 2);
        let b = -(this.canvas.height / 2);

        //从上向下动作
        //最终位置
        let y0 = t - (this.t_b.height / 2) - this.b_t_num;
        //初始位置
        this.t_b.y = t + (this.t_b.height / 2);
        //执行moveTo动作，并使用缓动
        let move0 = cc.moveTo(0.7, cc.v2(0, y0)).easing(cc.easeBackOut());

        this.t_b.runAction(move0);


        //从下向上飞动作
        //最终位置
        let y1 = b + (this.t_b.height / 2) - this.b_t_num;
        //初始位置
        this.b_t.y = b - (this.b_t.height / 2);
        //执行moveTo动作，并使用缓动
        let move2 = cc.moveTo(1.2, cc.v2(0, y1)).easing(cc.easeBackOut());

        this.b_t.runAction(move2);

        //从左往右飞动作
        //初始位置
        this.l_r.x = l - (this.l_r.height / 2);

        //执行moveTo动作，并使用缓动
        let move1 = cc.moveTo(1.5, cc.v2(0, 0)).easing(cc.easeBackOut());

        this.l_r.runAction(move1);
    }
}