官方摘星星游戏

本文主要是介绍官方摘星星游戏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

通过控制游戏主角（小怪物）跳跃，来触碰到随机生成的星星，如果在星星消失前触碰到，那么则积分+1，否则游戏结束。

实现

大致步骤

1、构建静态页面
2、往UI节点上添加自定义脚本组件（JS或TS编写的满足CocosCreator组件要求的脚本组件）

实现细节

静态页面

拖资源进场景就完事了

脚本组件

1、主角脚本组件（Player）

（1）主角要能动吧，cc.tween()来帮你动起来

runJumpAction () {// 跳跃上升let jumpUp = cc.tween().by(this.jumpDuration, {y: this.jumpHeight}, {easing: 'sineOut'});// 下落let jumpDown = cc.tween().by(this.jumpDuration, {y: -this.jumpHeight}, {easing: 'sineIn'});// 形变let squash = cc.tween().to(this.squashDuration, {scaleX: 1, scaleY: 0.6});let stretch = cc.tween().to(this.squashDuration, {scaleX: 1, scaleY: 1.2});let scaleBack = cc.tween().to(this.squashDuration, {scaleX: 1, scaleY: 1});// 创建一个缓动，按jumpUp->jumpDown的顺序执行动作let tween = cc.tween().sequence(squash, stretch, jumpUp, scaleBack, jumpDown).call(this.playJumpSound, this);// 循环执行return cc.tween().repeatForever(tween);
}

tip：这里通过控制节点的属性，通过顺序执行序列，将动作串起来执行

（2）光一直跳，也没啥意思，不得控制左右跳，控制分为web端和移动端，web端可以通过键盘事件，移动端可以通过触碰

// 初始化键盘输入监听
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);// 触摸监听
let touchReceiver = cc.Canvas.instance.node;
touchReceiver.on('touchstart', this.onTouchStart, this);
touchReceiver.on('touchend', this.onTouchEnd, this);

既然监听，那么当前需要在销毁onDestroy的时候取消监听

onDestroy () {// 取消键盘输入监听cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);// 取消触摸监听let touchReceiver = cc.Canvas.instance.node;touchReceiver.off('touchstart', this.onTouchStart, this);touchReceiver.off('touchend', this.onTouchEnd, this);
}

在监听时指定了监听处理函数，例如this.onKeyDown

onKeyDown (event) {switch(event.keyCode) {case cc.macro.KEY.a:this.accLeft = true;break;case cc.macro.KEY.d:this.accRight = true;break;}
}

光这里设置变量属性值，也没法动起来，最终还是需要通过更新节点的位置等信息来主角动起来，这就需要用到核心的update(dt)回调方法了，通过平台的刷新机制回调update方法

update (dt) {// 根据当前加速度方向每帧更新速度if (this.accLeft) {this.xSpeed -= this.accel * dt;} else if (this.accRight) {this.xSpeed += this.accel * dt;}// 限制主角的速度不能超过最大值if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);}// 根据当前速度更新主角的位置this.node.x += this.xSpeed * dt;
}

2、游戏控制脚本组件（Game）

（1）主角是动了，没有星星也是无趣，那就得在随机位置生成星星了

spawnNewStar () {// 使用给定的模板在场景中生成一个新节点let newStar = cc.instantiate(this.starPrefab);// 销毁之前生成的星星节点if (this.star != null) {this.star.destroy();}// 重新指向新的星星athis.star = newStar;// 将新增的节点添加到 Canvas节点下面this.node.addChild(this.star);// 为星星设置一个随机位置this.star.setPosition(this.getNewStarPosition());// 重置计时器，根据消失时间范围随机取一个值this.startDuration = this.minStarDuration + Math.random() * (this.maxStarDuration - this.minStarDuration);this.timer = 0;}

这里有个预制资源(Prefab)，通过预制资源实例化节点对象，然后再添加到场景中（addChild）

（2）星星也有了，主角也会动了，那就的开始摘起星星来了，那就是碰撞检测（这里简单通过判断星星与主角的位置距离来判定是否发生了碰撞）

update (dt) {if (this.star != null && this.getPlayerDistance() < this.star.getComponent('Star').pickRadius) {// 调用收集行为this.onPicked();return;}// 每帧更新计时器，超过限度还没有生成新的星星// 就会调用游戏失败逻辑if (this.timer > this.startDuration) {this.gameOver();return;}this.timer += dt;
}

（3）摘到星星了，不加分，摘它何用

onPicked () {// 得分this.gainScore();// 当星星被收集时，重新生成新的星星this.spawnNewStar();}gainScore () {this.score += 1;this.scoreDisplay.string = 'Score: ' + this.score;// 播放得分音效cc.audioEngine.playEffect(this.scoreAudio, false);}

这里涉及到一个音频播放，通过cc.audioEngine.playEffect可以播放指定的音频