如何判断玩家在井字游戏中是赢还是输答案

【问题标题】：How to tell if a player wins or loses in tic tac toe如何判断玩家在井字游戏中是赢还是输
【发布时间】：2016-11-15 23:33:49
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<link href="tictactoe.css" type="text/css" rel="stylesheet" >
<meta charset= "utf-8">
<title>Tic Tac Toe</title>
</head>
<body>

<h1>Tic Tac Toe</h1>
<form>
Current Player <p id="currentplayer">X</p>
<table id= "game" border="1">
<tr>
<td type = "button" onclick = "set('box1');" id = "box1" ></button></td>
<td type = "button" onclick = "set('box2');" id = "box2" ></button></td>
<td type = "button" onclick = "set('box3');" id = "box3" ></button></td> 
</tr>
<tr>
<td type = "button" onclick = "set('box4');" id = "box4" ></button></td>
<td type = "button" onclick = "set('box5');" id = "box5" ></button></td>
<td type = "button" onclick = "set('box6');" id = "box6" ></button></td> 
</tr>
<tr>
<td type = "button" onclick = "set('box7');" id = "box7" ></button></td>
<td type = "button" onclick = "set('box8');" id = "box8" ></button></td>
<td type = "button" onclick = "set('box9');" id = "box9" ></button></td> 
</tr>
</table>

<button id = "restart">New Game </button>
</form>

<script src= "tictactoe.js" type = "text/Javascript"></script>
</body>
</html>

这是我的 HTML 代码。

h1 {
font-family: "Courier New";
}
body {
text-align: center;
background-color: #FFB6C1;
}

table {
height: 300px;
width: 300px;
margin: auto;

}

button {
height: 100px;
width: 100px;
}
#box1 {
height: 100px;
width: 100px;
}

#box2 {
height: 100px;
width: 100px;
}
#box3 {
height: 100px;
width: 100px;
}
#box4 {
height: 100px;
width: 100px;
}
#box5 {
height: 100px;
width: 100px;
}
#box6 {
height: 100px;
width: 100px;
}
#box7 {
height: 100px;
width: 100px;
}
#box8 {
height: 100px;
width: 100px;
}
#box9 {
height: 100px;
width: 100px;
}

这是我用于井字游戏的 CSS。

function changeplayer()
{
var player = document.getElementById("currentplayer").innerHTML;
if(player == "X")
{
    document.getElementById("currentplayer").innerHTML = "O";
}
else{
    document.getElementById("currentplayer").innerHTML = "X";
}

}

function set(idvalue)
{
var buttonclicked = document.getElementById(idvalue);
if(buttonclicked.innerHTML == "" || buttonclicked.innerHTML == null)
{
    var player = document.getElementById("currentplayer").innerHTML; 
    buttonclicked.innerHTML = player;
}
changeplayer();

}

这是我的井字游戏 JS。问题是我不知道如何通知玩家他们是否赢了。到目前为止，在董事会上，两个人可以轮流进行，仅此而已。如何在 Javascript 中添加代码以显示“X”或“O”已获胜？另外，我想知道到目前为止我的代码是否正确。所有建议将不胜感激！

【问题讨论】：

很高兴您已经包含了一些代码，但是在发布到这里之前，做一些研究并自己尝试一下确实是个好主意。如果您尝试并认为您已经接近，我们可以帮助您朝着正确的方向前进。现在，你基本上已经给了我们一个基础，并且你要求我们建造房子——获胜的逻辑是迄今为止这个练习中最复杂/最困难的部分。

标签： javascript

【解决方案1】：

要知道哪个玩家获胜，您需要知道某人是否连续三个“X”或“O”。您可以通过在代码中添加更多逻辑或从 UI 中获取 CSS 值/状态来做到这一点。

建议在代码中加入更多逻辑。您可以通过例如将多维数组添加到您的 javascript 代码中。在那里，您正在构建 3x3 UI，其中包含 3 行数组，每行 3 个条目。

var gameBoard = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

但是，您存储的不是 1 到 9 的数字，而是哪个玩家将他/她的“盒子”放到了那个位置。你可以在你的 set() 函数中做到这一点，正如你在那里所知道的那样，哪个玩家选择了哪个框。每次调用 set() 函数后，您遍历该数组并找出是否有人有三个“在一行或一列中的框”

除此之外，如果您查看 CSS，您使用的是 CSS ID 而不是类。一个类可以定义一次并用于您的任何“盒子”，而不是编写相同的定义 9 次。

在您担心代码质量等问题之前，我建议您“以某种方式”让它工作，然后尝试逐步改进它。

玩得开心，不要犹豫再问。

【讨论】：