根据其他两个值之间的特定比较来更改两个值？

Question

我正在制作一个小游戏，我有两个变量； 一个用于玩家的选择，另一个用于计算机的随机选择。 玩家可以选择攻击 1、攻击 2 和攻击 3。 计算机也是如此（使用 Math.random()）。

如果获胜者选择了击败计算机选项的选项，我想提高获胜者的分数。 如果他们选择相同，则增加抽奖次数。

我已经写了一个 if-else 语句来实现这一点，但我认为应该可以让它更短或更好。 让我们称这些攻击为石头、纸和剪刀，这样很容易看出谁会赢：

整个 JS 代码都在代码片段和 JSFiddle 中

    if (playerChoice === computerChoice) {
        draw++;
    } else if (playerScore === rock && computerChoice === scissors) {
        playerScore++;
    } else if (playerScore === paper && computerChoice === rock) {
        playerScore++;
    } else if (playerChoice === scissors && computerChoice === paper) {
        playerScore++;
    } else {
        computerScore++;
    }

我正在使用一个函数来检查这三个陈述中的任何一个是否为真，如果是，玩家的分数应该增加，如果不是，计算机的分数应该增加。

JDFiddle： https ://jsfiddle.net/Lowxc31b/

片段：

 var playerScore = 0; var computerScore = 0; var draw = 0; var possibleChoices = ["rock", "paper", "scissors"]; var playerScoreEl = document.getElementById("playerScore"); var computerScoreEl = document.getElementById("computerScore"); var drawEl = document.getElementById("draw"); var rockEl = document.getElementById("rock"); var paperEl = document.getElementById("paper"); var scissorsEl = document.getElementById("scissors"); var buttonsEl = document.getElementsByClassName("button"); for (var i = 0; i < buttonsEl.length; i++) { buttonsEl[i].addEventListener("click", checkResult); } function checkResult(e) { var playerChoice = e.target.id; var randomChoice = Math.floor(Math.random() * 3); var computerChoice = possibleChoices[randomChoice]; if (playerChoice === computerChoice) { draw++; } else if (playerChoice === rockEl.id && computerChoice === "scissors") { playerScore++; } else if (playerChoice === paperEl.id && computerChoice === "rock") { playerScore++; } else if (playerChoice === scissorsEl.id && computerChoice === "paper") { playerScore++; } else { computerScore++; } playerScoreEl.innerHTML = playerScore; computerScoreEl.innerHTML = computerScore; drawEl.innerHTML = draw; }

 body { font-family: Arial, Helvetica, sans-serif; background-color: #ecf0f1; font-size: 21px; } p { display: inline-block; margin: 10px; } #button { margin: 10px; } #wrapping { width: max-content; margin: auto; } #rock, #paper, #scissors { cursor: pointer; }

 <html lang="no"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock paper scissors</title> </head> <body> <div id="wrapping"> <b>Player: </b> <p id="playerScore"> 0 </p> <br> <b>Computer: </b> <p id="computerScore"> 0 </p> <br> <b>Draw's: </b> <p id="draw"> 0 </p> <br> <div id="buttons"> <button id="rock" class="button"> Rock </button> <button id="paper" class="button"> Paper </button> <button id="scissors" class="button"> Scissors </button> </div> <p id="info"> </p> </div> </body> </html>

Answer 1

您可以将选项单独转换为数字，然后只需检查计算机和玩家的模 3 之间的差异是否为 0、1 或 2：

  var playerChoice = Number(e.target.id); // could also remove the IDs entirely
        // and check the child element index among its siblings
  var computerChoice = Math.floor(Math.random() * 3);
  // Need to add 3 so that negative results get %d properly:
  const diff = (playerChoice - computerChoice + 3) % 3;
  if (diff === 0) {
    draw++;
  } else if (diff === 1) {
    playerScore++;
  } else {
    computerScore++;
  }

 var playerScore = 0; var computerScore = 0; var draw = 0; var possibleChoices = ["rock", "paper", "scissors"]; var playerScoreEl = document.getElementById("playerScore"); var computerScoreEl = document.getElementById("computerScore"); var drawEl = document.getElementById("draw"); var rockEl = document.getElementById("rock"); var paperEl = document.getElementById("paper"); var scissorsEl = document.getElementById("scissors"); var buttonsEl = document.getElementsByClassName("button"); for (var i = 0; i < buttonsEl.length; i++) { buttonsEl[i].addEventListener("click", checkResult); } const choices = ['rock', 'paper', 'scissors']; function checkResult(e) { var playerChoice = Number(e.target.id); var computerChoice = Math.floor(Math.random() * 3); console.log('Player played', choices[playerChoice], 'Computer played', choices[computerChoice]); const diff = (playerChoice - computerChoice + 3) % 3; if (diff === 0) { draw++; } else if (diff === 1) { playerScore++; } else { computerScore++; } playerScoreEl.innerHTML = playerScore; computerScoreEl.innerHTML = computerScore; drawEl.innerHTML = draw; }

 body { font-family: Arial, Helvetica, sans-serif; background-color: #ecf0f1; font-size: 21px; } p { display: inline-block; margin: 10px; } #button { margin: 10px; } #wrapping { width: max-content; margin: auto; } #rock, #paper, #scissors { cursor: pointer; }

 <html lang="no"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock paper scissors</title> </head> <body> <div id="wrapping"> <b>Player: </b> <p id="playerScore"> 0 </p> <br> <b>Computer: </b> <p id="computerScore"> 0 </p> <br> <b>Draw's: </b> <p id="draw"> 0 </p> <br> <div id="buttons"> <button id="0" class="button"> Rock </button> <button id="1" class="button"> Paper </button> <button id="2" class="button"> Scissors </button> </div> <p id="info"> </p> </div> </body> </html>