Question

我正在从这里学习html5和画布互动

http://www.adobe.com/devnet/createjs/articles/getting-started.html

这是代码的一部分

    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();
}

我试图通过改变platypus.velY = 0来改变Platypus进入波浪状态。 to platypus.velY = Math.sin（platypus.x）* 5; ，但没有成功，任何想法？

Answer 1

你需要添加一个滴答计数器，wavemovement应该是定期的。

在每个tick（）的开头，你将计数器增加1 tickCounter++; 你的速度将是：

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

然而由于JS计算时间的不规则，这实际上可能会移动platypus，因此如果您希望您的对象保持在同一位置并且只是上下波动，那么更安全地执行以下操作：

// 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;

<强>加成

如果你想让你的platypii不是所有波浪在同一个节奏中你可以为每个鸭嘴兽添加一个自动收报机偏移：platypus.tickOffset = Math.random()*2*Math.PI在初始化并在勾选用户：

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

Answer 2

哈哈好玩！怎么样？

http://jsfiddle.net/sebastian_derossi/xAy7u/10/

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;
    }
}

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

2 个答案: