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的唯一位置是来自click事件处理程序（已在HTML click属性中定义）。

请注意，名称startGame令人困惑，因为它实际上并不能开始游戏，因此会发挥作用。这可能也是您引入此错误的原因。为函数（和变量）使用好名字很重要。

井字游戏中的开关转弯功能不起作用

1 个答案: