Javascript井字遊戲onclick只有一次

你好，我正在努力完成我的程序。我離整理差不多兩步，但我一直堅持我如何做到這一點，所以一旦一個盒子被點擊，你不能再次點擊它，直到你重新開始遊戲。Javascript井字遊戲onclick只有一次

這裏是我的JavaScript代碼：

var cell; 
var nextTurn = "X"; 

function mouseMotion(ref, motion) { 
    if (motion == 'over') { 
     ref.style.borderColor = '#E00'; 
    } else if (motion == 'out') { 
     ref.style.borderColor = '#CCC'; 
    } 
} 

function cellClick(cell) { 
    if (cell.id == "cell1x1") { 
     document.getElementById("cell1x1").innerHTML = "X"; 
     document.getElementById("cell1x1").innerHTML = nextTurn; 
     playersTurn(); 

    } else if (cell.id == "cell1x2") { 
     document.getElementById("cell1x2").innerHTML = "X"; 
     document.getElementById("cell1x2").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell1x3") { 
     document.getElementById("cell1x3").innerHTML = "X"; 
     document.getElementById("cell1x3").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell2x1") { 
     document.getElementById("cell2x1").innerHTML = "X"; 
     document.getElementById("cell2x1").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell2x2") { 
     document.getElementById("cell2x2").innerHTML = "X"; 
     document.getElementById("cell2x2").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell2x3") { 
     document.getElementById("cell2x3").innerHTML = "X"; 
     document.getElementById("cell2x3").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell3x1") { 
     document.getElementById("cell3x1").innerHTML = "X"; 
     document.getElementById("cell3x1").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell3x2") { 
     document.getElementById("cell3x2").innerHTML = "X"; 
     document.getElementById("cell3x2").innerHTML = nextTurn; 
     playersTurn(); 
    } else if (cell.id == "cell3x3") { 
     document.getElementById("cell3x3").innerHTML = "X"; 
     document.getElementById("cell3x3").innerHTML = nextTurn; 
     playersTurn(); 

    } 
} 

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


function startNewGame() { 
    location.reload(true); 
}

這裏是我的HTML代碼：

<html> 
<title>Tic Tac Toe</title> 
<head> 
     <script type="text/javascript" src="tictactoe.js"></script> 
    <link rel="stylesheet" type="text/css" href="tictactoestyle.css"> 
</head> 
<body> 
<div id="playersTurn">&nbsp;</div> 
<div id="winnerIs"></div> 
<table id="tttTable" align="center"> 
<tr> 
<td id="cell1x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
<td id="cell1x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
<td id="cell1x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    </tr> 
    <tr> 
    <td id="cell2x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    <td id="cell2x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    <td id="cell2x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    </tr> 
    <tr> 
    <td id="cell3x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    <td id="cell3x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    <td id="cell3x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td> 
    </tr> 
    </table> 
    <input id="newGameBtn" type="button" value="Start New Game" onclick="startNewGame();" /> 
</body> 
</html>

我仍然很新，編寫JavaScript所以請溫柔。那麼在一個人點擊一個單元格後，我將如何做到這一點，它不會讓其他人單擊它，直到你重置遊戲？謝謝你的幫助！

來源

2013-11-23 user3025364

爲什麼你這個標記作爲jQuery的？你沒有在任何地方使用jQuery！ –

您應該使用jQuery，但使用純javascript來處理事件會很痛苦：D – leaf

@wared無意義。他只需要點擊事件，這在Vanilla Javascript中非常簡單。他用onmouseover/onmouseout做的事情應該用CSS而不是Javascript完成。 –

你可以檢查框已經被點擊，在你的函數的頂部：

function cellClick(cell) { 
    if (cell.innerHTML === "X" || cell.innerHTML === "O") { 
     return; 
    } 
    ...

順便問一下，你的代碼是可怕的冗長。以下：

if (cell.id == "cell1x1") { 
    document.getElementById("cell1x1").innerHTML = nextTurn;

可以降低被壓縮到：

document.getElementById(cell.id).innerHTML = nextTurn;

可以再次壓縮到：

cell.innerHTML = nextTurn;

有一個在你所寫的內容沒有必要的if聲明以上。

來源

2013-11-23 17:04:03 joeytwiddle

'= ='或更好的''=== ** **不是'=' –

感謝您的指正！這本來是一個同義反復。 – joeytwiddle

你的編輯是錯誤的，太。他想設定'innerHTML'爲'nextTurn '，而不是''X「'（儘管我已經刪除了我的downvote） –

一個更簡單的方法是使用DOM。使用您傳遞給你的函數變量調用以去除的onClick在功能上做任何事情之前屬性，像這樣cell：

function cellClick(cell) 
{ 
document.getElementById(cell).removeAttribute('onClick'); 
//and that's all you really need... 
//then when you refresh and/or regenerate the table, 
//the onClick Attribute should come back. 
}

來源

2014-04-11 04:04:20 Brendan

Javascript井字遊戲onclick只有一次

回答

相關問題