javascript - 开关转动功能在 Tic Tac Toe 游戏中不起作用

Question

(如果可能的话，请使用基本方法来解决这个问题。我仍然是一个绝对的初学者，所以我不想让自己感到困惑)我正在尝试创建一个名为changeturns的函数，以便当我在startGame中运行这个函数时功能回合可以在 X 和 O 之间自动切换。但是回合仅在单个玩家玩完一轮后才改变(即仅在 O 获胜后才切换到 X)。

var arrayx = [];
var turn = "O";
var scoreX = 0;
var scoreO = 0;

  
function refresh() {
  for (var cell = 0; cell < 9; cell++) {
    document.getElementById("cell" + cell).innerHTML = " ";
  }
}

function changeturns(turn) {

 
}

function startGame(cell) {
 
  
  document.getElementById("cell" + cell).innerHTML = turn;
  checkwin(turn);
}

function checkwin(turn) {
 }
   

startGame(); // should not be called here

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fdd;
}

table {
    border-collapse:collapse;
    position:absolute;
    left:50%;
    margin-left:-155px;
    top:50px;
    background-color:pink;
}

td{
  border:2px solid#333;
  height:100px;
  width:100px;
  text-align:center;
  vertical-align:middle;
  font-family:"Comic Sans MS",cursive;
  font size: 70px;
  cursor: pointer;
}
table tr:first-child td{
  border-top:0;
}

table tr:last-child td{
  border-bottom:0;
}

table tr td:first-child{
  border-left:0;
}

table tr td:last-child{
  border-right:0;
}

.endgame{
  display:none;
  width:200px;
  top:120px;
  color:white;
  font size:2em;
  background-color:rgba(304,144,66,0.7)
}

<h1>Wanna Play Tic Tac Toe?</h1>
<p id="qiguai">
    <b>O player scoreboard</b>
</p>
    
<p id="roundannouncer"> 
</p>
<p id="qiguai2">
    <b>X player scoreboard</b> 
</p>
<p id="roundannouncer2">    
</p>
<table id="myTable" width="400" height="400">
  <tr>
    <td class="cell" id="cell0" onclick="startGame(0)"></td>
    <td class="cell" id="cell1" onclick="startGame(1)"></td>
    <td class="cell" id="cell2" onclick="startGame(2)"></td>
  </tr>
      
  <tr>
   <td class="cell" id="cell3"  onclick="startGame(3)"></td>
    <td class="cell" id="cell4" onclick="startGame(4)"></td>
    <td class="cell" id="cell5" onclick="startGame(5)"></td>
  </tr>
      
  <tr>
    <td class="cell" id="cell6"  onclick="startGame(6)"></td>
    <td class="cell" id="cell7"  onclick="startGame(7)"></td>
    <td class="cell" id="cell8"  onclick="startGame(8)"></td>
  </tr>
</table>

<div class="endgame">
  <div class="text">
  </div>
</div>

<button onclick="refresh()"> Replay </button>

我尝试在 startGame 函数内部和外部调用该函数，但都不起作用。

Answer 1

问题是 checkwin 函数再次调用 startGame，因此回合也再次切换。然后会发生错误，因为 startGame 是在没有参数的情况下调用的。

您永远不应该在代码中调用 startGame 。删除这两个实例。调用 startGame 的唯一位置是点击事件处理程序(您已在 HTML click 属性中定义)。

请注意，名称 startGame 令人困惑，因为它实际上并不开始游戏，而是下棋。这可能也是您引入此错误的原因。为函数(和变量)使用一个好的名称很重要。