Question

<h1>TicTacToe!</h1>
<table>
    <tr>
        <td class="cell left"id="0"></td>
        <td class="cell "id="1"></td>
        <td class="cell"id="2"></td>
    </tr>
    <tr>
        <td class="cell left"id="3"></td>
        <td class="cell"id="4"></td>
        <td class="cell"id="5"></td>
    </tr>
    <tr>
        <td class="cell left"id="6"></td>
        <td class="cell"id="7"> </td>
        <td class="cell"id="8"></td>
    </tr>
</table>



body {
      font-family: system-ui;
      background: #ffffff;
      color: black;
      text-align: center;
    }
td {
  border: 2px solid black;
  height: 100px;
  width: 100px;
  cursor: pointer;
}
table {
   margin-left: auto;
   margin-right: auto;
   border-collapse: collapse;
  font-size: 20px;
  
}

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;
}
td:hover{background-color: #99e6ff ;opacity: 0.3;}



cells = document.querySelectorAll('.cell');
player = "X";
ai = "O";
function startgame(){
  console.log(cells[2].innerText);
  for (var i = 0; i < 9; i++){
    cells[i].innerText = "";      
    cells[i].addEventListener("click",add_text);
  }
}
function add_text(cell){
  document.getElementById(cell.target.id).innerText = player;
  if(checkwin()){
    console.log("Game over");
  }
}
function checkwin(){
  for(var i = 0; i < 7; i+=3){
    console.log("i",cells[i].innerText);
    console.log("i 1 ",cells[i+1].innerText);
    console.log("i 2",cells[i+2].innerText);
    console.log(player);
    if(cells[i].innerText == cells[i+1].innerText == cells[i+2].innerText == player){
      console.log("S");
      return True;
     }
   for(i = 0; i < 3; i++){
     if(cells[i].innerText == cells[i+3].innerText == cells[i+6].innerText == player){
       console.log("S");
       return True;
     }
   }
    for(i = 0; i < 3; i+=2) {
      if(cells[i].innerText == cells[5].innerText == cells[i+6].innerText == player){
        console.log("S");
        return True;
      }
    }
   
    
}
}

startgame();

您可以通过此链接 https://codepen.io/mark3334/pen/WNjXoOL?editors=0011 访问笔。我不明白为什么 check win 功能不起作用。单击表格后，脚本会在内部文本上执行 console.log，并且所有内容都显示为“X”，但 if 语句没有通过。同样对于事件侦听器，我不明白为什么没有括号，我听说对于事件您不应该这样做，并且与调用函数和引用对象有关，但我真的不明白。

Answer 1

我看到两个基本问题：

您的内循环正在重用 i，这将阻止外循环运行 i 的所有所需值。
你的比较是错误的，例如：

if(cells[i].innerText == cells[5].innerText == cells[i+6].innerText == player){

计算结果为：

if(((cells[i].innerText == cells[5].innerText) == cells[i+6].innerText ) == player){

第一个表达式 (cells[i].innerText == cells[5].innerText) 的计算结果为布尔值（真或假），然后将其与字符串 (cells[i+6].innerText) 进行比较，从而得出错误结果。

相反，要比较多个值，您必须创建多个比较并将它们与 &&（逻辑“与”）连接起来：

if(
  cells[i].innerText == cells[5].innerText
    &&
  cells[i].innerText == cells[i+6].innerText
    &&
  cells[i].innerText== player
){

您需要对所有三个比较进行此更改。

TicTacToe checkwin if 语句即使满足条件也不通过

1 个答案: