使用单击处理程序更改函数内部的全局范围变量

Question

因此，我正在使用javascript和jquery构建基于回合的游戏，而我目前正努力限制玩家的移动。 这就是我所拥有的：

let playerOneMoves = 0;
let playerTwoMoves = 0;

function movePlayerOne(){
    $(tile).click(function(){
        playerOneMoves += 1;
        if(playerOneMoves < 4){
            $(".active").append(playerOne);
        }else if(playerOneMoves == 4){
            alert("No more moves, players two turn!");            
            playerTwoMoves = 0;
            movePlayerTwo();

        }
    })
}
function movePlayerTwo(){
    $(tile).click(function(){
        playerTwoMoves += 1;
        if(playerTwoMoves < 4){
            $(".active").append(playerTwo);
        }else if(playerTwoMoves == 4){
            playerOneMoves = 0;
            alert("No more moves, players one turn!")
            movePlayerOne();

        }   
    })
}

因此，当玩家2完成移动并加载下一个功能（moveplayerone）时，玩家1只能进行1次移动。单击几下后，它将开始将两个玩家追加到同一字段。 所以我的问题是，为什么不能重置“ let playerOneMoves = 0;”的值？里面的功能？ 如果您想更深入地查看代码，可以在CodePen上进行检查： https://codepen.io/ronydkid/pen/oyqxJY

顺便说一句，我已经检查了所有其他类似的问题，但是它们没有帮助。

Answer 1

因此，我们将从头到尾从语义上读取您的函数

movePlayerOne

1. 分配点击处理程序

movePlayerTwo

1. 分配点击处理程序

这似乎不是您想要的功能！我猜您想要的是单击后需要检查自己的举动，然后指定哪个球员是活跃球员。这应该使用一个单击处理程序来处理，该处理程序应该知道该玩家是哪个回合。为此，请继续制作一个名为movePlayer的不同点击处理程序和一个名为currentPlayer的新全局处理程序

let currentPlayer = playerOne;
let playerOneMoves = 0;
let playerTwoMoves = 0;
let active = $(".active"); // we don't want to crawl DOM every time unless needed,
// so unless you're destroying the ".active" DOM object every time, you should be fine here

function movePlayer(){
  let currentMoves = currentPlayer == playerOne
    ? ++playerOneMoves
    : ++playerTwoMoves;
  if ( currentMoves < 4 ){
    active.append(currentPlayer);
  } else { // basically if we get here we've reached 4 moves
    if (currentPlayer == playerOne) {
      currentPlayer = playerTwo;
      playerOneMoves = 0;
      alert("No more moves, players two's turn!");
    } else {
      currentPlayer = playerOne;
      playerTwoMoves = 0;
      alert("No more moves, players one turn!");
    }
  }
}

$(tile).click(movePlayer)

现在，每当您单击图块时，只有一个函数运行，并且此函数处理两个玩家的移动，并且不再注册更多点击处理程序

---

使用的某些快捷方式：

Ternary

if (condition) {
  console.log('true')
} else {
  console.log('false')
}

可以用三进制重写为

console.log( condition ? 'true' : 'false' )

增量

var i = 0;
console.log(i++) // 0
console.log(i) // 1
console.log(++i) // 2
console.log(i) // 2

---

关于您可以进行的其他更改的说明

如果您不需要额外引用单个运动员移动变量，请查看下面的@geekley答案。它小一点，并且具有未评估变量的提升，在有条件的条件下使函数短路以及较少的变量。

Answer 2

也许这就是你的意思？

let playerMoves = 0;
let currentPlayer = 1;

$(tile).click(movePlayer);
function movePlayer() {
    playerMoves += 1;
    if (playerMoves < 4) {
        $(".active").append(currentPlayer == 1 ? playerOne : playerTwo);
        return;
    }
    // if (playerMoves >= 4) {
        if (currentPlayer == 1) {
            alert("No more moves, player two's turn!");
            currentPlayer = 2;
        } else { // currentPlayer == 2
            alert("No more moves, player one's turn!");
            currentPlayer = 1;
        }
        playerMoves = 0;
    // }
}

Answer 3

问题不在于……问题在于您的代码结构：

let playerMoves = 0;
let player = 1;
$(tile).click(function() {
    if (playerMoves < 4) {
        $(".active").append(player == 1 ? playerOne : playerTwo);
        playerMoves += 1;
    }
    if (playerMoves == 4) {
        playerMoves = 0;
        player == 1 ? player = 2 : player = 1;
        alert("No more moves, " + player + "'s turn!");    
    }
});