javascript - 如何将 Tic Tac Toe 函数 "Chose function"组合在一个函数中并选择单元格而不是隐藏？

Question

我是 JavaScript 世界的新手，希望您能在基本编码方面为我提供帮助。

如何仅在一个函数中制作我的井字游戏(X 和 O 选择)？我还想选择单元格而不是隐藏按钮。

我尝试了主要功能:

    if (document.getElementById("cell1").checked = true)
    if (document.getElementById("cell1").onclick= click)

但没有成功。

这是我试图用它来完成井字棋的功能

  var nextTurn = 'X'
  function chose1() {
    if (document.getElementById("Hidden1").checked = true) {
        if (document.getElementById('cell1').innerText == "") {
            document.getElementById('cell1').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden2").checked = true) {
        if (document.getElementById('cell2').innerText == "") {
            document.getElementById('cell2').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden3").checked = true) {
        if (document.getElementById('cell3').innerText == "") {
            document.getElementById('cell3').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden4").checked = true) {
        if (document.getElementById('cell4').innerText == "") {
            document.getElementById('cell4').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden5").checked = true) {
        if (document.getElementById('cell5').innerText == "") {
            document.getElementById('cell5').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden6").checked = true) {
        if (document.getElementById('cell6').innerText == "") {
            document.getElementById('cell6').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden7").checked = true) {
        if (document.getElementById('cell7').innerText == "") {
            document.getElementById('cell7').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden8").checked = true) {
        if (document.getElementById('cell8').innerText == "") {
            document.getElementById('cell8').innerText = nextTurn;
            changeTurn();
        }
    }


    else if (document.getElementById("Hidden9").checked = true) {
        if (document.getElementById('cell9').innerText == "") {
            document.getElementById('cell9').innerText = nextTurn;
            changeTurn();
        }
    }
 }

 function changeTurn() {
    if (nextTurn == 'X') {
        nextTurn = 'O';
    } else {
        nextTurn = 'X';
    }
 }

这些是我调用函数所用的表。

 <table border="10" cellpadding="40">
 <tbody>
    <tr>
        <td id="cell1" onclick="chose1()">
        </td>
            <input id="Hidden1" type="hidden" />
        <td id="cell2" onclick="chose2()">
            <input id="Hidden2" type="hidden" />
        </td>
        <td id="cell3" onclick="chose3()">
            <input id="Hidden3" type="hidden" />
        </td>
    </tr>
    <tr>
        <td id="cell4" onclick="chose4()">
            <input id="Hidden4" type="hidden" />
        </td>
        <td id="cell5" onclick="chose5()">
            <input id="Hidden5" type="hidden" />
        </td>
        <td id="cell6" onclick="chose6()">
            <input id="Hidden6" type="hidden" />
        </td>
    </tr>
    <tr>
        <td id="cell7" onclick="chose7()">
            <input id="Hidden7" type="hidden" />
        </td>
        <td id="cell8" onclick="chose8()">
            <input id="Hidden8" type="hidden" />
        </td>
        <td id="cell9" onclick="chose9()">
            <input id="Hidden9" type="hidden" />
        </td>
    </tr>
  </tbody>
  </table>

这是我的获胜组合函数，但效果不佳，我尝试了几种方法:

 function WinningCombinations(){
    if (document.getElementById("cell1").innerText == "X")
       (document.getElementById("cell2").innerText == "X")
       (document.getElementById("cell3").innerText == "X")
   {
        alert("Congratulations X you won.");
    }
   if (document.getElementById("cell4").innerText == "X")
       (document.getElementById("cell5").innerText == "X")
       (document.getElementById("cell6").innerText == "X")
   {
       alert("Congratulations X you won.");
   }
  }

底线我正在努力实现以下目标:

1. 我希望点击整个单元格而不是隐藏按钮。
2. 在 if 和 else if 函数中，chose1() 不起作用，因此它会将 X 或 O 赋予新单击的单元格。
3. 我正在尝试构造函数 WinningCombinations()，以便它与我的基本编码保持一致。

非常感谢您的帮助。

Answer 1

首先，你的功能太重复了。也许我们可以修复它:

function chose1() {
  for (var i=1; i<10; i++) {
    if (document.getElementById("Hidden" + i).checked = true) { // whoops
      var cell = document.getElementById('cell' + i);
      if (cell.innerText == "") {
        cell.innerText = nextTurn;
        changeTurn();
      }
      break;
    }
  }
}

通过更少的行数，可以更容易地发现该函数设置 cell.checked = true，而不是检查 cell.checked === true 。

您还可以内联changeTurn函数:

nextTurn = nextTurn === 'X' ? 'O' : 'X';

其次，井字棋有 8 个获胜组合，我想你忘记了其中一些。