一、创建项目

修改配置

新建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("初始化分数")
        }
    }