如何檢查是否有東西有價值

Question

我必須做一個tic tac toe遊戲，我會陷入困境。基本上井字遊戲板的工作原理和我可以分別放置X和O的玩家，但是當我再次點擊單元格時，它會用X或者O代替它。例如，如果一個單元格中有一個X，你再次點擊它出現一個O.我的問題在於，如何檢查單元格中是否有X，然後將其保存並使其無法更改。從那裏我想嘗試贏得的條件，這可能就是如果cell1 & & cell2 & & cell3 ===「X」然後只是說你贏了或什麼。無論如何，任何幫助將非常感激。

感謝

http://jsfiddle.net/78pu4y7t/11/

var nextTurn = "X"; 
 

 

 
function clickButton() 
 
{ 
 
if(this.id === "t1") 
 
{ 
 
\t if(document.getElementById("t1").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t1").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t \t 
 
\t } 
 
} 
 

 
else if(this.id === "t2") 
 
{ 
 
\t if (document.getElementById("t2").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t2").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t \t 
 
\t } 
 
} 
 

 
else if(this.id === "t3") 
 
{ 
 
\t if (document.getElementById("t3").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t3").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t \t 
 
\t } 
 
} 
 

 
else if(this.id === "t4") 
 
{ 
 
\t if (document.getElementById("t4").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t4").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t } 
 
} 
 

 
else if(this.id === "t5") 
 
{ 
 
\t if (document.getElementById("t5").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t5").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t } 
 
} 
 

 
else if(this.id === "t6") 
 
{ 
 
\t if (document.getElementById("t6").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t6").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t } 
 
} 
 

 
else if(this.id === "t7") 
 
{ 
 
\t if (document.getElementById("t7").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t7").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t } 
 
} 
 

 
else if(this.id === "t8") 
 
{ 
 
\t if (document.getElementById("t8").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t8").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t } 
 
} 
 

 
else if(this.id === "t9") 
 
{ 
 
\t if (document.getElementById("t9").innerHTML = ""); 
 
\t { 
 
\t \t document.getElementById("t9").innerHTML = nextTurn; 
 
\t \t turnSwitch(); 
 
\t } 
 
} 
 

 
} 
 

 
document.getElementById("t1").onclick = clickButton; 
 
document.getElementById("t2").onclick = clickButton; 
 
document.getElementById("t3").onclick = clickButton; 
 
document.getElementById("t4").onclick = clickButton; 
 
document.getElementById("t5").onclick = clickButton; 
 
document.getElementById("t6").onclick = clickButton; 
 
document.getElementById("t7").onclick = clickButton; 
 
document.getElementById("t8").onclick = clickButton; 
 
document.getElementById("t9").onclick = clickButton; 
 

 

 
function turnSwitch() 
 
{ 
 

 
if(nextTurn === "X") 
 
{ 
 
\t nextTurn = "O"; 
 
} 
 
else 
 
{ 
 
\t nextTurn = "X"; 
 
} 
 
\t 
 
}

td{ 
 
border: 2px solid green; 
 
height: 100px; 
 
width: 100px; 
 
text-align: center; 
 

 
}

<table> 
 
\t <tr> 
 
\t \t <td id="t1"></td> 
 
\t \t <td id="t2"></td> 
 
\t \t <td id="t3"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td id="t4"></td> 
 
\t \t <td id="t5"></td> 
 
\t \t <td id="t6"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td id="t7"></td> 
 
\t \t <td id="t8"></td> 
 
\t \t <td id="t9"></td> 
 
\t </tr> 
 
</table>

Answer 1

一個簡單的方法來做到這將是註銷事件處理程序，一旦用戶選擇了它。 例如 document.getElementById("t9").innerHTML = nextTurn; document.getElementById("t9").onclick = null;

Answer 2

您正在使用錯誤的運算符來比較值。您應該使用比較運算符; ==或===而不是賦值運算符=：

if(document.getElementById("t1").innerHTML = ""); 

應該是：

if(document.getElementById("t1").innerHTML === ""); 

---

邊注：而不是獲得元素的id用它來找出哪些元素繼續工作，然後使用id獲取元素的引用，您可以直接使用對元素的引用。這大大簡化了事件處理代碼：

function clickButton() 
{ 

    if (this.innerHTML === ""); 
    { 
     this.innerHTML = nextTurn; 
     turnSwitch(); 

    } 

} 

Answer 3

條件中的（if條款）您使用的是分配（=），而不是比較（===）。這意味着每次對if進行評估時，所涉及元素的innerHTML都將重置爲空字符串。

if (document.getElementById('...').innerHTML === '') { 
    // ... 
} 

將工作得很好。

Answer 4

我能否提供一個相當簡單的方法：

var nextTurn = "X"; 
 

 
// eventObj is the automagically passed Event object: 
 
function clickButton(eventObj) { 
 
    // the target of that event object is the one on which the event originated: 
 
    var clicked = eventObj.target; 
 

 
    // if the trimmed length of the innerHTML of the clicked element is falsey 
 
    // (so zero), then we go inside the 'if': 
 
    if (!clicked.innerHTML.trim().length) { 
 
    // set the innerHTML of the clicked element: 
 
    clicked.innerHTML = nextTurn; 
 
    // invoke the turnSwitch function: 
 
    turnSwitch(); 
 
    } 
 
} 
 

 
// document.querySelector returns the first and only match to the given 
 
// CSS selector; addEventListener assigns the click event-handling function: 
 
document.querySelector('table').addEventListener('click', clickButton); 
 

 
function turnSwitch() { 
 
    // if nextTurn is currently 'X', we change it to 'O'; if it's anything other than 'X', 
 
    // we update it to 'X': 
 
    return nextTurn === 'X' ? 'O' : 'X'; 
 

 
}

td { 
 
    border: 2px solid green; 
 
    height: 100px; 
 
    width: 100px; 
 
    text-align: center; 
 
}

<table> 
 
    <tr> 
 
    <td id="t1"></td> 
 
    <td id="t2"></td> 
 
    <td id="t3"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="t4"></td> 
 
    <td id="t5"></td> 
 
    <td id="t6"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="t7"></td> 
 
    <td id="t8"></td> 
 
    <td id="t9"></td> 
 
    </tr> 
 
</table>

但值得注意的，當然，你的原來的評估（if (document.getElementById("t3").innerHTML = "")）是分配值（因此評估以真實價值），而不是評估它和評估'準確';您需要使用：if (document.getElementById("t3").innerHTML === "")。

Answer 5

有幾件事情：

if(document.getElementById("t1").innerHTML = ""); 
{ 

單=是分配，所以你每次設置innerHTML來空字符串。你想===（全等測試）

其次，你不能有這行的最後一個分號，我甚至不知道這是什麼語句來評估，但它不是正確的語法if(document.getElementById("t1").innerHTML = "");

第三，Javscript有一個「真實性」的概念，意思是任何在布爾上下文中評估的東西（比如if聲明中將檢查真/假）的任何東西都會被轉換爲true或false。

所以，你可以短路你使用感實性做什麼：

if(!document.getElementById("t1").innerHTML) { 

如果不（在!運營商）所有的innerHTML，這將正常工作。你也可以明確地尋找空字符串，通過固定的=運營商：

if(document.getElementById("t1").innerHTML === '') { 

它使用===最佳實踐，如果你知道的類型都將是相同的。將大括號與陳述放在同一行上也是最佳做法。