石头、纸或剪刀游戏 - 不返回获胜者的表达等

Question

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

在我的浏览器上没有显示谁获胜的消息。比如“电脑赢”。我得到的是以下内容：

计算机：纸

你：摇滚

我的代码是：

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 statement 来给出消息“请插入一个有效的响应”，以防用户没有选择 3 个选项中的任何一个。但是我应该把它放在函数中的什么地方呢？我试着把它放在最后，但不管我写什么，它总是显示信息。

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

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

最后但同样重要的是，为什么在函数内部使用return（而不是document.getElementById()）然后在document.getElementById() 内部调用函数不起作用

提前致谢。

Answer 1

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

这不属于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!');
}

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

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

我为什么不能使用包含许多行代码的函数来编写这个游戏，而不是这么多 if 语句，例如： else if(userChoice === 'Paper' && computerChoice === 'Paper') { return ('It\'s a tie!'); }

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

最后但同样重要的是，为什么在函数内部使用return（而不是document.getElementById()）然后在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()];
};