石头，剪刀，布

Javascript Rock, Paper, Scissors

本文关键字：剪刀石头更新时间：2023-09-26

我遵循了http://www.codecademy.com上的Javascript教程，其中一部分是创建一个剪刀、石头、布游戏。在我完成它之后，我想我应该重新设计一下，让我自己使用。所以我这样做:

<!DOCTYPE html>
<html>
    <body>
        <script>
        var userChoice = document.getElementById("userChoice").value;
        if (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors"){
            alert("Your choice was not rock, paper or scissors");
            userChoice = prompt("Do you choose rock, paper or scissors?");
        }
        var computerChoice = Math.random();
        if (computerChoice < 0.34) {
            computerChoice = "rock";
        } else if(computerChoice <= 0.67) {
            computerChoice = "paper";
        } else {
            computerChoice = "scissors";
        }
        var compare = function(choice1, choice2) {
            if (choice1 == choice2) {
                return "The result is a tie!";
            } else if (choice1 == "rock") {
                if (choice2 == "scissors") {
                    return "Rock wins";
                } else {
                    return "Paper wins";
                }
            } else if (choice1 == "paper") {
                if (choice2 == "rock") {
                    return "Paper wins";
                } else {
                    return "Scissors wins";
                }
            } else if (choice1 == "scissors") {
                if (choice2 == "paper") {
                    return "Scissors win";
                } else {
                    return "Rock wins";
                }
            }
        }
        function Run() {
            document.getElementById("pcc").innerHTML = "Computer: " + computerChoice;
            document.getElementById("result").innerHTML = compare(userChoice, computerChoice);
        }
    </script>
    <main>
        <h2>Choose between rock, paper or scissors: </h2>
        <input id="userChoice">
        <button onClick="Run()">Choose</button>
        <p id="pcc"></p>
        <p id="result"></p>
    </main>
</body>
</html>

但是它不起作用，我得到未定义的比较，computerChoice, userChoice，并且没有任何东西存储在值中。怎么了?

您需要将脚本的所有内容放在一个函数中，试试这个。它试图在开始的逻辑设置变量之前使用它们，因为开始的逻辑从未被调用:)

    function run(){  
    var userChoice = document.getElementById("userChoice").value;
    if (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors"){
        alert("Your choice was not rock, paper or scissors");
        userChoice = prompt("Do you choose rock, paper or scissors?");
    }
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "rock";
    } else if(computerChoice <= 0.67) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    var compare = function(choice1, choice2) {
        if (choice1 == choice2) {
            return "The result is a tie!";
        } else if (choice1 == "rock") {
            if (choice2 == "scissors") {
                return "Rock wins";
            } else {
                return "Paper wins";
            }
        } else if (choice1 == "paper") {
            if (choice2 == "rock") {
                return "Paper wins";
            } else {
                return "Scissors wins";
            }
        } else if (choice1 == "scissors") {
            if (choice2 == "paper") {
                return "Scissors win";
            } else {
                return "Rock wins";
            }
        }
    }
        document.getElementById("pcc").innerHTML = "Computer: " + computerChoice;
        document.getElementById("result").innerHTML = compare(userChoice, computerChoice);
    }

您应该删除<main>标记并正确关闭第二段标记，如下所示:

<p id="result"></p>