Question

我坚持使用我的tic tac toe程序，这似乎是第100次。我通过selenium运行我的程序，一切正常，但如果有一个胜利者宣布它仍然会转动转弯并点击另一个框。例如，如果玩家2获胜，那么它将点击另一个框然后它将使玩家1获胜。当赢家被宣布停止转换时，我怎么能这样做呢？

这是我的js：

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.innerHTML === 'X' || cell.innerHTML === 'O')
{ alert ('Square has already been choosen, please select another square');
return
}
cell.innerHTML = nextTurn;
playersTurn();
winnerIs();

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

function winnerIs(){

if (document.getElementById("cell1x1").innerHTML == 'X' &&    document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell1x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';

}

else if (document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell3x1").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell1x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell2x1").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell2x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell3x1").innerHTML == 'O' && document.getElementById("cell3x2").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell1x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell2x1").innerHTML == 'O' && document.getElementById("cell3x1").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell3x2").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x3").innerHTML == 'O' && document.getElementById("cell2x3").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
}


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>

这是我的CSS：

 #tttTable
  {
    width: 600px;
   height: 600px;
  }

 .cell
  {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  text-align: center;
  font-weight: bold;
  font-size: 4em;
 }

#newGameBtn
{
  margin-left: 46%;
}

#playersTurn
{
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
 height: 10px;
}

#outer 
{ 
 width: 600px; 
}

#winnerIs
{
  background-color: #EEE;
  text-align: center;
  font-weight: bold;
  font-size: 5em;
  width:700px;
 height:100px;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-350px;
 display: none;
 }

感谢您抽出宝贵时间阅读我的代码并帮助我。如果你看到我可以改进的任何东西，那么我很乐意听到你要说的话。再次感谢你！

Answer 1

您可以跟踪“游戏结束”标记，例如var gameOver = false，然后在您检测到获胜者时将其设置为true。然后，一旦游戏结束，您的cellClick功能可以忽略输入：

function cellClick(cell){
    if(gameOver == true)
        return;

    if (cell.innerHTML === 'X' || cell.innerHTML === 'O')
    {
        alert ('Square has already been choosen, please select another square');
        return;
    }
    cell.innerHTML = nextTurn;
    playersTurn();
    winnerIs();
}

注意，您的代码仍然需要处理“绘制”的情况。

Answer 2

我认为你可以制作一个变量来跟踪游戏是否已经结束。然后在您的cellClick函数中，只有在变量为false时才执行代码。

Answer 3

当玩家获胜时，你可以看到“winnerIs”DIV。在不添加任何变量或标志的情况下，您只需将此块添加到函数function cellClick(cell)之前：

if (document.getElementById("winnerIs").style.display == "block") {
   alert('Game has already been won!');
   return 
}

它将检查“winnerIs”DIV是否可见，如果可见 - 将阻止进一步移动。

演示：http://jsfiddle.net/zG3pm/4/

赢家宣布后，Tic tac Toe javascript停止转换

3 个答案: