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

时间:2013-12-23 04:59:58

标签: javascript conditional-statements

我用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);

2 个答案:

答案 0 :(得分:8)

您在此计划中所做的只是“条件声明”检查。结构化编程还有另一种结构叫做'循环'

通常,人类可以复制粘贴一段代码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");
    }
}

但使用'break'是一种糟糕的编程习惯。那么为什么我们不利用“条件”的优势呢?

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。

答案 1 :(得分:2)

你可以将游戏包装在一个函数中,然后在任何时候调用它。也许把初始提示放在自己的函数中,如果它有效,则调用游戏函数。

function getUserInput()
{
    // put prompt and validation logic here, then call when its a tie
    // You might try consolidating the validation logic with regular expression:
    // This returns an array of matches if only rock, paper or scissors was entered.
       userChoice.match(/(rock|paper|scissors)/)

    if(userChoice)
    {
         runGameLogic();
    }

}