javascript - 石头、剪刀、布游戏 - 不返回谁获胜的表达式等

Question

我制作了一个基本的“石头、剪刀、布”游戏。我对这个项目有一些疑问/问题。

在我的浏览器上，不显示谁获胜的消息。如“计算机获胜”。我得到的结果如下:

Computer: Paper

You: rock

我的代码是:

let userChoice = prompt("Do you choose Rock, Paper or Scissors?");
let computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Rock";
} else if(computerChoice <= 0.67) {
computerChoice = "Paper";
} else {
computerChoice = "Scissors";
} 

let compare = function(choice1, choice2) {
if (choice1 === choice2) {
    document.getElementById('printwo').innerHTML =  'The result is a    tie!';
 }
 else if (choice1 === "Rock"){
     if (choice2 ==="Scissors") {
          document.getElementById('printwo').innerHTML =  'Rock wins';
         }

     else {
          document.getElementById('printwo').innerHTML =  'Paper wins';
         }
     }
     else if (choice1 === 'Paper') {
     if (choice2 === 'Rock') {
          document.getElementById('printwo').innerHTML =  'Paper wins';
         }
     else {
          document.getElementById('printwo').innerHTML =  'Scissors wins';
         }

     }
     else if (choice1 === 'Scissors') {
         if (choice2 ==='Rock') {
              document.getElementById('printwo').innerHTML =  'Rock wins';
             }
         else  {
             document.getElementById('printwo').innerHTML = 'Scissors wins';
             }
         }

};

 document.getElementById("print").innerHTML = "Computer: " + computerChoice + "</br>" + "You: " + userChoice;
 compare(userChoice, computerChoice);

我还想添加一个else语句来给出消息“请插入有效的响应”，以防用户不选择任何3个选项。但我应该把它放在函数中的什么地方呢？我尝试将其放在最后，但无论我写什么，它总是显示该消息。

为什么我不能使用包含许多行代码的函数(例如下面的代码)来编写这个游戏，而不是使用这么多 else if 语句:

else if(userChoice === 'Paper' && computerChoice === 'Paper') {
return ('It\'s a tie!'); }

最后但并非最不重要的一点是，为什么使用 return (而不是 document.getElementById())不起作用) 在函数内，然后调用 document.getElementById()

内的函数

提前致谢。

Answer 1

I also wanted to add an else statement to give the message "Please insert a valid response" in case the user doesn't choose any of the 3 options. But where should I place it inside the function? I tried putting it at the end but then it always displayed the message, no matter what I wrote.

这不属于compare函数。当您获得用户输入时，这将是最好的。您可能需要反复询问用户，直到获得有效的输入，例如:

const choices = ['Rock', 'Paper', 'Scissors'];
var userChoice;
while (true) {
  prompt("Do you choose Rock, Paper or Scissors?");
  if (choices.indexOf(userChoice) != -1) break;
  console.log('Invalid choice!');
}

顺便说一句，定义选项还可以让您简化设置计算机选项的方式:

let computerChoice = choices[Math.floor(Math.random() * choices.length)];

Instead of so many else if statements, why can't I write this game using a function which contains many lines of code such as this one: else if(userChoice === 'Paper' && computerChoice === 'Paper') {
return ('It\'s a tie!'); }

由于 choice1 === choice2 条件，您实际上并没有确切的行。无论如何，拥有所有这些 if-else-if 并没有什么根本性的错误。您可以使用不同的方法，例如面向对象的方法，每个对象都会知道什么其他选择可以打败它，什么不能，但这种方法是否明显更好还不是很明显。

Last but not least, why doesn't it work to use return (instead of document.getElementById()) inside the function and then call the function inside of document.getElementById()

确实，最好从 compare 函数中删除所有重复的 document.getElementById('printwo').innerHTML = 。你可以这样写:

let compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    return 'The result is a    tie!';
  } else if (choice1 === "Rock") {
    if (choice2 === "Scissors") {
      return 'Rock wins';
    } else {
      return 'Paper wins';
    }
  } else if (choice1 === 'Paper') {
    if (choice2 === 'Rock') {
      return 'Paper wins';
    } else {
      return 'Scissors wins';
    }
  } else {
    if (choice2 === 'Rock') {
      return 'Rock wins';
    } else  {
      return 'Scissors wins';
    }
  }
};

document.getElementById('printwo').innerHTML = compare(userChoice, computerChoice);

使用三元运算符 ?::

可以实现更紧凑的书写风格

  if (choice1 === choice2) {
    return 'The result is a    tie!';
  } else if (choice1 === "Rock") {
    return choice2 === "Scissors" ? 'Rock wins' : 'Paper wins';
  } else if (choice1 === 'Paper') {
    return choice2 === "Rock" ? 'Paper wins' : 'Scissors wins';
  } else {
    return choice2 === "Rock" ? 'Rock wins' : 'Scissors wins';
  }

这是另一种数据驱动方法:

const rps = {
  rock: {
    paper: 'Paper wins',
    scissors: 'Rock wins'
  },
  paper: {
    rock: 'Paper wins',
    scissors: 'Scissors wins'
  },
  scissors: {
    rock: 'Rock wins',
    paper: 'Scissors wins'
  }
};

let compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    return 'The result is a tie!';
  }
  return rps[choice1.toLowerCase()][choice2.toLowerCase()];
};