Javascript 如何在波浪运动中移动html5（createjs）中的对象

我在这里学习html5和画布交互

下面是部分代码

    function handleComplete() {
    exportRoot = new lib.PlatypusGame();
    exportRoot.removeChild(exportRoot.platypus);

    stage = new Stage(canvas);
    stage.addChild(exportRoot);

    Touch.enable(stage);

    Ticker.setFPS(20);
    // add the listener to window, so we can do some work before updating the stage:
    Ticker.addListener(window);
}

function tick() {
    if (platypii.length < 1 || Math.random() < 0.01 && platypii.length < 5) {
        var platypus = new lib.Platypus();
        platypus.scaleX = platypus.scaleY = Math.random()*0.3+0.3;
        platypus.x = 800;
        // nominalBounds holds the dimensions of the first frame of the symbol at export time.
        platypus.y = Math.random()*(400-platypus.scaleY*platypus.nominalBounds.height);
        platypus.velX = (1+platypus.scaleX)*-6;
        platypus.velY = 0;
        // we only want to know about clicks on the balloon, not the whole platypus:
        platypus.platypusIdle.balloon.onClick = handleBalloonClick;
        platypus.onPopped = handleBalloonPopped;

        platypii.push(platypus);
        exportRoot.addChild(platypus);
    }

    // go in reverse to make it easier to splice items from the array
    for (var i=platypii.length-1; i>=0; i--) {
        platypus = platypii[i];

        // add gravity to the Y velocity if it's falling:
        if (platypus.falling) { platypus.velY += 3; }
        platypus.x += platypus.velX;
        platypus.y += platypus.velY;

        if (platypus.x < -platypus.nominalBounds.width*platypus.scaleX || platypus.y > 400) {
            platypii.splice(i,1);
            exportRoot.removeChild(platypus);
            // add +100 points if it fell or -500 if it escaped
            updateScore(platypus.y > 400 ? 100 : -500);
        }
    }

    stage.update();
}

函数handleComplete（）{
exportRoot=new lib.PlatypusGame（）；
去叶扁豆（exportRoot.platypus）；
阶段=新阶段（画布）；
stage.addChild（exportRoot）；
触摸。启用（阶段）；
股票代码setFPS（20）；
//将侦听器添加到窗口，以便我们可以在更新阶段之前进行一些工作：
Ticker.addListener（窗口）；
}
函数tick（）{
if（platypi.length<1 | | Math.random（）<0.01&&platypi.length<5）{
var platypus=new lib.platypus（）；
platypus.scaleX=platypus.scaleY=Math.random（）*0.3+0.3；
鸭嘴兽x=800；
//nominalBounds保存导出时符号第一帧的尺寸。
platypus.y=Math.random（）*（400 platypus.scaleY*platypus.nominalBounds.height）；
鸭嘴兽鳞=（1+鸭嘴兽鳞）*-6；
鸭嘴兽=0；
//我们只想知道气球上的点击，而不是整个鸭嘴兽：
platypus.platypusIdle.balloon.onClick=把手把手把手onClick；
鸭嘴兽：把手打开了；
鸭嘴兽；
鸭嘴兽；
}
//反向进行，以便更容易从阵列拼接项目
对于（变量i=platypi.length-1；i>=0；i--）{
鸭嘴兽=鸭嘴兽[i]；
//如果Y速度下降，则将重力添加到Y速度：
如果（鸭嘴兽坠落）{platypus.velY+=3；}
鸭嘴兽x+=鸭嘴兽绒毛；
鸭嘴兽y+=鸭嘴兽y；
如果（鸭嘴兽.x<-platypus.nominalBounds.width*platypus.scaleX | | platypus.y>400）{
平台拼接（i，1）；
鸭嘴兽；
//如果掉落，加+100分；如果逃脱，加-500分
更新核心（鸭嘴兽y>400？100:-500）；
}
}
stage.update（）；
}

---

我试图通过改变鸭嘴兽来改变它，使鸭嘴兽在波浪中移动；to platypus.velY=Math.sin（platypus.x）*5，但是没有成功，有什么想法吗？

你需要添加一个刻度计数器，波动应该是周期性的

在每个tick（）的开头，将计数器增加1

tickCounter++
你的速度是：

platypus.velY = Math.sin(tickCounter * frequency) * amplitude

但是由于JS计算时间的不规则性，这实际上可能会移动
鸭嘴兽
，因此，如果您希望对象保持在同一位置，只需上下波动，则执行以下操作更安全：

// at init
platypus.baseY = platypus.y = Math.random()*(400-platypus.scaleY*platypus.nominalBounds.height);

// in the tick()
platypus.y = platypus.baseY + Math.sin(tickCounter * frequency) * amplitude;


添加

如果你不想让你的PlatyPi以相同的方式波动，那么你可以为每个platypus添加一个代码偏移量：
platypus.tickOffset=Math.random（）*2*Math.PI
，并在勾号中使用它：

platypus.y = platypus.baseY + Math.sin((tickCounter+platypus.tickOffset) * frequency) * amplitude;

哈哈！这个怎么样


JSFIDLE会很好…谢谢你的回答，但我认为platypus.velY在platypus调度时只更新了一次，而没有更新一个帧，所以即使我应用了你的答案，platypus也只朝一个方向运行。我不知道你想说什么，更新velY的时间和点取决于你，这不受任何限制吗？或者您是说，您不想更新每个tick（）的值？如果是这样的话，那么只需使用
baseY
的方法，你的频率1000太高了，试试这个：
platypus.velY=Math.sin（platypus.x/50）*5
if (platypii.length < 1 || Math.random() < 0.01 && platypii.length < 5) {
    var platypus = new lib.Platypus();
    platypus.scaleX = platypus.scaleY = Math.random() * 0.3 + 0.3;
    platypus.x = 800;
    platypus.angle = 0;
    platypus.inc = Math.random() - 0.2;
    // nominalBounds holds the dimensions of the first frame of the symbol at export time.
    platypus.y = Math.random() * (400 - platypus.scaleY * platypus.nominalBounds.height);
    platypus.velX = (1 + platypus.scaleX) * -6;
    platypus.velY = 0;

    //platypus.y = platypus.velY;
    //platypus.velY = Math.sin(tickCounter * platypus.velX) * 5;
    // we only want to know about clicks on the balloon, not the whole platypus:
    platypus.platypusIdle.balloon.onClick = handleBalloonClick;
    platypus.onPopped = handleBalloonPopped;

    platypii.push(platypus);
    exportRoot.addChild(platypus);
}

for (var i = platypii.length - 1; i >= 0; i--) {
    platypus = platypii[i];
    platypus.velY = Math.sin(platypus.angle) * 10;
    platypus.angle += platypus.inc;
    if (platypus.falling == true) {
        platypus.velY = 0;
        platypus.velY += 30;
    }
}