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

Cocos 实现套牛小游戏资源及代码 三 上线微信小游戏

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

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

一 安装

这里就不介绍如何安装了

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

二 新建2D项目 1、管理项目目录

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

将资源文件拖到res目录下

2、搭建界面

该案例中的场景界面为主界面、游戏界面.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));}

进入游戏主场景中

绑定节点

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

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);}

奔跑的牛使用的是动画编辑器来设置的动画，通过不同类型的牛来播放不动的奔跑动画

.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.

套绳的动画

套牛的绳子有不同的类型，默认抛出绳子后拉回套中的牛

这里执行this..一连串动作

代码如下

// 套牛的动作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];

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

三 上线微信小游戏

在 创建账号并登录，这里注意选择小程序的账号哦，需要绑定微信。

登录之后，在小游戏基本设置，设置一下内容

1、上线微信小游戏

小程序名称

小程序简称

小程序头像

小程序服务类目

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

2、Cocos 代码打包上传

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

选择发布平台，微信小游戏

根据游戏的横竖屏设置方向

设置appid（来自微信小程序后台）

最后点击构建，点击构建成功后。使用微信开发工具导入编译build后的项目。在微信开发工具中预览可以手机扫码看到游戏的开发版本。

上传游戏、提交版本及更新内容，上传成功后可以在微信小程序后台的版本管理中看到上传新版本。点击提交审核即可。

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

上线微信小游戏经常出现“小游戏需具有完整的游戏玩法、不能为简单的素材堆砌”

根据这个问题，在案例中新增了关卡、游戏玩法介绍后重新发布新的版本，继续等待审核即可。暂时这么审核通过了。

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

代码和资源