1

合計が与えられ、コンテナーの下部から上部に数字がアニメーション化されるモグラたたきスタイルのゲームを作成しています。ゲームの目的は、合計に対する正しい答えをクリックして、できるだけ多くの正しい答えを収集することです。

また、ゲームをより楽しくするために、いくつかのアイコンを追加しました。アイコンの 1 つは、アニメーションを 5 秒間高速化する炎です。

現時点では、すべてのアイコンが一度に非常に高速に移動します。このようなことが起こらないように、フローを通常どおり継続させたいと考えていますが、ペースを速めています。

これは私がこれまでに持っているものです..

$(".character").click(clickThrottled(function () {
    if ($(this).hasClass("heat")) {
        $(this).effect("explode", 400);
        $("#container").children().css('top', '400px').fadeIn(1000).animate({
            'top': '-100px'
        }, 3000).fadeOut(1000);
    }
}));

誰かが私が間違っているところを教えてもらえますか? デモを見て、炎のアイコンをクリックして、問題をよりよく理解してください。

フィドル: http://jsfiddle.net/pUwKb/52/

4

2 に答える 2

2

イージングは​​、すべてのエレメントを同時に一番上までイーズしますが、スタイリッシュな方法で (最後に減速するように) します。

実際に必要なことは、'isFlameOn' または 'speedModifier' というフラグを保持することです。炎のアイコンがクリックされたら、'speedModifier' を 2 または 3 のように設定します。これにより、速度が通常の 2 倍または 3 倍になります。

これを削除します：

$("#container").children().css('top', '400px').fadeIn(1000).animate({
        'top': '-100px'
}, 3000).fadeOut(1000);

オブジェクトの速度を個別に変更するためです。

次に、各アイコンを管理 (移動) する場所に移動し、次のように言う代わりに: item[i].y -= item[i].speed;

item[i].y -= item[i].speed * speedModifier; を実行します。

トップに到達するためにそれらをアニメーション化する場合は、それらのアニメーション間隔のそれぞれを追跡し、それらをリセットする必要があります。したがって、アイテムを作成してから .animate する場合は、その .animate 効果を削除し、補正された speedModifier パーセントで新しい効果を作成する必要があります。代わりにフレームごとに行うと、簡単な日になります:)。

炎の効果を使い果たしたい場合は、speedModifier を 1 に戻します。各アイテムをアニメーション化した場合は、現在の .animate を再度削除して、通常の速度に置き換える必要があります。効果が切れた後に元の速度に戻すことができるように、各アイテムのランダムな速度を追跡してください。

于 2013-01-17T10:48:39.003 に答える
1

jQuery UI が提供するさまざまなイージングを見てください。問題が解決するはずです。それらを使用するには、プロパティ イージングを設定するだけですanimate(より高度なものが必要な場合は、jQuery UI も含める必要があります)。

さらにカスタマイズするには、 のstepコールバックを使用できますanimate。

于 2013-01-17T10:27:50.730 に答える