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

本文链接：https://blog.youkuaiyun.com/qq_45310244/article/details/108690695

本文介绍使用CocosCreator开发一款环形跑酷游戏的过程，包括地球旋转、角色动画控制及碰撞检测等关键技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

==案例展示==

世界巡游记demo链接

不停旋转的大地球的制作

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


//worthSpeed需要自己调一下(博主设置是0.6)

    this.worth.angle = (this.worth.angle + this.worthSpeed) % 360;

人物的跳跃，跑动动作

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

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

不同状态下的动画控制(因我设置的跳跃动画总时长为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
        }
        //金币+1
        if(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()
        }
    },

树木与金币的绕地球运动

//objects
            for (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;
                    }

                }
            }