0

这是关于如何在井字游戏中创建回合？ 我想添加一个选项，即单击后不应覆盖框。我使用了下面的代码，并且已经通过它和在线材料几次，但似乎无法找出答案。它现在突然使所有框 X 而不是 X，然后是 O，然后是 X。不幸的是，我正在开发一个不支持 Jquery 的基于 Web 的编辑器，我也无法编辑 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;

我知道有人告诉我不要重复代码，但我在这方面还很陌生。也许几个月的练习会让我有足够的信心——我现在发现它更清楚了。

PS：在我尝试添加停止覆盖单元格功能之前它工作正常。之前的代码是：

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

对于新选项，我已将 nextTurn 更改为 turn 并将 changeTurn 更改为 next - 在较早帖子中另一位用户的帮助下。

4

3 回答 3

1

我想你本来this.innerHTML == turn;就是this.innerHTML = turn;

第一种形式是比较，而第二种是分配

于 2013-05-10T04:12:06.463 回答
0

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

于 2013-05-10T04:13:49.370 回答
0

您可能在单元格内有一些东西使您与空字符串的比较返回 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 获胜的逻辑。

于 2013-05-10T04:19:02.470 回答