合成类游戏如何让车围着跑道移动

微信小游戏中合成类游戏比较火，在这些合成类游戏中通常会有一个跑道，然后让车围绕着这些椭圆形的跑道移动。那么如何做到的呢？
我们观察会发现这些椭圆形的跑道是有两个半圆与两条竖线合成的，在直线型的跑道上，我们只需要使用Tween动画，不断改变车的y坐标即可，那么在半圆形的轨道上，怎么办呢？
这需要我们回忆自己高中所学的关于圆的数学函数了。

圆心坐标：(x0,y0)
半径：r
角度：a

圆周率： PI

则圆上任一点为：（x1,y1）
x1   =   x0   +   r   *   cos(a   *   PI   /180   )
y1   =   y0   +   r   *   sin(a   *   PI  /180   )

我们只需要不断改变角度就可以，算出半圆上的点的x值和y值了。

[mw_shl_code=javascript,true]private get radius(){
        return -Math.PI;
    }

    private set radius(value:number){
        this.car.x = this.stage.stageWidth/2 + (this.stage.stageWidth/2-20)*Math.cos(value);
        this.car.y = this.stage.stageWidth/2-10 + (this.stage.stageWidth/2-20)*Math.sin(value);
        this.car.rotation = 180 * value / Math.PI;
    }[/mw_shl_code]

利用tween动画改变radius属性的值。

[mw_shl_code=javascript,true]egret.Tween.get(this).to({radius:0},2000)[/mw_shl_code]

把各个跑道上的tween动画按顺序播放即可了

[mw_shl_code=javascript,true]egret.Tween.get(this.car)
                   .to({y:this.stage.stageWidth/2-10},1000)
                   .call(()=>{
                       egret.Tween.get(this).to({radius:0},2000)
                       .call(()=>{
                           egret.Tween.get(this.car).to({y:this.stage.stageHeight-this.stage.stageWidth/2-10},1000)
                           .call(()=>{
                               egret.Tween.get(this).to({radius2: Math.PI},2000)
                               .call(()=>{
                                   this.isMoving = false;
                                   this.onClick();
                                },this);
                           },this); test.zip (971.92 KB, 下载次数: 0, 售价: 1 银子)

2018-10-12 18:26 上传

点击文件名下载附件
源码
                       },this);
                   },this);[/mw_shl_code]

效果图：

具体看源码：

喜欢自取，有意见的指教哈！

源码奉上

思路和我一样 但是我没有用tween 在四段衔接的时候没有调整好的话会出现瞬移一小段。。 点赞！

难道不应该是假设周长为1，设置周长为0-1来计算坐标吗？

Deerboy 发表于 2018-10-13 09:19
思路和我一样 但是我没有用tween 在四段衔接的时候没有调整好的话会出现瞬移一小段。。 点赞！ ...

没有用Tween,那你是怎么控制的呢？请赐教。

Deerboy 发表于 2018-10-13 09:19
思路和我一样 但是我没有用tween 在四段衔接的时候没有调整好的话会出现瞬移一小段。。 点赞！ ...

没有用Tween,那你是怎么控制的呢？请赐教。

yxs 发表于 2018-10-13 09:46
难道不应该是假设周长为1，设置周长为0-1来计算坐标吗？

不会这种方法啊 请赐教

倩倩 发表于 2018-10-15 10:25
没有用Tween,那你是怎么控制的呢？请赐教。

每一帧更新位置 enter_frame 用两个角度控制xy变化 挺麻烦的。。 还有个问题 想请教一下 在跑道上运动的小车怎么取消运动。。。

see 一 see

Deerboy 发表于 2018-10-17 14:35
每一帧更新位置 enter_frame 用两个角度控制xy变化 挺麻烦的。。 还有个问题 想请教一下 在跑道上运动的 ...

目前是可以取消运动 但是有一点bug。。