Javascript Tic Tac Toe 2玩家

嘿，我有一个关于javascript的问题。 现在我要做一个井字游戏。 我已经到了第一个球员可以在左上角传中的地步。现在我问我的问题，我怎样才能让第一个玩家用符号X，第二个玩家用符号O打开并玩

目前的准则是：

函数erstes（）{
var x=document.getElementById（“erstesfeld”）；
如果（x.innerHTML==“空白”）
{
x、 innerHTML=“x”；
document.getElementById（“erstesfeld”）.style.fontSize=“100px”；
document.getElementById（“erstesfeld”）.style.fontflamily=“草书”；
}
}

.Feld{
显示器：flex；
柔性包装：包装；
宽度：600px；
高度：600px；
}
费尔德分区{
宽度：200px；
高度：200px；
背景色：浅绿色；
边框颜色：黑色；
}
艾因斯先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
zwei先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
德雷先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
维尔先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
fünf先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
塞克斯先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
西本先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
A.acht{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
诺恩先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}

TTT
空白
空白
空白
空白
空白
空白
空白
空白
空白

您有一个所谓的标志-一些布尔变量-用于保存当前用户的状态，在移动结束时，您可以切换该标志以指向另一个用户

//定义flag_uu以保持状态
让isCurrentX=true；
$（文档）.ready（函数（）{
$（文档）。在（'click'，'button:not（.owned'）上，函数（）{
//根据当前的u标志u状态采取行动
if（isCurrentX）{
$（this.addClass（'owned x'）；
}否则{
$（this.addClass（'owned o'）；
}
$（this.prop（'disabled'，true）；
//开关标志状态
isCurrentX=！isCurrentX；
});
});
按钮：在{
内容：“点击”；
显示：内联；
字体：斜体；
}
按钮。x：之前{
内容：“X”；
显示：内联；
字体风格：继承；
}
o:以前{
内容：“O”；
显示：内联；
字体风格：继承；
}

总结

创建一个变量来跟踪当前玩家
为zero创建另一个函数
创建一个函数来处理单击事件
在该函数中，检查当前播放机，并基于该播放机调用erstes或zero函数

let currentPlayer=“player1”；
功能手柄（盒）{
如果（当前播放器==“播放器1”）{
厄尔斯特斯（框）；
currentPlayer=“player2”；
}否则{
零（框）；
currentPlayer=“player1”；
}
}
功能表（方框）{
var x=盒子；
如果（x.innerHTML==“空白”）
{
x、 innerHTML=“x”；
x、 style.fontSize=“100px”；
x、 style.fontfamine=“草书”；
}
}
函数零（框）{
var o=盒子；
如果（o.innerHTML==“空白”）
{
o、 innerHTML=“o”；
o、 style.fontSize=“100px”；
o、 style.fontfamine=“草书”；
}
}
.Feld{
显示器：flex；
柔性包装：包装；
宽度：600px；
高度：600px；
}
费尔德分区{
宽度：200px；
高度：200px；
背景色：浅绿色；
边框颜色：黑色；
}
艾因斯先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
zwei先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
德雷先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
维尔先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
fünf先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
塞克斯先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
西本先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
A.acht{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
诺恩先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}

TTT
空白
空白
空白
空白
空白
空白
空白
空白
空白
最简单的方法是，只需存储一个布尔标志，以指示您是处于
X
还是
O
模式

但是请不要写这个函数9次。对所有字段重复使用一个函数（您可能也不应该重复css 9次！）


让isX=true；
document.queryselectoral（“按钮”）.forEach（b=>b.addEventListener（“单击”），e=>{
让target=e.target
如果（target.innerHTML==“空白”）
{
target.innerHTML=isX？“X”：“O”；
target.style.fontSize=“100px”；
target.style.fontfamine=“草书”；
isX=！isX；
}
}))
.Feld{
显示器：flex；
柔性包装：包装；
宽度：600px；
高度：600px；
}
费尔德分区{
宽度：200px；
高度：200px；
背景色：浅绿色；
边框颜色：黑色；
}
艾因斯先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
zwei先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
德雷先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
维尔先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
fünf先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
塞克斯先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
西本先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
A.acht{
宽度：200px；
高度：200px；
边框颜色：黑色；
}
诺恩先生{
宽度：200px；
高度：200px；
边框颜色：黑色；
}

TTT
空白
空白
空白
布兰