Cocos creator小游戏实现套牛小游戏资源及代码

Cocos creator小游戏实现套牛小游戏资源及代码
最近在学习Cocos Creator，作为新手，刚刚开始学习Cocos Creator，上线了两个微信小游戏，刚刚入门，这里记录一下小绳套牛实现及上线过程的过程。

一 安装CocosDashBoard

这里就不介绍如何安装了

本案例使用的是编译器版本为2.4.10

二 新建2D项目RunCow

1、管理项目目录

在资源管理器中新建文件夹

• anim 动画
• preb 预制体
• res 图片、语音资源
• scene 场景
• scripts 脚本资源

将资源文件拖到res目录下

2、搭建界面

该案例中的场景界面为主界面main_scene、游戏界面game_scene.fire、关卡界面

在入口主界面中有进入游戏，绑定Touch时间，点击进入加载game场景
代码如下：

 // start动画
    btnStartAnimated() {
        this.btnStart.node.scale = 1.0;
        this.btnStart.node.runAction(cc.repeatForever(cc.sequence(
            cc.scaleTo(0.6, 1.2),
            cc.scaleTo(0.6, 1.0)
        )));
    }

    btnStartPlay() {
        this.selectLevel();
        this.loadingBar.node.active = true;
        this.btnStart.node.active = false;
        this.loadingBar.progress = 0;
        this.loadingBar.barSprite.fillRange = 0;
        cc.loader.onProgress = (count, amount, item) => {
            if (this.isFinished == false) {
                let progress = Number((count / amount).toFixed(2));
                if (progress > this.loadingBar.barSprite.fillRange) {
                    this.loadingBar.barSprite.fillRange = count / amount;
                }
            }
        };
        cc.director.preloadScene("game_scene", function () {
            if (this.isFinished == false) {
                this.loadingBar.node.active = false;
                this.btnStart.node.active = false;
                console.log("加载成功");
            }

            cc.director.loadScene("game_scene");
            this.isFinished = true;
        }.bind(this));
    }

进入游戏主场景game_scene中
绑定节点

创建奔跑的牛，这里用到牛的预制体，设置schedule定时器，创建奔跑的牛

createCow() {
        if (!this.checkShouldSchdule()) {
            return;
        }

        if (this.curCowType == 0) {
            this.curCowType = 1;
        } else if (this.curCowType == 1) {
            this.curCowType = 2;
        } else if (this.curCowType == 2) {
            this.curCowType = 0;
        }

        let cow = cc.instantiate(this.cowPreb).getComponent(CowRun);
        cow.cowType = this.curCowType;
        cow.node.setPosition(cc.v2(this.canvasWidth, -60));
        this.cowRoot.addChild(cow.node);
    }


    // 倒计时
    beginSchedule() {
        this.schedule(this.onCountDown, this.interval);
    }

    onCountDown() {
        if (!this.checkShouldSchdule()) {
            return;
        }

        this.countDuration--;
        if (this.countDuration < 0) {
            // 游戏结束，弹出游戏结束提示
            this.showGameOver();

            this.stopSchedule();

            this.countDuration = 0;
        }

        this.countDownLB.string = this.countDuration + "s";
    }

    stopSchedule() {
        this.unschedule(this.onCountDown);
        this.unschedule(this.createCow);
    }

奔跑的牛使用的是动画编辑器来设置的动画，通过不同类型的牛来播放不动的奔跑动画
RunCow.ts
代码如下

playAnim() {
        let anim = this.getComponent(cc.Animation);
                
        if (this.cowType == 0) {
            let animState = anim.play('cow1');
            animState.speed = 2;
        } else if (this.cowType == 1) {
            let animState = anim.play('cow2');
            animState.speed = 2;
        } else {
            let animState = anim.play('cow3');
            animState.speed = 2;
        }
    }

    update (dt) {
        this.node.x -= this.speed*dt;
        if (this.node.x < -this.canvasWidth) {
            this.node.removeFromParent();
        }
    }

当牛奔跑超出左侧界面外，则将移出该节点this.node.removeFromParent

