Question

我正在用JavaScript创建井字游戏，我正试图在名为currentPlayer的变量中跟踪哪个玩家的回合。此变量在脚本的顶部声明，并为播放器1分配值1.然后在函数renderBoard中访问和更新该变量。

在玩家1移动之后，我调用renderBoard函数，渲染最新的移动然后将currentPlayer变量设置为2以指示它现在是玩家2的回合。函数完成后，我输出一些使用currentPlayer的HTML来表明它是玩家2的回合。但是，我的代码中currentPlayer未被识别为设置为2。

以下是代码：

var currentPlayer = 1;
// Other code

function renderBoard(newMove, currentPlayer)
{
    if(!gameOver){
        if(currentPlayer === 1)
        {
            $(newMove).append('<img src="assets/x.png" />');
            currentPlayer = 2;
        } else
        {
            $(newMove).append('<img src="assets/o.png" />');
            currentPlayer = 1;
        }
    } else
    {
        $('img').remove();
    }
}

    $('#gameboard-wrapper').on(
        'click',
        'div[data-location]',
        function() 
        {
            renderBoard(this, currentPlayer);
            $('p').html("Player " + currentPlayer + "'s turn"); // After player 1's move, this should output 2, but it repeatedly outputs 1.*/
            $(this).off();
        }
    );

据我了解，currentPlayer是一个全局变量，应该为整个脚本更新，即使它在函数内部更新。我错过了什么？

Answer 1

想出来，对于将来看这个问题的人来说。

我的错误是为renderBoard函数创建了currentPlayer参数。当我引用currentPlayer时，我引用了调用函数时传递的currentPlayer参数，而不是currentPlayer全局变量。

更正后的代码：

var currentPlayer = 1;
// Other code

function renderBoard(newMove) // Removed currentPlayer parameter
{
    if(!gameOver){
        if(currentPlayer === 1)
        {
            $(newMove).append('<img src="assets/x.png" />');
            currentPlayer = 2;
        } else
        {
            $(newMove).append('<img src="assets/o.png" />');
            currentPlayer = 1;
        }
    } else
    {
    $('img').remove();
    }
}

$('#gameboard-wrapper').on(
    'click',
    'div[data-location]',
    function() 
    {
        renderBoard(this); // Don't pass in currentPlayer argument
        $('p').html("Player " + currentPlayer + "'s turn");
        $(this).off();
    }
);

Answer 2

你打电话给（这个）.off。它取消了点击界面。之后，当您点击游戏时没有任何反应。删除this.off。

在JavaScript

2 个答案: