gpt4 book ai didi

javascript - 井字游戏不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 03:02:05 26 4
gpt4 key购买 nike

他,伙计们!有人会这么好心,告诉我出了什么问题吗?我想编写一个 Tic Tac Toe 游戏。但我不想用“O”和“X”来标记游戏领域。不,我想用不同的颜色标记它们。所以,我遇到的问题是,一个玩家应该有蓝色,另一个玩家应该有红色。所以每次一个玩家点击游戏时,另一个玩家应该有另一种颜色。像这样:

  • 玩家 1.:点击 --> blue
  • 玩家 2.:点击 --> 红色
  • 玩家 1.:点击 --> blue
  • ...

但这行不通!!!如果你们中的一些人能够回答我的问题,我将不胜感激。

源代码:

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

最佳答案

您应该利用事件绑定(bind)的工作原理。如果这样做,则不必遍历所有可能的单元格——您可以通过 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/

If 还可以更适本地绑定(bind)到单元格,以便您仅在单击单元格时获得单击事件。例如:

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/

关于javascript - 井字游戏不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31145193/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com