javascript - 石头，剪刀，可汗学院

我正在为可汗学院编程一个剪刀石头布游戏，所以我可以看到图像，但是var compare = function(choice1, choice2)无法正常工作。 html它的工作原理很好。
插入了我其余的代码（请记住，视觉效果和按钮不是

background(0, 0, 0);
var userChoice = text("Do you choose rock, paper or scissors? Refresh to play again!", 25, 50); //starting text
var choice1 = userChoice;
var choice2 = computerChoice;
var winner = 25;
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
} // Abover: computers choice, randomly chooses rock, paper or scissors
var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
        text("It is a draw!!! Try again!", winner, 50); // If both choices are the same it is a draw
    }
};
if (choice1 === "rock") {
    if (choice2 === "scissors") {
        text("rock Wins!!!", winner, 50);
    } else {
        text("paper Wins!!!", winner, 50); // If the choices are rock and scissors, rock wins, if not then paper wins
    }
}
if (choice1 === "paper") {
    if (choice2 === "rock") {
        text("paper Wins!!!", winner, 50);
    } else {
        if (choice2 === "scissors") {
            text("scissors Wins!!!", winner, 50); // If the choices are rock and paper, paper wins, if not then scissors
        }
        if (choice1 === "scissors") {
            if (choice2 === "rock") {
                text("rock Wins!!!", winner, 50);
            } else {
                if (choice2 === "paper") {
                    text("paper Wins!!!", winner, 50); // If the choices are scissors and rock, rock wins, if not then paper
                }
            }
        }
    }
}

// Above: compares the two choices to determine the winner, winner is rock, paper or scissors, not computer or user
text("User Choice: ", 20, 80 + userChoice);
text("Computer Choice: ", 20, 70 + computerChoice);
compare(userChoice, computerChoice); // Above: the message that tells the user who won
//Below: everything to do with the buttons
var squareW = 50;
var squareH = 50;
draw();
rect(75, 200, squareW, squareH); //left square
rect(175, 200, squareW, squareH); //middle square
rect(275, 200, squareW, squareH); //right square

最佳答案

我可以看到您现在已经知道了，但是出于好奇我还是尝试了一下。我进行了一些更改，如下所示。我必须重新排列一些功能并进行一些嵌套，以便用户在计算结果之前有机会做出选择。我还删除了一些代码以避免文本重叠。我将它留给您进行清理，但现在您的游戏可以针对用户和计算机选择的每种可能组合正确运行。

background(0, 0, 0);
var userChoice;
var computerChoice;
var winner = 200;

text("Do you choose rock, paper or scissors?", 25, 22);
var squareW = 50;
var squareH = 50;
draw();
text("ROCK", 75, 180, squareW, squareH);
rect(75, 200, squareW, squareH); //Choose rock by clicking anywhere to the left of this square's right edge.
text("PAPER", 175, 180, squareW, squareH);
rect(175, 200, squareW, squareH); //Choose paper by clicking anywhere between the left square's right edge and the right square's left edge.
text("SCISSORS", 275, 180, squareW + 10, squareH);
rect(275, 200, squareW, squareH); //Choose scissors by clicking anywhere to the right of this square's left edge.

mousePressed = function() {
    //I wasn't sure how to keep the above background, squares and text from disappearing without repeating the code within this function.
    background(0, 0, 0);
    text("Do you choose rock, paper or scissors?", 25, 22);
    draw();
text("ROCK", 75, 180, squareW, squareH);
rect(75, 200, squareW, squareH); //left square
text("PAPER", 175, 180, squareW, squareH);
rect(175, 200, squareW, squareH); //middle square
text("SCISSORS", 275, 180, squareW + 10, squareH);
rect(275, 200, squareW, squareH); //right square

    if(mouseX < 125) {
        userChoice = "rock";
    } else if(mouseX < 225) {
        userChoice = "paper";
    } else {
        userChoice = "scissors";
    }

    computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
var compare = function(userChoice, computerChoice) {
    if (userChoice === computerChoice) {
        text("YOU BOTH WIN! YAY!", winner, 50);
    }
};
if (userChoice === "rock") {
    if (computerChoice === "scissors") {
        text("YOU'RE A WINNER!!!", winner, 50);
    } else if (computerChoice === "paper") {
        text("YOU'RE A LOSER!!!", winner, 50); // I don't include a final else statement here because it would cause overlapping text and draws are already accounted for.
    }
}
if (userChoice === "paper") {
    if (computerChoice === "rock") {
        text("YOU'RE A WINNER!!!", winner, 50);
    } else if (computerChoice === "scissors") {
        text("YOU'RE A LOSER!!!", winner, 50);
    }
}
if (userChoice === "scissors") {
    if (computerChoice === "paper") {
        text("YOU'RE A WINNER!!!", winner, 50);
    } else if (computerChoice === "rock") {
        text("YOU'RE A LOSER!!!", winner, 50);
    }
}

// I figured it would make more sense to specify if the user won rather than rock, paper or scissors.
text("Your Choice: " + userChoice, 50, 50);
text("Computer's Choice: " + computerChoice, 50, 100);
compare(userChoice, computerChoice);
};

关于javascript - 石头，剪刀，可汗学院，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38755074/