1

我是 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()，以便它与我非常基本的编码押韵。

非常感谢您的帮助。

4

1 回答 1

0

首先，您的功能是如此重复。也许我们可以修复它：

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 种获胜组合，我想你忘记了其中一些。

于 2013-11-13T12:42:26.137 回答