javascript - 如何使石头剪刀布只能选择有效选项

Question

我用 javascript 做了一个小型剪刀石头布游戏。我想做两件事来让游戏变得更好一点。

1) 如果玩家给出的答案不是石头、剪刀、布，而是提示“请在三个选项之一中进行选择:石头、剪刀、布”

我已经实现了类似的东西，但它只运行了一次。我希望在给出三个答案之一之前出现提示

2) 如果平局，我想让游戏再次从顶部开始运行代码。我怎样才能让程序再次从顶部开始？

这是代码

var userChoice = prompt("Do you choose rock, paper or scissors?");
if (userChoice === "rock")
{}
else if (userChoice === "paper"){}
else if (userChoice === "scissors"){}
else {
    userChoice = prompt ("Please pick between one of the three options: rock, paper or scissors");

}
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
console.log( "The computer's choice is" + " " + computerChoice);
console.log("Your choice was " + userChoice);
var compare = function(choice1 , choice2)
{
    if (choice1 === choice2)
    {
    return "The result is a tie!";

    }


if (choice1 === "rock")
{
    if (choice2 === "scissors")
    {
        return "rock wins";
    }
    else 
    {
        return "paper wins";
    }
}
if (choice1 === "paper")
{
    if (choice2 === "rock")
    {
        return "paper wins";
    }
    else 
    {
        return "scissors wins";
    }
}
if (choice1 === "scissors")
{
    if (choice2 === "rock")
    {
        return "rock wins";
    }
    else
    {
        return "scissors wins";
    }
}
};
compare(userChoice, computerChoice);

Answer 1

您在此程序中所做的只是“条件语句”检查。结构化编程还有另一种构造，称为“循环”

一般来说，人类可以复制粘贴一段代码数千次，甚至可能数百万次，但不是无限次。因此，对于这种情况，程序员使用从初始状态开始的循环，只要给定条件成立并遵循状态更改，就执行相同的代码主体。

在这种情况下，您可以使用 while 循环，因为它是此类场景中最简单的结构。它只需要保持执行代码主体的“条件”。 while循环的结构是这样的。

while ( condition ) {
    <the code that you want it to keep executing>
}

如果我们将您的程序分解为各个部分，则主要有 2 个部分。 1. 获取输入 2. 检查输入是否有效。如果没有再次输入。由此您可以轻松了解循环的条件。

“当输入无效时”

所以就像

while ( the input is not valid / the userChoice is not rock or paper or scissors ) {
    take the input
}

要使循环无限，您可以使用

while ( true ) {
    take the input
}

要打破这个无限循环，可以使用“break;”它里面的任何地方。所以“休息一下”在 if 语句中将像这样跳出循环

while ( true ) {
    if ( condition ) {
        break;
    }
}

因此，如果我们按照您的条件检查方式进行操作，我们就会得到结果。

var userChoice = prompt("Do you choose rock, paper or scissors?");
while ( true ) {
    if (userChoice === "rock")
    {break;}
    else if (userChoice === "paper"){break;}
    else if (userChoice === "scissors"){break;}
    else {
        userChoice = prompt ("Please pick between one of the three options: rock, paper or scissors");
    }
}

但是使用“breaks”是一种不好的编程习惯。那么我们为什么不利用 while 的“条件”呢？

var userChoice = prompt("Do you choose rock, paper or scissors?");
while (userChoice !== "rock" && userChoice !== "paper" && userChoice !== "scissors") {
    userChoice = prompt("Please pick between one of the three options: rock, paper or scissors");
}

既然你希望游戏永远继续下去，我们可以将整个游戏放在一个循环中，对吧？但这将完全夺走您对浏览器的控制，并且在该循环等待您的响应时您无法执行任何操作。那我们就给自己留一条后路吗？为什么我们不添加另一个条件，如果用户输入“EXIT”，游戏就会停止？

while ( true ) {
var userChoice = prompt("Do you choose rock, paper or scissors?");

while (userChoice !== "rock" && userChoice !== "paper" && userChoice !== "scissors" && userChoice !== "EXIT") {
    userChoice = prompt("Please pick between one of the three options: rock, paper or scissors");

}
if (userChoice === "EXIT") {
    console.log("Thanks for playing :)");
    break;
}
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
console.log( "The computer's choice is" + " " + computerChoice);
console.log("Your choice was " + userChoice);
var compare = function(choice1 , choice2)
{
    if (choice1 === choice2)
    {
    return "The result is a tie!";

    }
if (choice1 === "rock")
{
    if (choice2 === "scissors")
    {
        return "rock wins";
    }
    else 
    {
        return "paper wins";
    }
}
if (choice1 === "paper")
{
    if (choice2 === "rock")
    {
        return "paper wins";
    }
    else 
    {
        return "scissors wins";
    }
}
if (choice1 === "scissors")
{
    if (choice2 === "rock")
    {
        return "rock wins";
    }
    else
    {
        return "scissors wins";
    }
}
};
compare(userChoice, computerChoice);
}

现在，您可以像在比较部分中所做的那样将程序分解为函数，从而使以后的修改变得更加容易(对于您和其他人来说)。然后根据用户输入做出决定将是更加稳健的过程。

function take_user_input() {
    var userChoice = prompt("Do you choose rock, paper or scissors?");
    while (userChoice !== "rock" && userChoice !== "paper" && userChoice !== "scissors" && userChoice !== "EXIT") {
        userChoice = prompt("Please pick between one of the three options: rock, paper or scissors");
    }
    return userChoice;
}


function play(userChoice) {

    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "rock";
    } else if(computerChoice <= 0.67) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    console.log( "The computer's choice is" + " " + computerChoice);
    console.log("Your choice was " + userChoice);
    var compare = function(choice1 , choice2)
    {
        if (choice1 === choice2)
        {
        return "The result is a tie!";

        }
    if (choice1 === "rock")
    {
        if (choice2 === "scissors")
        {
            return "rock wins";
        }
        else 
        {
            return "paper wins";
        }
    }
    if (choice1 === "paper")
    {
        if (choice2 === "rock")
        {
            return "paper wins";
        }
        else 
        {
            return "scissors wins";
        }
    }
    if (choice1 === "scissors")
    {
        if (choice2 === "rock")
        {
            return "rock wins";
        }
        else
        {
            return "scissors wins";
        }
    }
    };
    compare(userChoice, computerChoice);
}

while ( true ) {
    var userChoice = take_user_input();

    if (userChoice === "EXIT") {
        console.log("Thanks for playing :)");
        break;
    } else {
        play(userChoice);
    }
}

之后，您可以学习更多有关读取 DOM 元素并使用 jQuery 修改它们/通过 Javascript 修改 HTML 的知识。 :) 但这带来了一个全新的话题。但我建议你这样看。当可以使用图形用户界面来玩石头剪刀布时，没有人愿意使用控制台日志来玩。