javascript - 石头、剪刀、布、可汗学院

Question

我正在可汗学院编写一个剪刀石头布游戏，这样我就可以看到视觉效果，但是 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    

Answer 1

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

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