在井字游泳站停止覆盖

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转向和changeTurn下一个 - 与帮助，从较早前的职位其他用户。

Answer 1

我觉得你的意思为this.innerHTML == turn;是this.innerHTML = turn;

第一种形式的比较，而第二个是一个赋值

Answer 2

的问题是在功能上play，因为你已经设置的innerHTML所以如果声明绝不会真正。

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;我只是做了divs，并将它们显示为表格单元格，并在其中放置连字符以防止它们不可见，因为如果我不在其中）。

<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是否获胜。