如何在 Javascript 井字游戏中禁用 X 和 O

How to disable X's an O's in Javascript Tic Tac Toe game

本文关键字：游戏 Javascript      更新时间：2023-09-26

简而言之，我知道这个问题没有意义，让我澄清一下，如果我单击 O，它会变为 X，反之亦然，我该如何解决这个问题？就像我不知道如何禁用它们以保持原位一样，你们也知道如何使用 for 循环重置游戏而不是手动进行

.HTML：

<!DOCTYPE html>
<html>
   <head>
      <title>Tic Tac Toe</title>
      <script text="javascript" src="tic.js"></script>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <center>
      <body>
         <h1 style="font-family:arial;">Tic-Tac-Toe</h1>
         <table>
            <tr>
               <td id = "case1" onclick="display_input('case1')"></td>
               <td id = "case2" onclick="display_input('case2')"></td>
               <td id = "case3" onclick="display_input('case3')"></td>
            </tr>
            <tr>
               <td id = "case4" onclick="display_input('case4')"></td>
               <td id = "case5" onclick="display_input('case5')"></td>
               <td id = "case6" onclick="display_input('case6')"></td>
            </tr>
            <tr>
               <td id = "case7" onclick="display_input('case7')"></td>
               <td id = "case8" onclick="display_input('case8')"></td>
               <td id = "case9" onclick="display_input('case9')"></td>
            </tr>
         </table>
         <footer>
            <p>Copyright&copy; 2014</p>
         </footer>
      </body>
   </center>
</html>

Javascript：

var player_one = 1;
function display_input(square){ 
    if ( player_one == 1 ){
        document.getElementById(square).innerHTML = "X";
        player_one = 0;
    } else {
        document.getElementById(square).innerHTML = "O";    
        player_one = 1;
    }
}
function reset() {
    document.getElementById("case1").innerHTML = "";
    document.getElementById("case2").innerHTML = "";
    document.getElementById("case3").innerHTML = "";
    document.getElementById("case4").innerHTML = "";
    document.getElementById("case5").innerHTML = "";
    document.getElementById("case6").innerHTML = "";
    document.getElementById("case7").innerHTML = "";
    document.getElementById("case8").innerHTML = "";
    document.getElementById("case9").innerHTML = "";
}

您可以随时检查 square 元素是否为空，如果不是，则不要执行任何操作：

function display_input(square) {
    //We get the associated DOM element
    var element = document.getElementById(square);
    //If the element already contains something, then don't change it
    if(element.innerHTML != "") return;
    if(player_one == 1) {
        element.innerHTML = "X";
        player_one = 0;
    } else {
        element.innerHTML = "O";
        player_one = 1;
    }
}

通过将以下内容添加到 display_input(square( 来覆盖正方形的 onclick 函数

document.getElementById(square).onclick = function() {return};
相关文章：