2016-01-03 61 views
0

我正在尝试用普通的香草Javascript来制作井字游戏,所以我希望我们可以留在保持香草的界限中。井字游戏:Sqaure不能被覆盖

我需要的是以下内容:如果一个方块已经被点击或被“X”或“O”占据,该方块不能被覆盖,并且出现警告/弹出窗口并选择另一个广场。

感谢您的帮助和时间!

这是到目前为止,我已经得到了代码:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Tic Tac Toe</title> 
    <style> 
     td { 

      border: 1px solid black; 
      height: 250px; 
      width: 250px; 
      font-family: sans-serif; 
      font-size: 150pt; 
      text-transform: uppercase; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td align="center" id="square1" onclick="displayMarker('square1');"></td> 
      <td align="center" id="square2" onclick="displayMarker('square2');"></td> 
      <td align="center" id="square3" onclick="displayMarker('square3');"></td> 
     </tr> 
     <tr> 
      <td align="center" id="square4" onclick="displayMarker('square4');"></td> 
      <td align="center" id="square5" onclick="displayMarker('square5');"></td> 
      <td align="center" id="square6" onclick="displayMarker('square6');"></td> 
     </tr> 
     <tr> 
      <td align="center" id="square7" onclick="displayMarker('square7');"></td> 
      <td align="center" id="square8" onclick="displayMarker('square8');"></td> 
      <td align="center" id="square9" onclick="displayMarker('square9');"></td> 
     </tr> 
    </table> 

    <script> 
     var cp1 = 1; 

     function displayMarker(allSquares) { 

      if (cp1==1) { 
       document.getElementById(allSquares).innerHTML = "X"; 
       cp1 = 2; 
      } 

      else { 
       document.getElementById(allSquares).innerHTML = "O"; 
       cp1 = 1; 
      } 

    } 
    </script> 
</body> 
</html> 

回答

1

检查的平方值(innerHTML的)是不是空的。在这种情况下提醒并返回功能。

function displayMarker(allSquares) { 
    var square = document.getElementById(allSquares); 
    if (square.innerHTML.trim() != "") { 
     return alert("Choose another square"); 
    } 
    // ...