0

我正在从这里学习 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.velY = Math.sin(platypus.x) * 5; ，但没有成功，有什么想法吗？

4

2 回答 2

0

Haha fun! How about this?

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;
    }
}
于 2014-01-21T18:09:13.730 回答
0

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

在每个 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;

添加

如果您不希望您的鸭嘴兽不以相同的节奏挥动，您可以为每个鸭嘴兽添加一个ticker-offset：platypus.tickOffset = Math.random()*2*Math.PI在init并在tick中使用它：

platypus.y = platypus.baseY + Math.sin((tickCounter+platypus.tickOffset) * frequency) * amplitude;
于 2013-09-12T09:02:03.730 回答