为什么玩家1总是会先走？

Question

页面上有2个名为“播放器1”和“播放器2”的按钮。用户可以单击按钮以将数字值添加到标题。数值最高的玩家获胜。

但是，如果用户首先尝试单击名为“玩家2”的按钮，则不会发生任何事情。如果单击按钮播放器2，我该如何使其首先旋转？

let p1Button = document.querySelector("#p1");
let p2Button = document.getElementById("p2");
let resetButton = document.getElementById("reset");
let numInput = document.querySelector("input");
let p = document.querySelector("p");
let winningscoreDisplay = document.querySelector("p span"); //slect p inside span
let p1Score = 0; //keep track of score
let p2Score = 0;
let p1Display = document.querySelector("#p1Display");
let p2Display = document.querySelector("#p2Display");
let gameOver = false; //keep track of state 
let winningscore = 5;
let turnTacker = 0; //keep track of p1Score and p1Score turn

p1Button.addEventListener("click", function() {
  if (!gameOver) {
    if (turnTacker == 0) {
      turnTacker = 1;
      p1Score++;
      document.querySelector(".turn").textContent = "Player 2 turn";
    }
    if (p1Score === winningscore) {
      p1Display.classList.add("winner");
      gameOver = true; //stop adding to score
    }
    p1Display.textContent = p1Score;
    if (gameOver) {
      p1Display.textContent = `Player 1 win ${p1Score}`;
      document.querySelector(".turn").textContent = "Game Over";
    }
  }
});

p2Button.addEventListener("click", function() {
  if (!gameOver) {
    if (turnTacker == 1) {
      p2Score++; //add 1 to p2 when clicked
      turnTacker = 0; // reset turn to 0. Player turn is over/off 
      document.querySelector(".turn").textContent = "Player 1 turn";
    }

    if (p2Score === winningscore) {
      p2Display.classList.add("winner");
      gameOver = true; //stop adding to score
    }
    p2Display.textContent = p2Score;

    if (gameOver) {
      p2Display.textContent = `Player 2 win ${p2Score}`;
      document.querySelector(".turn").textContent = "Game Over";
    }

  }
});

resetButton.addEventListener("click", function() {
  reset(); //function to start over
  p1Score = 0; //set player score back to 0
  p2Score = 0;
  //update score on html page to 0
  p1Display.textContent = 0;
  p2Display.textContent = 0;
  //remove winner class from both p1 &p2
  p1Display.classList.remove("winner");
  p2Display.classList.remove("winner");
  gameOver = false;
  document.querySelector(".turn").textContent = "";
});

function reset() {
  p1Score = 0; //set player score back to 0
  p2Score = 0;
  //update score on html page to 0
  p1Display.textContent = 0;
  p2Display.textContent = 0;
  //remove winner class from both p1 &p2
  p1Display.classList.remove("winner");
  p2Display.classList.remove("winner");
  gameOver = false;
  turnTacker = 0;
}
numInput.addEventListener("change", function() {
  winningscoreDisplay.textContent = this.value;
  winningscore = Number(this.value);
  reset();
});

.winner {
  color: green;
}

<h1> <span id="p1Display"> <span id="player1Win"></span> 0</span> to <span id="p2Display">0</span></h1>
<p>Play to: <span>5</span> &nbsp; &nbsp; &nbsp; <span class="turn">Click button to play</span></p>
<input type="number" placeholder="Set number">
<button id="p1">Player 1</button>
<button id="p2">Player 2</button>
<button id="reset">Reset</button>

Answer 1

如果添加名为gameStarted的变量并将其设置为false。像这样：

let p2Score = 0;
let p1Display = document.querySelector("#p1Display");
let p2Display = document.querySelector("#p2Display");
let gameOver = false; //keep track of state 
let winningscore = 5;
let turnTacker = 0; //keep track of p1Score and p1Score turn

let gameStarted = false;

然后单击您拥有的处理程序：

播放器1：

p1Button.addEventListener("click", function() {
  if (!gameOver) {
    if (turnTacker == 0) {
      turnTacker = 1;
      p1Score++;
      document.querySelector(".turn").textContent = "Player 2 turn";
    }
    if (p1Score === winningscore) {
      p1Display.classList.add("winner");
      gameOver = true; //stop adding to score
    }
    p1Display.textContent = p1Score;
    if (!gameStarted) {
      gameStarted = true;
      turnTacker = 1;
      p1Score++;
      document.querySelector(".turn").textContent = "Player 2 turn";
    }
  }
  if (gameOver) { // Moved outside of if (!gameOver)
      p1Display.textContent = `Player 1 win ${p1Score}`;
      document.querySelector(".turn").textContent = "Game Over";
  }
});

播放器2：

p2Button.addEventListener("click", function() {
  if (!gameOver) {
    if (turnTacker == 1) {
      p2Score++; //add 1 to p2 when clicked
      turnTacker = 0; // reset turn to 0. Player turn is over/off 
      document.querySelector(".turn").textContent = "Player 1 turn";
    }

    if (p2Score === winningscore) {
      p2Display.classList.add("winner");
      gameOver = true; //stop adding to score
    }
    p2Display.textContent = p2Score;

    if (!gameStarted) {
      gameStarted = true
      p2Score++; //add 1 to p2 when clicked
      turnTacker = 0; // reset turn to 0. Player turn is over/off 
      document.querySelector(".turn").textContent = "Player 1 turn";
    }

  }
  if (gameOver) { // moved out
      p2Display.textContent = `Player 2 win ${p2Score}`;
      document.querySelector(".turn").textContent = "Game Over";
  }
});

这将检查游戏是否尚未开始或是否在转弯处。

希望这会有所帮助。

Answer 2

问题与您在player2按钮侦听器中的状况有关。您已经在player2按钮侦听器中放置了一个条件if (turnTacker == 1) {，这就是为什么它不允许player2启动的原因。请参见下面的javascript代码以使其正常工作。

let gameStart = false;
 p2Button.addEventListener("click", function() {
 if (!gameOver) {
  if(!gameStart) {
      gameStart = true;
      p2Score++; //add 1 to p2 when clicked
  turnTacker = 0; // reset turn to 0. Player turn is over/off 
  document.querySelector(".turn").textContent = "Player 1 turn";
  }
 if (turnTacker == 1) {
  p2Score++; //add 1 to p2 when clicked
  turnTacker = 0; // reset turn to 0. Player turn is over/off 
  document.querySelector(".turn").textContent = "Player 1 turn";
}

if (p2Score === winningscore) {
  p2Display.classList.add("winner");
  gameOver = true; //stop adding to score
}
p2Display.textContent = p2Score;

if (gameOver) {
  p2Display.textContent = `Player 2 win ${p2Score}`;
  document.querySelector(".turn").textContent = "Game Over";
}
}
});

Answer 3

好吧，您的代码确实在以下位置：

let turnTacker = 0; //keep track of p1Score and p1Score turn

因此将其更改为

let turnTacker = -1;

然后添加

p1Button.addEventListener("click", function() {
  if(turnTacker<0) turnTacker = 0;
  if (!gameOver) {
  ...

和

p2Button.addEventListener("click", function() {
  if(turnTacker<0) turnTacker = 1;
  if (!gameOver) {
  ...

更改重置

function reset() {
...
turnTacker = -1;

这将使开始播放的选项可供任何玩家（一位玩家或两位玩家）使用。

Answer 4

您总是在游戏开始时以及在单击重置按钮后将turnTacker = 0放置。这就是为什么player1按钮始终单击有效的原因。如果要随机播放player1按钮或player2按钮，则在初始位置更改turnTracker变量值的代码初始化并重置功能。 （有点运气）

turnTacker = Math.floor(Math.random() * 2);

它将随机为0或1。

let p1Button = document.querySelector("#p1");
let p2Button = document.getElementById("p2");
let resetButton = document.getElementById("reset");
let numInput = document.querySelector("input");
let p = document.querySelector("p");
let winningscoreDisplay = document.querySelector("p span"); //slect p inside span
let p1Score = 0; //keep track of score
let p2Score = 0;
let p1Display = document.querySelector("#p1Display");
let p2Display = document.querySelector("#p2Display");
let gameOver = false; //keep track of state 
let winningscore = 5;
let turnTacker = Math.floor(Math.random() * 2); //keep track of p1Score and p1Score turn

p1Button.addEventListener("click", function() {
  if (!gameOver) {
    if (turnTacker == 0) {
      turnTacker = 1;
      p1Score++;
      document.querySelector(".turn").textContent = "Player 2 turn";
    }
    if (p1Score === winningscore) {
      p1Display.classList.add("winner");
      gameOver = true; //stop adding to score
    }
    p1Display.textContent = p1Score;
    if (gameOver) {
      p1Display.textContent = `Player 1 win ${p1Score}`;
      document.querySelector(".turn").textContent = "Game Over";
    }
  }
});

p2Button.addEventListener("click", function() {
  if (!gameOver) {
    if (turnTacker == 1) {
      p2Score++; //add 1 to p2 when clicked
      turnTacker = 0; // reset turn to 0. Player turn is over/off 
      document.querySelector(".turn").textContent = "Player 1 turn";
    }

    if (p2Score === winningscore) {
      p2Display.classList.add("winner");
      gameOver = true; //stop adding to score
    }
    p2Display.textContent = p2Score;

    if (gameOver) {
      p2Display.textContent = `Player 2 win ${p2Score}`;
      document.querySelector(".turn").textContent = "Game Over";
    }

  }
});

resetButton.addEventListener("click", function() {
  reset(); //function to start over
  p1Score = 0; //set player score back to 0
  p2Score = 0;
  //update score on html page to 0
  p1Display.textContent = 0;
  p2Display.textContent = 0;
  //remove winner class from both p1 &p2
  p1Display.classList.remove("winner");
  p2Display.classList.remove("winner");
  gameOver = false;
  document.querySelector(".turn").textContent = "";
});

function reset() {
  p1Score = 0; //set player score back to 0
  p2Score = 0;
  //update score on html page to 0
  p1Display.textContent = 0;
  p2Display.textContent = 0;
  //remove winner class from both p1 &p2
  p1Display.classList.remove("winner");
  p2Display.classList.remove("winner");
  gameOver = false;
  turnTacker = Math.floor(Math.random() * 2);
}
numInput.addEventListener("change", function() {
  winningscoreDisplay.textContent = this.value;
  winningscore = Number(this.value);
  reset();
});

.winner {
  color: green;
}

<h1> <span id="p1Display"> <span id="player1Win"></span> 0</span> to <span id="p2Display">0</span></h1>
<p>Play to: <span>5</span> &nbsp; &nbsp; &nbsp; <span class="turn">Click button to play</span></p>
<input type="number" placeholder="Set number">
<button id="p1">Player 1</button>
<button id="p2">Player 2</button>
<button id="reset">Reset</button>