套绳的动画
套牛的绳子有不同的类型，默认抛出绳子后拉回套中的牛
这里执行this.cowRope.runAction一连串动作
代码如下

// 套牛的动作
    throwCow() {
        if (!this.checkShouldSchdule()) {
            return;
        }

        if (this.isThrowing) {
            return;
        }

        this.cowRope.getComponent(cc.Sprite).spriteFrame = this.ropeImgs[0];
        this.isThrowing = true;

        // 默认在屏幕外
        this.cowRope.y = - this.canvasHeight;

        // 移出去
        let mTop = cc.moveTo(0.45, cc.v2(0, 68 - this.cowRope.height / 2));

        // 套住牛
        let mFun = cc.callFunc(function () {
            // 判断是否套住了牛
            let cowRun = this.checkTakeCow();
            if (cowRun) {
                let cowType = cowRun.getComponent('CowRun').cowType;

                // 由于动作
                let ropeType = this.getRopeType(cowType);
                console.log("cowType:" + cowType + ",ropeType:" + ropeType);
                // 更换绳子样式
                this.cowRope.getComponent(cc.Sprite).spriteFrame = this.ropeImgs[ropeType];

                cowRun.active = false;
                cowRun.removeFromParent();

                // 更新分数
                this.score++;

                // 播放声音
                this.playCowSound();
            }
        }.bind(this));

        // 拖回
        let md = cc.moveTo(0.85, cc.v2(0, -this.canvasHeight));

        // 动作结束
        let finish = cc.callFunc(function () {
            this.isThrowing = false;
            let showScore = this.score + "/" + this.currentLevelInfo['cow'];
            this.starCollector.updateScore(showScore);
            let needCow = this.currentLevelInfo['cow'];
            console.log("this.score:" + this.score + "--needCow:" + needCow);
            if (this.score >= needCow) {
                // 通关
                this.winCurLevel();
            }
        }.bind(this));

        let seq = cc.sequence([mTop, mFun, md, finish]);
        this.cowRope.runAction(seq);
    }

下面判断套中牛儿判断，当牛头移动到中间位置

// 检测是否套住了牛
    checkTakeCow() {
        for (let index = 0; index < this.cowRoot.childrenCount; index++) {
            let cowRun = this.cowRoot.children[index];
            if (cowRun.active == true && (cowRun.x >= 50 && cowRun.x <= 160)) {
                return cowRun;
            }
        }

        return null;
    }

套中牛儿之后，根据套中的不同的牛更换拉回的绳子的样式

// 更换绳子样式
this.cowRope.getComponent(cc.Sprite).spriteFrame = this.ropeImgs[ropeType];

至此主要代码差不多这些，套牛的逻辑比较简单。稍后贴出资源及代码地址。

三 上线微信小游戏

在https://mp.weixin.qq.com 创建账号并登录，这里注意选择小程序的账号哦，需要绑定微信。
登录之后，在小游戏基本设置，设置一下内容

1、上线微信小游戏

小程序名称
小程序简称
小程序头像
小程序服务类目

在游戏设置中需要设置 上传小游戏自审自查文档照片，签字，日期，按手印哦。

2、Cocos Creator代码打包上传

在Cocos Creator的菜单的项目中，构建发布

选择发布平台，微信小游戏
根据游戏的横竖屏设置方向
设置appid（来自微信小程序后台）

最后点击构建，点击构建成功后。使用微信开发工具导入编译build后的项目。在微信开发工具中预览可以手机扫码看到游戏的开发版本。
上传游戏、提交版本及更新内容，上传成功后可以在微信小程序后台的版本管理中看到上传新版本。点击提交审核即可。

3、上线微信小游戏出现问题

上线微信小游戏经常出现“小游戏需具有完整的游戏玩法、不能为简单的素材堆砌”
根据这个问题，在案例中新增了关卡、游戏玩法介绍后重新发布新的版本，继续等待审核即可。暂时这么审核通过了。

学习记录，每天不停进步。

代码和资源
https://gitee.com/baibaime/class_cow.git