如何制作如此只有有效的选项可以选择石头剪刀

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

你在这个程序中所做的只是'条件语句'检查.结构化编程还有另一种构造称为"循环"

通常,人类有可能复制粘贴一段代码1000次,甚至数百万但不是无限的.因此,对于这样的情况,程序员使用以初始状态开始的循环,只要给定条件成立并遵循状态更改,就执行相同的代码体.

在这种情况下,您可以使用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");
    }
}

但使用"休息"是一种糟糕的编程习惯.那么为什么我们不利用"条件"的优势呢？

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

既然你想让游戏永远存在,我们可以将整个游戏放在一个循环中吗？但是,这将完全控制您的浏览器,并且在循环等待您的响应时您无法执行任何操作.那么我们为自己保留出路？为什么我们不添加另一个条件,如果用户键入"退出"游戏停止？

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

现在,通过将程序分解为函数,您可以更加轻松地修改(对于您和其他人),就像您对Compare部分所做的那样.然后对userInput做出决定将是一个更加健壮的过程.

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.:)但这带来了一个全新的话题.但我建议你这样看.当他们可以使用图形用户界面执行此操作时,没有人愿意使用控制台日志来播放Rock Paper Scissors.