在井字游泳站停止覆蓋

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是否獲勝。