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

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>

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

Change two values depending on specific comparisons between two other values?

javascript

variables

comparison

if-statement

function