如何在 Javascript 井字游戏中切换玩家

How to switch between players in a Javascript tic tac toe game

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

我仍然是JS的新手,希望得到帮助和任何形式的解释。所以我来了;我丝毫不知道为什么每次两个玩家中的一个点击他们想要的任何情况时,我的以下代码都不会在"X"和"O"之间切换。有一件事是肯定我的 if 语句的逻辑有问题。

我的网页如下:

<!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:

function display_input(square){ 
var player_one = 1;
if ( player_one == 1 ){
    document.getElementById(square).innerHTML = "X";
    player_one = 0;
} else {
    document.getElementById(square).innerHTML = "O";    
    player_one = 1;
}   
}

在每次调用display_input时,你都会初始化一个具有相同值的新player_one变量:1 。将声明移到函数之外,以便后续调用实际上将切换(一个)范围更大的变量:

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;
    }   
}