我需要为计算机科学制作石头，剪刀纸，但我需要添加蜥蜴和斯波克

Question

嗨，谢谢你的时间，所以对于我的课程，我需要制作RPS蜥蜴斯波克，到目前为止，我已经让基本的石头纸和剪刀工作了 但我似乎无法正确添加蜥蜴和斯波克选项

我已经用JS制作了基本游戏，它运行良好，我最近添加了蜥蜴和斯波克图标，并试图为它们添加功能，但无济于事，但无济于事

function userRock(){
if (computerChoice === choices[0]){
document.getElementById('message').innerHTML = 'Draw';
}
if (computerChoice === choices[1]){
losses++;
document.getElementById('losses').innerHTML = losses;
document.getElementById('message').innerHTML = 'AI picked paper you lose';
}
if (computerChoice === choices[2]){
document.getElementById('rock').setAttribute('class', 'wins');
wins++
document.getElementById('wins').innerHTML = 'wins';
document.getElementById('message').innerHTML = 'AI picked scissor you win';
}
goComputer();
}

这是一个代码笔：https://codepen.io/axelnijsten/pen/rNNLjaL

我希望蜥蜴和斯波克只用javascript正常工作

Answer 1

总的来说，这看起来不错。您可以在此处应用一些常见的编程原则：

一个原则是DRY(不要重复自己(，你可以用它来document.getElementById(id).innerHTML你在几个地方使用。您应该创建一个单独的函数来执行此操作：setInnerHTMLById(id, message)。这使您的行更短、更易于阅读且更易于维护。

这里的另一件事是你如何使用你的if语句：计算机只能做出一个选择，所以不要使用 3 个if语句，而是考虑使用if和else if语句，或者一个switch(特别是当你想添加蜥蜴和斯波克时(。这使您的代码更快，因为它不必检查不必要的 ìfs (e.g. when the first如果 ' 语句已经为真，它将不会检查第二个和第三个(

有了switch声明，实施新选择将是小菜一碟

Answer 2

为了使它更短，做这样的事情..我不知道这究竟如何与所谓的蜥蜴相吻合！？但是，如果蜥蜴被石头打了，但打了剪刀，那么只需将其作为选择中的第四元素即可。

//give AI choices
let choices = ['Rock', 'Paper', 'Scissor'];
let computerChoice;
let wins = 0;
let losses = 0;
//adds scores
document.getElementById('wins').innerHTML = wins;
document.getElementById('losses').innerHTML = losses;
//makes the AI pick Rock Paper or Scissor
function goComputer () {
computerChoice = Math.floor(Math.random() * choices.length);
console.log(computerChoice);
return computerChoice;
}
function userAction(userChoice) //0..n-1 (choices must be in order that idxN is always beaten by idxN+1, unless n is the length-1 then its beaten by idx0)
{
//calling AI to make a move
const computerChoice = goComputer();
if (computerChoice === userChoice){
document.getElementById('message').innerHTML = 'Draw';
}
else if (userChoice === choices.length-1 && computerChoice === 0 || userChoice !== choices.length-1 && computerChoice > userChoice)
{
losses++;
document.getElementById('losses').innerHTML = losses;
document.getElementById('message').innerHTML = 'AI picked '+choices[computerChoice]+' you lose';
}
else
{
document.getElementById('rock').setAttribute('class', 'wins');
wins++
document.getElementById('wins').innerHTML = wins;
document.getElementById('message').innerHTML = 'AI picked '+choices[computerChoice]+' you win';
}
}

Answer 3

我已经稍微改变了你的代码。现在只有一个函数被调用，但它的参数与您的选择数组相对应。

let choices = ['Rock', 'Paper', 'Scissor', 'Lizard', 'Spock'];
0        1         2         3         4

现在标记如下所示

<div class="main" id="rock" onclick="action(0)">
<i class="fas fa-hand-rock"></i>
<h3> Rock </h3>
</div>
<div class="main" id="paper" onclick="action(1)">
<i class="fas fa-hand-paper"></i>
<h3> Paper </h3>
</div>
<div class="main" id="scissor" onclick="action(2)">
<i class="fas fa-hand-scissors"></i>
<h3> Scissor </h3>
</div>
<div class="main" id="lizard" onclick="action(3)">
<i class="fas fa-hand-lizard"></i>
<h3> Lizard </h3>
</div>
<div class="main" id="spock" onclick="action(4)">
<i class="fas fa-hand-spock"></i>
<h3> Spock </h3>
</div>  

如果用户选择一个选项，我们执行游戏逻辑

const choices = ['Rock', 'Paper', 'Scissor', 'Lizard', 'Spock'];
let wins = 0;
let losses = 0;
//adds scores
document.getElementById('wins').innerHTML = wins;
document.getElementById('losses').innerHTML = losses;
//makes the AI pick Rock Paper or Scissor
function goComputer () {     
return Math.floor(Math.random() * choices.length);
}
function action(playerChoice) {
// get computer choice as a number
const computerChoice = goComputer();
// check who won
// draw 
if (computerChoice === playerChoice) {
document.getElementById('message').innerHTML = 'Draw';
}
// Rock
if (computerChoice === 0 && (playerChoice === 2 || playerChoice == 3)) {
playerLooses(computerChoice);
} else if (playerChoice === 0 && (computerChoice === 2 || computerChoice == 3)) {
// dry win action
playerWins(playerChoice, computerChoice);
}
// paper 
if (computerChoice === 1 && (playerChoice === 0 || playerChoice == 4)) {
// dry loose action
playerLooses(computerChoice);
} else if (playerChoice === 1 && (computerChoice === 0 || computerChoice == 4)){
playerWins(playerChoice, computerChoice);
}
// scissor
if (computerChoice === 2 && (playerChoice === 1 || playerChoice == 3)) {
playerLooses(computerChoice);
} else if (playerChoice === 2 && (computerChoice === 1 || computerChoice == 3)) {
playerWins(playerChoice, computerChoice);
}
// lizzard
if (computerChoice === 3 && (playerChoice === 1 || playerChoice == 4)) {
playerLooses(computerChoice);
} else if (playerChoice === 3 && (computerChoice === 1 || computerChoice == 4)) {
playerWins(playerChoice, computerChoice);
}  
//spock
if (computerChoice === 4 && (playerChoice === 2 || playerChoice == 0)) {
playerLooses(computerChoice);
} else if (playerChoice === 4 && (computerChoice === 2 || computerChoice == 0)) {
playerWins(playerChoice, computerChoice);
}        
}
function playerLooses(computerChoice) {
losses++;
document.getElementById('losses').innerHTML = losses;
document.getElementById('message').innerHTML = `AI picked ${choices[computerChoice]} you lose`;
}
function playerWins(playerChoice, computerChoice) {
wins++;
document.getElementById(choices[playerChoice].toLowerCase()).setAttribute('class', 'wins');
document.getElementById('wins').innerHTML = wins;
document.getElementById('message').innerHTML = `AI picked ${choices[computerChoice]} you win`;
}

我们仍然使用数组来获取正确的元素和输出文本。