Question

想寻求你们的意见。我只是初学者。 :(我正在尝试制作一款游戏，虽然我还没有参与功能部分，但我还是建立了一个2人Tic Tac Toe。你能在这里实施游戏吗？

我想要做的是，一旦玩家点击它，我想要禁用“div”，我还不知道如何使用JQuery实现它。 TIA。

SCRIPT：

$(document).ready(function() {         
            var player1 = true;
            var player2 = true;
            var O = "<img id='o1' src='img/O.png' value='o'/>";
            var X = "<img id='x1' src='img/X.png' value='x'/>";

            function resetP1() {
                player1 = true;
            }

            function resetP2() {
                player2 = true;
            }

            $(".box").click(function() {
                //var value = $(this).attr('value');
                //$(this).hide();

                if(player1) {
                    $(this).html(X);
                    player1 = false;
                    resetP2();
                } else {
                    $(this).html(O);
                    player2 = false;
                    resetP1();
                }

            });
        });

HTML：

        <div id="b1" value="b1" class="box">

        </div>
        <div id="b2" value="b2" class="box">

        </div>
        <div id="b3" value="b3" class="box">

        </div>
        <div id="b4" value="b4" class="box">

        </div>
        <div id="b5" value="b5" class="box">

        </div>
        <div id="b6" value="b6" class="box">

        </div>
        <div id="b7" value="b7" class="box">

        </div>
        <div id="b8" value="b8" class="box">

        </div>
        <div id="b9" value="b9" class="box">

        </div>

Answer 1

简单的做法就是为它添加一个ID属性，如下所示：

<div id="b9" value="b9" class="box">

</div>

然后在jQuery中尝试将ID添加为

$('box').click(function () {
   /* among all other code */
   $(this).attr('id', $(this).attr('id') + ' disabled');
}

现在DIV将有一个禁用的ID，

然后当您点击该框时，请检查该div的ID，如果它具有disabled ID，return false。

Answer 2

当你做＆＃34; $（this）.html（X）;＆＃34;时，这是对文档的引用，而html（）尝试用X覆盖他的所有内容，但是X不是＆＃39 ; ta string！

例如，你可以制作一个＆lt;表＆gt;，并在js：

<script>

// Encapsulation to preserve scope
(function(){

var currentPlayer = "X";

function changePlayer(){
    if( currentPlayer  == "X" )
        currentPlayer = "O";
    else
        currentPlayer = "X";
}

jQuery("td").each(function(){
    // This = current TD
    jQuery(this).click(function(){
        jQuery(this).html( currentPlayer );
        jQuery(this).unbind("click");
        changePlayer();
        // and call some function to evaluate the board
    })

});

})();

<script>

Answer 3

/ *主要游戏处理类* / var instructions =“这是一个双人游戏Tic Tac Toe游戏。游戏的目标是在一行/一列/对角线上获得三个相同类型的项目。点击一个单元格用你的符号标记它。标记你的朋友一起和你一起享受这个游戏。“; var TicTacToe = { 转：“O”，//记录下轮到谁 board：[“”，“”，“”，“”，“”，“”，“”，“”，“”，“”]，//保留TicTacToe Board的记录 win：false，//记录谁赢了游戏结束

/* Clears and starts a new game with a new board */
restartGame: function () {
    // Draw the board
    alert("anil singhania");
    var board_table = '<table class="board" border="0px" cellpadding="0px" cellspacing="0px" align="center"><tr><td id="ttt0">&nbsp;</td><td id="ttt1">&nbsp;</td><td id="ttt2">&nbsp;</td></tr><tr><td id="ttt3">&nbsp;</td><td id="ttt4">&nbsp;</td><td id="ttt5">&nbsp;</td></tr><tr><td id="ttt6">&nbsp;</td><td id="ttt7">&nbsp;</td><td id="ttt8">&nbsp;</td></tr></table>';
    $("#board").html(board_table);
    $("#menu").hide();

    // clear the board
    this.board = ["", "", "", "", "", "", "", "", "", ""];

    // Add on-click events to each of the boxes of the board
    $("#board td").click(function (e) {
        TicTacToe.move(e.target.id);
    });

},

/* Handles clicks spaces on the board */
move: function (id) {
    var space = $("#" + id);  // Board space table element
    var num = id.replace("ttt", ""); // # representing the space on the board

    // If no one's gone there, and the game isn't over, go there!
    if (!this.board[num] && !this.win) {
        space.html(this.turn);
        this.board[num] = this.turn;
        this.nextTurn();  // End turn
    }
},

/* Iterate turn and check if anyone one yet */
nextTurn: function () {
    this.turn = (this.turn == "O") ? "X" : "O";
    this.win = this.check4Win();
    if (this.win) {
        this.endGame();
    }
},

/* Display who won and options for new games */
endGame: function () {

    if (this.win == "Cat") {
        $("#menu").html("Game<br /> Over.");
        $("#board").off("click");
    } else {
        $("#menu").html(this.win + " wins!");
        $("#board").off("click");
    }
    $("#menu").append("<div id='play_again'>Play Again</div>");

    // Button for playing again.
    $("#play_again").click(function () { TicTacToe.restartGame(); });
    $("#menu").show();
    this.win = false;

},

// If any of these patters of board spaces have all X's or all O's somebody won!
wins: [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [6, 4, 2]],

/* Check for whether someone won the game of it was a Cat's game. */
check4Win: function () {

    // Loop through all possible winning combinations 
    for (k in this.wins) {
        var pattern = this.wins[k];
        var p = this.board[pattern[0]] + this.board[pattern[1]] + this.board[pattern[2]];
        if (p == "XXX") {
            return "X";  // X Won!
        } else if (p == "OOO") {
            return "O";  // O Won!
        }
    }

    // Check if all spaces in the board are filled, then its a Cat's game
    var cnt = 0;
    for (s in this.board) {
        if (this.board[s]) { cnt += 1; }
    }
    if (cnt == 9) {
        return "Cat";  // Cat's game!
    }
}

};

$（document）.ready（function（）{

// Start a game!
TicTacToe.restartGame();
$('.instructions').click(function () {
    alert(instructions);
});

}）;

enter code here

JQuery Tic Tac Toe 2玩家

3 个答案: