我创建了一个游戏,它将在屏幕上显示得分最高的获胜者。一号和二号玩家有两个按钮。用户将玩游戏达到设定的分数。例如,如果游戏设置为5,则用户将单击两个按钮,直到按钮1或按钮2达到获胜分数5。标头可能显示“祝贺玩家1获胜分数5至4”。玩家应该不能一直单击一个按钮来达到5的获胜分数。但是,我如何在游戏中跟踪玩家的回合?下面是代码:
score.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>score</title>
<link rel="stylesheet" href="score.css">
</head>
<body>
<h1> <span id="p1Display" > <span id="player1Win"></span> 0</span> to <span id="p2Display">0</span></h1>
<p>Play to: <span>5</span> </p>
<input type="number">
<button id="p1">Player one</button>
<button id="p2">Player two</button>
<button id="reset">Reset</button>
<script src="score.js"></script>
</body>
</html>
score.js file:
p1Button.addEventListener("click", function () {
if (!gameOver) {
if(turnTacker == 0) {
turnTacker = 1;
p1Score++;
}else {
turnTacker = 0;
p2Score++;
}
if (p1Score === winningscore) {
p1Display.classList.add("winner");
gameOver = true; //stop adding to score
}
p1Display.textContent = p1Score;
if (gameOver ) {
p1Display.textContent = `congratulations Player 1 win score of ${p1Score}`;
}
}
});
p2Button.addEventListener("click", function () {
if (!gameOver) {
if(turnTacker == 0) {
turnTacker = 1;
p2Score++;
}else {
turnTacker = 0;
p1Score++;
}
if (p2Score === winningscore) {
p2Display.classList.add("winner");
gameOver = true; //stop adding to score
}
p2Display.textContent = p2Score;
if (gameOver ) {
p2Display.textContent = `congratulations Player 2 win score of ${p2Score}`;
}
}
});
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;
});
//start game over/reset to 0
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;
}
numInput.addEventListener("change", function () {
// winningscoreDisplay.textContent = numInput.value; //update winng score get value from text field
winningscoreDisplay.textContent = this.value; //update winng score get value from text field
winningscore = Number(this.value); //get and set value in textfield. Turn into number
//winningscore = Number(numInput.value); //get and set value in textfield. Turn into number
reset();//once input number run reset
});
答案 0 :(得分:0)
您应该做的是添加另一个变量,该变量说明轮到谁了。 例如:
var p1turn = true;
while (i < //a certain number of turns) {
if (p1turn) {
//something player 1 does
p1turn = false;
i++;
}
else {
//something player 2 does
p1turn = true;
i++;
}
}
希望这会有所帮助!
答案 1 :(得分:0)
对于两个玩家,您将需要切换。这可以是页面DOM中隐藏字段中的值,也可以是JS
变量,只要不刷新页面即可。或者更进一步,您可以跟踪服务器的转弯,但是现在听起来太高级了。
切换可以基于偶数/奇数计算,也可以仅基于if语句。像这样:
if(turn==0){turn=1}else{turn=0}
以上行就像一个on/off
开关,是玩家{1}可以玩的转牌off
,他/她的动作会将其on
转动。当开关为on
时,玩家2可以玩,他/她的动作将再次使其变为off
。
或者如果您有两个以上的玩家
turn++; // before turn increase by 1 each time
// do everything here for the current player
if(turn >= countPlayers()){turn=0} // reset to 0 after the last player
在这个概念中,没有值0,因为我们在第一回合之前从++开始为1,然后在每次玩家执行某项操作时都增加回合,直到玩家总数开始,然后重置为0。
如果只有两个玩家,则偶数/奇数计算是切换的一种简单替代方法。由于您已经在跟踪总回合数,因此不需要额外的变量。
function checkOdd(int){
return int % 2;
}
if(checkOdd(turnTacker)){
// player2 has to play
}else{
// player1 has to play
};
如果turnTacker
是0
,checkOdd是FALSE
,如果turnTacker
是1
,checkOdd是TRUE
,如果turnTacker
是2
checkOdd为FALSE
,依此类推。