小学僧的游戏开发之旅——世界巡游记(因个人微信小游戏数量限制，本游戏主体即将被注销，若微信搜不到小程序了，那么就已经被注销了，谢谢理解)

前言

在上一期我做了一个游戏开发之旅的教程(2048合成小球)，本文就是上一期的延续，我将会继续使用CocosCreator完成一个小游戏案例，这次是一个普通的环形跑酷小游戏(仅提供demo阶段的开发思路)

==案例展示==

世界巡游记demo链接

• 不停旋转的大地球的制作

  这里我采用的是一个超大的卡通地球图片进行不停的旋转，并给地球添加刚体，让它能和小人产生碰撞，那么引擎中的场景制作这里就不展示了，我主要展示代码部分

//worthSpeed需要自己调一下(博主设置是0.6)this.worth.angle = (this.worth.angle + this.worthSpeed) % 360;

• 人物的跳跃，跑动动作

  在引擎里完成人物的动画animation的制作，然后在脚本里面判断玩家的状态来执行相应的动作

1. 动画编辑器——跳跃动画(因跳跃动画是一次性跳跃，使用类型设置为Normal)
2. 动画编辑器——跑动动画(跑动是跳跃完毕一直执行的动画，所以要设置为Loop类型)
3. 动画控制与切换

不同状态下的动画控制(因我设置的跳跃动画总时长为1s,所以我这里的缓动跳跃动作拆分为0.5和0.5的两个部分。完成后执行回调就播放run动画)

 onTouchStart() {if (this.state == 1 && gameState == 1) {var anim = this.player.getComponent(cc.Animation);anim.play('jump');//此处应添加跳跃音效cc.tween(this.player).to(0.5, { position: cc.v2(0, 80) }, { easing: 'quadOut' }).to(0.5, { position: cc.v2(0, -44) }).start()var animJump = anim.getAnimationState('jump');animJump.on('finished', this.onFinished, this)//动画完成回调}this.state = 0;},onFinished() {//动画完成的回调函数// console.log("完成")var anim = this.player.getComponent(cc.Animation);anim.play('run');this.state = 1;},

• player与其他不同类型节点的碰撞(树木和金币)

onBeginContact: function (contact, selfCollider, otherCollider){//player.js脚本判断碰撞//树碰撞if(otherCollider.node.group == 'tree'){//如果被碰撞物体分组为tree// console.log('gameover')gameState = 0;this.overNode.active = true;//死亡节点显示// console.log(this.score);cc.sys.localStorage.setItem('pCoin',this.score);//存入金币var coinScore = cc.sys.localStorage.getItem('pCoin');this.coinLabel.getComponent(cc.Label).string = coinScore///attention}//金币+1if(otherCollider.node.group == 'coin'){//如果被碰撞物体分组为coin// console.log('coin+1');otherCollider.node.active = false;//使用cc.tween完成金币收集效果。this.coin = cc.instantiate(this.coinPre);this.player_coin.addChild(this.coin);//此处应新增金币收集音效cc.tween(this.coin).to(1, { position: cc.v2(this.coinNode.x, this.coinNode.y) }, { easing: 'quadOut' }).call(()=>{//动画完成回调this.coin.destroy();this.score += 1;}).start()}},

• 树木与金币的绕地球运动

//objectsfor (this.objects of this.objectNodeArr) {this.objects.angle = (this.objects.angle + this.worthSpeed - 0.3) % 360;let obRad = Math.PI * (this.objects.angle + 90) / 180;let obR = this.worth.width / 2 * 0.6 + this.objects.height / 2 * this.objects.scale;// console.log(this.objects.scale)this.objects.x = this.worth.x + obR * Math.cos(obRad);this.objects.y = this.worth.y + obR * Math.sin(obRad);if (this.objects.angle > 45) {//物体销毁this.objectNodeArr.shift();this.objects.destroy();this.count += 1;// console.log(this.count);if (this.count == 4) {//计数this.objectInit();// this.objectInit();this.count = 0;}}}

• 那么以上就完成了这个小游戏demo的主要思路(主要代码部分)，剩下的部分都是很简单的控制节点以及碰撞组件，预制体制作部分，就不再多做阐述了。那么本期小游戏demo分享就到这里——以后我可能会转到使用laya引擎，所以可能Cocos引擎的demo写的就比较少了，谢谢理解