1

私のゲームでは、文字をクリックして単語を綴る必要があります。文字がクリックされると、単語があるグリッド内の領域にアニメーション化されます。

文字をクリックしてセルにアニメーション化すると、複数クリックできます。セルごとに1文字だけに制限するにはどうすればよいですか。

アニメーションがかかる限りクリック機能を無効にすることを考えていましたが、これをどのように実装するかわかりません。

誰かが私を正しい方向に向けることができますか？

これがクリックイベントです...

$('.drag').on('click', function(e) {
e.preventDefault();

var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);

if (target.length) {
    $(".minibutton").prop("disabled", true);
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);
        target.addClass("occupied");
    });
4

3 に答える 3

1

アニメーションが完了したら、ターゲットに「占有」というクラスを与えるように見えます。代わりに文字がクリックされるとすぐに、クラスに「占有」を与えることができませんでしたか？

if (target.length) {
        target.addClass("occupied"); // add immediately here
于 2012-08-17T12:23:36.077 に答える
1

アニメーションのコールバックからメソッドを移動できると思うaddClass()ので、2回クリックすると、次のように同じセルを取得できません。

 var target = $('.drop-box.spellword:not(.occupied):first').addClass("occupied");

これは、クラスがスタイルに影響を与えない場合にのみ実行可能な考えです。

他の方法はフラグを使用することです。したがって、イベントの開始時に、アニメーションの開始時とコールバック時に要求if(!animating)して設定します。animating = trueanimating = flase

最後に、クリックイベントを有効または無効にするために、次のようなコードで別の関数を作成できます。

var clickEventHandler = function(e) {
    $('.drag').off("click")
    //your current code
    $('.drag').on(clickEventHandler);
}

$('.drag').on('click',  clickEventHandler);

幸運を！

于 2012-08-17T12:24:17.933 に答える
0

文字に個別のIDを指定した場合は、アニメーションの処理中に$（'＃letterId'）。removeAttr（'onclick'）を使用してjQueryを介してクリック属性を削除できます。その後、必要に応じて属性を再度アクティブ化できます。

お役に立てれば。グリーツ、ルポ

于 2012-08-17T12:27:10.410 に答える