Cocos creator实现《滑雪趣挑战》滑雪小游戏资源及代码

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

](https://img-blog.csdnimg.cn/9f2f8c7f066a41a6807841ffe90673e9.jpeg#pic_center)

https://wxaurl.cn/jYSrvkJBQYh

一安装CocosDashBoard

这里就不介绍如何安装了

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

二新建2D项目SkiMan

2.1、管理项目目录
在资源管理器中新建文件夹

anim 动画
preb 预制体
res 图片、语音资源
scene 场景
scripts 脚本资源
将资源文件拖到res目录下

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

三关键代码

在该小游戏中障碍物的小树和石头需要向上移动，滑雪小人左右移动躲避小树和石头，得到星星即可得分。

3.1、创建障碍物

创建小树预制体，增加碰撞检测

创建石头预制体，增加碰撞检测

定时器移动小树与石头

createObstacle() {if (this.isStoped || !this.isStartPlay) {return;}// 随机2～4秒;var random = Math.random() * 100;let type = Math.floor(random);this.createElement(type);}createElement(type) {let bNum = 3;if (type % bNum == 0) {var graySone = this.spawnStone();this.node.addChild(graySone);var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - graySone.width);graySone.setPosition(cc.v2(x, -(this.canvasHeight / 2 + graySone.height)));} else {var tree = this.spawnTree();this.node.addChild(tree);var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - tree.width);tree.setPosition(cc.v2(x, -(this.canvasHeight / 2 + tree.height)));}}startCreateObstacle() {for (let index = 0; index < 1; index++) {var tree = this.spawnTree();this.node.addChild(tree);var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - tree.width);var y = -this.canvasHeight / 2.0 + Math.random() * (this.canvasHeight / 2.0) + this.canvasHeight / 8;tree.setPosition(cc.v2(x, y));}}

之后在update中移动障碍物

update(dt) {if (this.isStoped || !this.isStartPlay) {return;}for (let index = 0; index < this.node.childrenCount; index++) {let sub = this.node.children[index];sub.y += this.moveSpeed * dt;if (sub.y >= -this.canvasHeight / 3.0 && this.isOpenMagic) {let graySt = sub.getComponent(GrayStone);if (graySt) {graySt.showOpenCubeDestory();} else {let tree = sub.getComponent(ChristmasTree);if (tree) {tree.showOpenCubeDestory();}}}if (sub.y >= this.canvasHeight / 2.0) {let graySt = sub.getComponent(GrayStone);if (graySt) {this.despawnStone(sub);} else {let tree = sub.getComponent(ChristmasTree);if (tree) {this.despawnTree(sub);} else {sub.removeFromParent();sub.destroy();}}}}}

3.2、魔法棒与磁铁道具

在游戏制作过程中新增了两个道具，
一个魔法棒道具
魔法棒道具：得到魔法棒道具可以在10s内时间内清除小树、石头障碍物

判断是否开启魔法棒，开启魔法棒后，障碍物消失

if (sub.y >= -this.canvasHeight / 3.0 && this.isOpenMagic) {let graySt = sub.getComponent(GrayStone);if (graySt) {graySt.showOpenCubeDestory();} else {let tree = sub.getComponent(ChristmasTree);if (tree) {tree.showOpenCubeDestory();}}}

魔法棒道具创建

createMagic() {if (this.isStoped || !this.isStartPlay) {return;}var magicWand = cc.instantiate(this.magicWand);this.node.addChild(magicWand);var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - magicWand.width);magicWand.setPosition(cc.v2(x, -(this.canvasHeight / 2 + magicWand.height)));}

磁铁道具
磁铁道具：得到磁铁道具可以在10s内时间内吸收掉星星哦

// 生成磁铁beginManetSchedule() {var time = 10 + Math.random() * 3 + this.currentLevelInfo['level'] / 30;this.schedule(this.createManet, time);}createManet() {if (this.isStoped || !this.isStartPlay) {return;}var magnetTool = cc.instantiate(this.magnetTool);this.node.addChild(magnetTool);var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - magnetTool.width);magnetTool.setPosition(cc.v2(x, -(this.canvasHeight / 2 + magnetTool.height)));}

之后在update中移动星星的位置到滑雪小人上，星星与小人会触发碰撞检测，即可获得得分。

update(dt) {if (this.isStoped || !this.isStartPlay) {return;}for (let index = 0; index < this.node.childrenCount; index++) {let sub = this.node.children[index];if ((this.isOpenMagnet && (sub.y >= -this.canvasHeight / 2.0 && sub.y <= this.canvasHeight / 2.0))) {// 将星星移动到目标角色的位置let aStar = sub.getComponent(Star);if (aStar) {// 只处理星星移动aStar.moveToTargetPos(this.playPos);} else {sub.y += this.moveSpeed * dt;}} else {sub.y += this.moveSpeed * dt;}if (sub.y >= this.canvasHeight / 2.0) {let aStar = sub.getComponent(Star);if (aStar == null) {this.despawnStar(sub);                    } else {sub.removeFromParent();sub.destroy();}}}}

3.3、关卡内容，设计关卡

每个关卡控制不同的移动速度。所以在关卡代码中设置Settings
settings.ts

let settings = [{                               level: 1,                   // 第1关star: 0,                     // star获得数量duration: 60,               // 倒计时时长，单位为秒sspeed: 200,                 // 倒计时时长，单位为秒slevelState: 'UNLOCKED',     // 关卡状态},{                               level: 2,                   // 关卡等级star: 0,                    // star获得数量duration: 60,               // 倒计时时长，单位为秒sspeed: 250,                 // 倒计时时长，单位为秒slevelState: 'LOCKED',       // 关卡状态},
]

关卡展示是一个layout节点

每个关卡是一个预制体，在关卡中代码中生成具体的展示layout效果

export default class LevelRoot extends cc.Component {@property(cc.Sprite)levelBG: cc.Sprite = null;@property(cc.Node)levelLayout: cc.Node = null;@property(cc.Node)closeNode: cc.Node = null;@property(cc.Prefab)levelItemPreb: cc.Prefab = null;onLoad () {this.closeNode.on(cc.Node.EventType.TOUCH_START, this.closeLevelRoot, this);this.setupLevel();}start () {}update (dt) {}setupLevel () {this.levelLayout.removeAllChildren();if (!cc.sys.localStorage.getItem('settings')) {for (let i=0; i<settings.length; i++) {let level = cc.instantiate(this.levelItemPreb);level.getComponent(LevelItem).levelSetting = settings[i];level.getComponent(LevelItem).changeLevel();this.levelLayout.addChild(level);}// 将所有关卡信息存入本地(针对首次游戏)cc.sys.localStorage.setItem('settings', JSON.stringify(settings));}else {// 如果玩家已经玩过，则从本地存储中获取关卡配置信息let localSettings = JSON.parse(cc.sys.localStorage.getItem('settings'));for (let i=0; i<localSettings.length; i++) {let level = cc.instantiate(this.levelItemPreb);level.getComponent(LevelItem).levelSetting = localSettings[i];level.getComponent(LevelItem).changeLevel();this.levelLayout.addChild(level);}}}closeLevelRoot() {this.node.active = false;}
}

最后在GameManager.ts获取当前的关卡内容，更改移动速度。

四、上传微信小游戏

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

1、上线微信小游戏
小程序名称
小程序简称
小程序头像
小程序服务类目

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

2、Cocos Creator代码打包上传
在Cocos Creator的菜单的项目中，构建发布

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

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

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

参考
https://blog.csdn.net/gloryFlow/article/details/130690146

五、游戏效果

最后大致看下在微信小游戏上的效果