Question

我做了一个基本的＆＃34;摇滚，纸张或剪刀＆＃34;游戏。我对这个项目有一些疑问/问题。

在我的浏览器上显示谁获胜的消息。例如＆＃34;计算机获胜＆＃34;。我得到的是以下内容：

计算机：纸张

你：摇滚

我的代码是：

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来发送消息＆＃34;请插入有效的回复＆＃34;如果用户没有选择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-ifs并没有什么根本性的错误。您可以使用不同的方法，例如面向对象的方法，每个对象都知道其他选择是什么，不是什么，但是，这种做法并没有那么明显。

最后但并非最不重要的一点是，为什么在函数内部使用return（而不是document.getElementById()）然后调用document.getElementById()
中的函数是不行的？

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

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()];
};

摇滚，纸张或剪刀游戏 - 并不能表达谁赢了等等

1 个答案: