Question

他，伙计们！有人会这么善良，告诉我有什么不对吗？我想编写一个Tic Tac Toe游戏。但我不想用“O”和“X”标记游戏区域。不，我想用不同的颜色标记它们。所以，我遇到的问题是，一个玩家应该是蓝色，另一个玩家应该是红色。因此，每当玩家点击游戏时，其他玩家应该拥有另一种颜色。像这样：

玩家1：点击 - ＆gt;蓝色
玩家2：点击 - ＆gt;红色
玩家1：点击 - ＆gt;蓝色
...

但这不起作用！如果你们中的一些人能够回答我的问题，我将非常感激。

源代码：

<html>
<head>
    <meta charset="utf-8" />
    <title>Tic Tac Toe |</title>
    <link rel="stylesheet" type="text/css" href="stylesheetTicTacToe.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

        <table>
            <tr>
                <td><div id="field_7" class="gameBoard"></div></td>
                <td><div id="field_8" class="gameBoard"></div></td>
                <td><div id="field_9" class="gameBoard"></div></td>
            </tr>
            <tr>
                <td><div id="field_4" class="gameBoard"></div></td>
                <td><div id="field_5" class="gameBoard"></div></td>
                <td><div is="field_6" class="gameBoard"></div></td>
            </tr>
            <tr>
                <td><div id="field_1" class="gameBoard"></div></td>
                <td><div id="field_2" class="gameBoard"></div></td>
                <td><div id="field_3" class="gameBoard"></div></td>
            </tr>
        </table>

        <script type="text/javascript">

        var count = 1;

        $(document).click(function() {
            for(i = 0; i < 10;) {
                if(count % 2 == 1) {
                    $('.gameBoard').click(function() {
                        $(this).css("background-color", "pink");
                    })
                    count++;
                    i++;
                } else {
                    $('.gameBoard').click(function() {
                        $(this).css("background-color", "blue");
                    })
                    count++;
                    i++;
                }
            }
        })
        </script>

</body>
</html>

Answer 1

您应该利用事件绑定的工作原理。如果这样做，则不必遍历所有潜在的单元格 - 您可以通过event.target知道单击了哪个单元格。例如：

var playCount = 0;

$(document).click(function(event) {
    var cell = $(event.target).closest('.gameBoard');
    if (!cell.hasClass("played")) {
        if (playCount % 2 == 1) {
            cell
                .css("background-color", "pink")
                .addClass("played");
            playCount++;
        } else {
            cell
                .css("background-color", "blue")
                .addClass("played");
            playCount++;
        }
    }
});

JSFiddle：http://jsfiddle.net/4hgr0wke/

如果还可以更合适地绑定到单元格，以便在单击单元格时仅获得单击事件。例如：

var playCount = 0;

$(document).on('click', '.gameBoard', function(event) {
    var cell = $(event.target).closest('.gameBoard');
    if (!cell.hasClass("played")) {
        if (playCount % 2 == 1) {
            cell
                .css("background-color", "pink")
                .addClass("played");
            playCount++;
        } else {
            cell
                .css("background-color", "blue")
                .addClass("played");
            playCount++;
        }
    }
})

JSFiddle：http://jsfiddle.net/4hgr0wke/1/

Tic Tac Toe不起作用

1 个答案: