3

我刚开始学习 javascript，并在 codeacademy 上做了一个练习，制作了一个基于文本的石头剪刀布游戏。我想在调试控制台之外向某人展示它，但我不知道如何在 html 页面中显示它。

我的html文件中的代码是：

<HTML>

    <HEAD>
        <script src="rockpaperscissors.js"></script>
    </HEAD>

    <BODY>Choose rock, paper or scissors and write your choice in the text box
        <p>
             <A HREF="javascript:processOrder();">Click here to begin</A>
    </p>
    ...
    </BODY>
</HTML>

我的JS中的代码是：

var 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!";
    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);

我收到选择石头纸或剪刀的提示，但在那之后它没有返回任何东西。我没有在 html 中看到计算机选项，也不知道用什么来显示它。

4

3 回答 3

7

id一种简单的方法是在 html中放置一个带有 的元素：

<div id="ret"></div>

然后，您可以将 javascript 的最后一行更改为：

document.getElementById("ret").innerHTML=compare(userChoice,computerChoice);

这将把结果放在里面div。

或者你可以这样做：

document.write(compare(userChoice,computerChoice));

它将在您放置脚本标签的位置写入结果。

于 2013-07-18T14:40:25.700 回答
1

您需要一个地方来显示返回的结果。

将你的最后一行 JS 更改为

alert(compare(userChoice,computerChoice));
于 2013-07-18T14:45:18.267 回答
1

很好地完成了 RPS 练习。看一下这个 JSFiddle以了解显示用户/计算机选择和结果的实现。

您会注意到一些关键变化。首先，您不应该在 href 中链接到 javascript 函数：

<A HREF="javascript:processOrder();">Click here to begin</A>

看看这个很棒的 SO 答案，了解可以改进该实践的各种方法。在我的示例实现中，我使用 jQuery 库在Click here to begin提示符上创建单击事件处理程序，如下所示：

$('#begin').click(function() {playRPS(); return false;});

其次，您会注意到新playRPS功能。这使用户能够决定何时玩您的游戏，并多次玩。

使用上面列出的原始代码，当加载 Javascript 代码时，浏览器会立即执行一些操作，然后不再执行：

  • 它启动用户输入值的提示。一旦用户输入他们的选择：
    • 它为computerChoice 选择一个随机值并将其转换为适当的rock/paper/scissors 字符串值。
    • 它执行 compare() 函数。

它甚至不等待用户点击您的Click here to begin链接！看看下面的函数：

var playRPS = function() {
    var userChoice = prompt("Do you choose rock, paper or scissors?");
    var compChoice = computerChoice();
    var result = compare(userChoice,compChoice);
    $('body').append('<p>You chose ' + userChoice + '</p>')
               .append('<p>The computer chose ' + compChoice + '</p>')
               .append('<p>' + result + '</p>');
};

它又短又甜。当被调用时（记住，只要<a id="begin">点击链接，它就会被调用，就像用 jQuery 设置的那样），它会做你需要为一轮 RPS 做的所有事情：

  • 它询问用户他们想要选择什么。
  • 它运行该computerChoice函数，生成一个新的随机数并将该数字转换为字符串。
  • 它运行你的compare功能
  • 它在元素末尾之前的标签中添加用户的选择、计算机的选择和compare函数返回的结果。<p><body>

现在有许多方法可以进一步改进——结果可以以更漂亮的方式显示。可能应该检查用户的输入以查看它是否是一个有效的答案（例如，如果我在框中输入“fire”会发生什么？或“Paper”？），但这是一个很好的开始！

于 2013-07-18T15:29:21.240 回答