0

私は単純な三目並べゲームを作成しており、コード内の多くの関数をトリガーするイベント ハンドラーがあります。問題は、ゲームが終了したら、そのイベント ハンドラーを無効にして、ゲームを終了し、ユーザーが操作できないようにすることです。私はそれを調べましたが、アンバインド/バインド、オン/オフ/プロップ/属性の無効化は機能しません。条件が満たされたときにこのイベント ハンドラーを無効にする他の方法はありますか? 最初の親ハンドラーではなく、.one('click') ハンドラーを無効にしたい。

//Creates the variables needed to be manipulated later
$(document).ready(function () {
    var X = 'X';
    var O = 'O';
    var currentPlayer;
    var turnCount = 0;
    var xMoves = [];
    var oMoves = [];
    var cellTracker;
    var winAlert;
    var winConditions = [
        ['c1', 'c2', 'c3'],
        ['c4', 'c5', 'c6'],
        ['c7', 'c8', 'c9'],
        ['c1', 'c4', 'c7'],
        ['c2', 'c5', 'c8'],
        ['c3', 'c6', 'c9'],
        ['c1', 'c5', 'c9'],
        ['c3', 'c5', 'c7']
    ];

    /*Set's the current player to X if turnCount is odd
    And to O if turnCount is even*/
    var setCurrentPlayer = function () {
        if (turnCount % 2 === 0) {
            currentPlayer = O;
        } else {
            currentPlayer = X;
        }
    };

    //Pushes cellTracker's value to the curent player's move variable
    var storeMoves = function () {
        if (currentPlayer === X) {
            xMoves.push(cellTracker);
        } else if (currentPlayer === O) {
            oMoves.push(cellTracker);
        }
    };

    //Compares players moves with the winConditions to determine a winner
    var determineWin = function (pMoves) {
        for (var i = 0; i < winConditions.length; i++) {
            if (winConditions[i].length > pMoves.length) {
                continue;
            }
            for (var j = 0; j < winConditions[i].length; j++) {
                winAlert = false;
                for (var k = 0; k < pMoves.length; k++) {
                    if (pMoves[k] === winConditions[i][j]) {
                        winAlert = true;
                        break;
                    }

                }
                if (!winAlert) break;
            }
             if (winAlert) {
                alert(currentPlayer + " wins!");
                break;
            }
        }
    };

    /*Place's an X or an O when a cell is clicked depending
    on the current player, and updates the turnCount*/
    $('td').one('click', function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        cellTracker = $(this).attr('id');
        storeMoves();
        determineWin(currentPlayer == 'X' ? xMoves : oMoves);
        if (turnCount === 9 && winAlert === false) {
            alert("Tie game!");
        }
        console.log(turnCount, xMoves, oMoves, winAlert);
    });
});
4

3 に答える 3

1

代わりに関数として定義してみてください:

var handler = function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        cellTracker = $(this).attr('id');
        storeMoves();
        determineWin(currentPlayer == 'X' ? xMoves : oMoves);
        if (turnCount === 9 && winAlert === false) {
            alert("Tie game!");
        }
        console.log(turnCount, xMoves, oMoves, winAlert);
    });

そしてそれを添付します：

$('td').one('click', handler);

削除したいときはいつでも、次のように移動できます。

$('td').off('click', handler);

編集:ハンドラー変数を削除する前に定義する必要がありますが、それは妥当なはずです。一番上で定義し、呼び出す前に設定するだけoneで、コードの他の部分で使用できるようになります。

編集：あなたのフィドルを見てください。実用的なソリューションについては、http://jsfiddle.net/c4496/1/を参照してください。前に言ったように、$.off常に機能します。あなたの使い方は間違っていました。$.off必要なことを行うには、ゲームを終了したいことを検出した瞬間に呼び出しを呼び出す必要があります。最後にコードを記述して、変数値を変更するたびに魔法のように呼び出されることを期待するのではありません。そのような動作が必要な場合は、Knockout または AngularJS を参照してください。

于 2013-06-10T05:57:39.890 に答える
0

.off() とイベント名の間隔を使用する

$('td').one('click.mygame', function () {
    turnCount += 1;
    setCurrentPlayer();
    $(this).text(currentPlayer);
    cellTracker = $(this).attr('id');
    storeMoves();
    determineWin(currentPlayer == 'X' ? xMoves : oMoves);
    if (turnCount === 9 && winAlert === false) {
        alert("Tie game!");
    }

    if(condition){ //like ( winAlert === true  || turnCount === 9)
        $('td').off('click.mygame')
    }

    console.log(turnCount, xMoves, oMoves, winAlert);
});

デモ:フィドル

于 2013-06-10T06:00:09.883 に答える
0

クリックイベントが発生する要素を無効にしてみましたか? たとえば、td要素のクリックを無効にする場合は、次を使用できます。

$('td').prop("disabled",true);

再度有効にしたい場合は、次を使用します。

$('td').prop("disabled",false);

prop または attr メソッドを null にしても役に立ちません。上記の方法を使用します。それが役に立てば幸い ！

于 2013-06-10T05:54:32.763 に答える