如何跟踪玩家在游戏中的回合?

时间:2019-06-08 18:05:30

标签: javascript

我创建了一个游戏,它将在屏幕上显示得分最高的获胜者。一号和二号玩家有两个按钮。用户将玩游戏达到设定的分数。例如,如果游戏设置为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
});

2 个答案:

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

如果turnTacker0,checkOdd是FALSE,如果turnTacker1,checkOdd是TRUE,如果turnTacker2 checkOdd为FALSE,依此类推。