4

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

私の問題は、ユーザーが数字やその他のアイコンを複数回クリックしてクラッシュする可能性があることです。これを克服する方法はありますか？

このjQuery関数を試しましたone

$(".character").one("click", function() {
});

しかし、アイコンが再び表示されるので、もう一度クリックできるようにする必要があります。

また、タイムアウトを設定しようとしましたが、機能していないようです。誰かが e を正しい方向に向けることができますか?

    setTimeout(function() {
    $(".character").one("click", function() {
    });
}, 3000);

フィドル: http://jsfiddle.net/GvNB8/

4

2 に答える 2

3

あなたの主な問題は、キャラクターを再表示するときにキャラクターとやり取りしていないことです。その場合、ユーザーがクリックするのを防ぐ唯一の方法は、タイムアウトで連続して 2 回クリックするのを防ぐ方法を組み込むことです。

そのメソッドは次のようになります。

function clickThrottled(fn) {
  var click = true;
  return function () {
    if(click) {
      click = false;
      fn.apply(this, arguments);
      setTimeout(function () { click = true; }, 1000);
    }
  };
}

次に、次のように関数を使用します。

$('.character').click(clickThrottled(function () {
   // do your one time magic.
}));

ここで使用しているのは JavaScript クロージャーです。クリック イベント ハンドラーに渡す関数は、基になる関数を 1 回だけ呼び出し、その後、すべての呼び出しを 1 秒間無視してから再度有効にします。

要素が画面に再描画されたときに要素を再度有効にする通常の方法を使用することをお勧めしますが、上記も機能します..

于 2013-01-15T09:21:51.710 に答える
1

このアイテムがクリックされたことを示す情報を追加してみませんか :

$(".character").click(function(){
    if(!$(this).data("hasBeenClicked")) {
        $(this).data("hasBeenClicked", true);
        // the rest of your logic ...
    }
});
于 2013-01-15T09:27:58.383 に答える