Question

我在Javascript中尝试使用Rock-Paper-Scissors游戏。我在HTML文件中使用3个图像作为按钮。我遇到了一个问题，我正在用它来检查胜利。每次单击一个按钮，我都会得到不同的播放器选择和计算机选择值，但只有在比较两者时才会获得比较函数中的最后一个值。例如，当我点击＆＃34; Rock＆＃34;时，计算机将选择＆＃34; Paper＆＃34; - 但Javascript会读到我们都选择了＆＃34; Scissors＆＃34;（我比较函数中的最后一个值）。有什么建议吗？

/*  SET ALL VARIABLES   */
//set choice variables
var p1Choice;
var p2Choice;
var cChoice;

//set the rock image to act as a button
function rockSelected (p1Choice) {
    p1Choice = "R";
    alert (p1Choice);
}

//set the paper image to act as a button
function paperSelected (p1Choice) {
    p1Choice = "P";
    alert (p1Choice);
}

//set the scissor image to act as a button
function scissorSelected (p1Choice) {
    p1Choice = "S";
    alert (p1Choice);
}

function cpuSelect (cChoice) {
    cChoice = Math.random();
    if (cChoice <= 0.33) {
        cChoice = "R"
        alert (cChoice)}
    else if (cChoice >= 0.34  && cChoice <= 0.66)
    {cChoice = "P";
    alert (cChoice);}
    else 
    {cChoice = "S";
    alert (cChoice);}
}

//check user imput against computer selection
function  compare (p1Choice, cChoice) {
    if (p1Choice == "R") {
        if (cChoice == "R") {
            alert ("player chose rock, cpu chose rock - it was a tie");
            return "it was a tie";
        }
        else if (cChoice == "P") {
            alert ("player chose rock, cpu chose paper - Paper wins!");
            return "paper wins";
        }
        else {
            alert ("player chose rock, cpu chose scissors - rock wins");
            return "rock wins";
        }
    }
    else if (p1Choice == "P") {
        if (cChoice == "R") {
            alert ("player chose paper, cpu chose rock - paper wins");
            return "paper wins";
        } else if (cChoice == "P") {
            alert ("player chose paper, cpu chose paper - it was a tie");
            return "it was a tie";
        } else {
            alert ("player chose paper, cpu chose scissors -scissors wins");
            return "scissors wins";
        }
    }
    else {
        if (cChoice == "R") {
        alert ("player chose scissors, cpu chose rock - rock wins");
        return "rock wins";
        } else if (cChoice == "P") {
            alert ("player chose scissors, cpu chose paper - scissors wins");
            return "scissors wins";
        } else {
            alert ("player chose scissors, cpu chose scissors - it was a tie");
            return "it was a tie";
        }
    }
}

Answer 1

你可以通过做一点循环任务来实际做一些非常简单的事情：

var choices = {
    rock: {},
    paper: {},
    scissors: {}
};

choices['rock'].beats = choices['scissors'];
choices['paper'].beats = choices['rock'];
choices['scissors'].beats = choices['paper'];

var playerChoice = choices['rock'];
var cpuChoice = choices['paper'];

if(playerChoice.beats === cpuChoice) {
    //winner!
} else if(playerChoice === cpuChoice) {
    //tie
} else {
    //loser
}

Answer 2

问题是全局变量p1Choice和cChoice永远不会被rockSelected，paperSelected，scissorSelected和{{1}设置} 方法。其背后的原因是这些函数定义具有与全局变量同名的参数。所以实际发生的是你只是改变了局部变量的值，这不是你的意图。

例如，在cpuSelect方法中，由于函数定义包含rockSelected参数，因此表达式p1Choice仅设置局部变量，使全局变量保持未定义。

现在，当您调用p1Choice = "R"方法时，它将始终返回相同的值，因为您的全局变量仍未定义。

要解决此问题，您可以删除compare，rockSelected，paperSelected和scissorSelected方法的参数。这应该使全局变量实际设置，这将使您的cpuSelect方法正常工作。例如，compare方法应如下所示：

rockSelected

您还必须摆脱function rockSelected() { p1Choice = "R"; alert (p1Choice); }方法中的两个参数，以便它也使用全局变量。

此外，如果您感兴趣，此错误称为“变量阴影”，您可以获得有关它的一些基本信息here。基本上，这里要学到的教训是要注意你的范围内的变量名。

Answer 3

我修改了你的代码，坚持问题的最初目的。问题是您没有使用您创建的功能。我删除了您用作图像按钮的3个函数，因为它们没有引用任何HTML，并且您没有提供任何HTML以及您未使用的变量。我相信你可以修改代码以提高效率。 Here是修改过的代码的一个有效示例。

function cpuSelect () {
    cChoice = Math.random();
    if (cChoice <= 0.33) {
        cChoice = "R";
    alert ("CPU Selected Rock");
    return cChoice;
    }
    else if (cChoice >= 0.34  && cChoice <= 0.66)
    {cChoice = "P";
   alert ("CPU Selected Paper");
    return cChoice;
    }
    else 
    {cChoice = "S";
   alert ("CPU Selected Scissors");
    return cChoice;
    }
}

//check user imput against computer selection
function  compare (p1Choice) {
    cChoice = cpuSelect();

    if (p1Choice == "R") {
        if (cChoice == "R") {
            alert ("player chose rock, cpu chose rock - it was a tie");
            return "it was a tie";
        }
        else if (cChoice == "P") {
            alert ("player chose rock, cpu chose paper - Paper wins!");
            return "paper wins";
        }
        else {
            alert ("player chose rock, cpu chose scissors - rock wins");
            return "rock wins";
        }
    }
    else if (p1Choice == "P") {
        if (cChoice == "R") {
            alert ("player chose paper, cpu chose rock - paper wins");
            return "paper wins";
        } else if (cChoice == "P") {
            alert ("player chose paper, cpu chose paper - it was a tie");
            return "it was a tie";
        } else {
            alert ("player chose paper, cpu chose scissors -scissors wins");
            return "scissors wins";
        }
    }
    else {
        if (cChoice == "R") {
        alert ("player chose scissors, cpu chose rock - rock wins");
        return "rock wins";
        } else if (cChoice == "P") {
            alert ("player chose scissors, cpu chose paper - scissors wins");
            return "scissors wins";
        } else {
            alert ("player chose scissors, cpu chose scissors - it was a tie");
            return "it was a tie";
        }
    }
}

compare("R");

Javascript Rock-Paper-Scissors游戏

3 个答案: