Javascript Tic Tac Toe不起作用_Javascript_Jquery_Css

Javascript Tic Tac Toe不起作用

javascript jquery css

Javascript Tic Tac Toe不起作用,javascript,jquery,css,Javascript,Jquery,Css,他，伙计们！有人能告诉我怎么了吗？我想编一个井字游戏。但我不想用“O”和“X”来标记游戏场。不，我想用不同的颜色标记它们。所以，我的问题是，一个玩家应该是蓝色的，另一个玩家应该是红色的。因此，每当一名玩家点击游戏时，另一名玩家应该使用另一种颜色。像这样：播放器1：单击-->蓝色播放器2：单击-->红色播放器1：单击-->蓝色但是这不起作用！！！如果你们中的一些人能够回答我的问题，我将非常感激源代码： <html> <head> <me

他，伙计们！有人能告诉我怎么了吗？我想编一个井字游戏。但我不想用“O”和“X”来标记游戏场。不，我想用不同的颜色标记它们。所以，我的问题是，一个玩家应该是蓝色的，另一个玩家应该是红色的。因此，每当一名玩家点击游戏时，另一名玩家应该使用另一种颜色。像这样：

播放器1：单击-->蓝色
播放器2：单击-->红色
播放器1：单击-->蓝色

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

源代码：

<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>


抽搐|
var计数=1；
$（文档）。单击（函数（）{
对于（i=0；i<10；）{
如果（计数%2==1）{
$（'.gameBoard'）。单击（函数（）{
$（this.css（“背景色”、“粉色”）；
})
计数++；
i++；
}否则{
$（'.gameBoard'）。单击（函数（）{
$（this.css（“背景色”、“蓝色”）；
})
计数++；
i++；
}
}
})

您应该利用事件绑定的工作方式。如果这样做，就不必遍历所有可能的单元格——通过

事件.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++;
        }
    }
});

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：

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

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++;
        }
    }
});

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++;
        }
    }
})

jsiddle:

看起来您对偶数点击的检查是错误的。如果（计数%2==0）将其替换为

if

，并查看更多问题。使用

count%2==1

可以将其除以2。这只是意味着它将在另一种情况下运行，而不是

计数%2==0

。是的，但用户显然希望不同的单击使用不同的颜色。因此，它将始终执行

else

。对吧？：）你知道，我是jQuery的新手！对于每个玩过方块的玩家来说，最好有两个等级，然后将样式与方块分开code@EdHeal是的，我认为这是有意义的。@user4825080如果这对您有帮助，您可以通过单击答案左侧的复选标记（它将变为绿色）来接受此答案！