如何在Javascript tic tac toe游戏中切换玩家

时间:2014-12-11 00:29:51

标签: javascript html if-statement tic-tac-toe

我仍然是JS的新手,会很感激帮助和任何解释。所以我走了;我没有丝毫的线索,为什么我的下面的代码在每次两个玩家中的一个点击他们想要的任何情况时都没有在“X”和“O”之间切换。有一件事是肯定我的if语句的逻辑有问题。

我的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:

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

}

1 个答案:

答案 0 :(得分:2)

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