Javascript 石头剪刀布游戏

Question

我正在尝试用 Javascript 编写剪刀石头布游戏。我在 HTML 文件中使用 3 个图像作为按钮。我遇到了用于检查胜利的功能的问题。每次点击一个按钮，我会得到玩家选择和电脑选择不同的值，但是当两者进行比较时，只会得到比较函数中的最后一个值。例如，当我单击“Rock”时，计算机将选择“Paper” - 但 Javascript 会读取我们都选择了“Scissors”（我的比较函数中的最后一个值）。有什么建议吗？

/*  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

我修改了您的代码，以坚持问题的原始目的。问题是您没有使用您创建的功能。我删除了您用作图像按钮的 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");

Answer 3

问题在于，rockSelected、paperSelected、scissorSelected 和 cpuSelect 方法永远不会设置全局变量 p1Choice 和 cChoice。其背后的原因是这些函数定义有一个与全局变量同名的参数。所以实际发生的事情是你只是在改变局部变量的值，这不是你的意图。

例如，在rockSelected方法中，由于函数定义包含p1Choice参数，表达式p1Choice = "R"只设置局部变量，而未定义全局变量。

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

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

function rockSelected() {
    p1Choice = "R";
    alert (p1Choice);
}

您还必须去掉 compare 方法中的两个参数，以便它也使用那里的全局变量。

另外，如果你有兴趣，这个错误被称为“变量阴影”，你可以得到一些关于它的基本信息here。基本上，这里要吸取的教训是注意变量名的范围。