Question

这与How do I create turns in a Tic Tac Toe game?有关我想添加一个选项，单击一个框不应该被覆盖。我使用下面的代码并经历了几次在线材料，但似乎无法找到答案。它现在突然使所有方框X而不是X然后是O然后是X.不幸的是，我正在开发一个基于Web的编辑器，它不支持Jquery，我也无法编辑HTML。

   var turn = "X";

  function next() 
{
  turn = turn === "X" ? "O" : "X";
  }

  function play() {
  if (this.innerHTML === "") 
  {
   this.innerHTML == turn;
   next();}
 } 



   function click()
    {

     if (this.id == "cell1")
    {
       document.getElementById("cell1").innerHTML= turn;
       play();
    }  

     else if (this.id == "cell2")
    {
      document.getElementById("cell2").innerHTML = turn;
      play();
    }

    else  if (this.id == "cell3")
    {
      document.getElementById("cell3").innerHTML = turn;
      play();
    }

    else  if (this.id == "cell4")
    {
      document.getElementById("cell4").innerHTML = turn;
      play();
    }

    else if (this.id == "cell5")
    {
      document.getElementById("cell5").innerHTML = turn;
      play();
    }

     else if (this.id == "cell6")
     {
       document.getElementById("cell6").innerHTML = turn;
       play();
      }

      else if (this.id == "cell7")
      {
        document.getElementById("cell7").innerHTML = turn;
        play(); 
      }

       else if (this.id == "cell8")
      {
        document.getElementById("cell8").innerHTML = turn;
        play();
       }

       else if (this.id == "cell9")
       {
         document.getElementById("cell9").innerHTML =turn;
         play(); 
       }

   }

     document.getElementById("cell1").onclick = click;
     document.getElementById("cell2").onclick = click;
     document.getElementById("cell3").onclick = click;
     document.getElementById("cell4").onclick = click;
     document.getElementById("cell5").onclick = click;
     document.getElementById("cell6").onclick = click;
     document.getElementById("cell7").onclick = click;
     document.getElementById("cell8").onclick = click;
     document.getElementById("cell9").onclick = click;

我知道我被告知不要重复代码，但我对此很新。也许几个月的练习会让我充满自信 - 我现在就发现它更清晰了。

P.S：在我尝试添加停止覆盖细胞的功能之前，它工作正常。之前的代码是：

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

对于新选项我更改了nextTurn转向并将更改转到下一个 - 在前一篇文章的另一位用户的帮助下。

Answer 1

我认为您的意思是this.innerHTML == turn;为this.innerHTML = turn;

第一种形式是比较，而第二种形式是作业

Answer 2

问题出在函数play中，因为你已经设置了innerHtml，所以if语句永远不会为真。

Answer 3

您可能在单元格内部有一些东西正在使您与空字符串的比较返回false。你的作业中你也有两个等于一个等于。

将播放功能更改为：

  function play() {
    if (!/[XO]/.test(this.innerHTML)) 
      {
        this.innerHTML = turn;
        next();
      }
  }

正如我的评论中所提到的，我建议您使用非常少量的代码来完成整个程序：

首先，在您的单元格中，放置此事件处理程序：

onclick="playNew(this)"

并创建如下的playNew函数：

function playNew(cell) {
if (!/[XO]/.test(cell.innerHTML))
cell.innerHTML = (self.turn = (self.turn == 'X' ? 'O' : 'X'));
}

这是一个完整的例子（你可能想要改进我的HTML;我只是做了div并使它们显示为表格单元格并在其中加入连字符以防止它们被隐藏，因为如果我没有放置内容它们就会被隐藏在他们）。

<script>

function playNew(cell) {
if (!/[XO]/.test(cell.innerHTML))
cell.innerHTML = (self.turn = (self.turn == 'X' ? 'O' : 'X'));
} 
</script>

<style>
.cell { width: 50px; height: 50px; border: solid; display: table-cell }
</style>


<div onclick="playNew(this)" class="cell">-</div>
<div onclick="playNew(this)" class="cell">-</div>
<div onclick="playNew(this)" class="cell">-</div><br />
<div onclick="playNew(this)" class="cell">-</div>
<div onclick="playNew(this)" class="cell">-</div>
<div onclick="playNew(this)" class="cell">-</div><br />
<div onclick="playNew(this)" class="cell">-</div>
<div onclick="playNew(this)" class="cell">-</div>
<div onclick="playNew(this)" class="cell">-</div><br />

此外，我的代码仅用于在X和O之间切换，它不会宣布获胜者或跟踪细胞位置或游戏结束等。我假设您的细胞每个都有不同的ID你有独立的逻辑来确定游戏何时结束以及X或O是否胜利。

停止在Tic Tac Toe覆盖

3 个答案: