我刚开始学习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中看不到计算机选项,也不知道用什么来显示它。
一个简单的方法是将带有id
的元素放在html:中
<div id="ret"></div>
然后,您可以将javascript的最后一行更改为:
document.getElementById("ret").innerHTML=compare(userChoice,computerChoice);
这将把结果放入div
中。
或者你可以做:
document.write(compare(userChoice,computerChoice));
它将把结果写在您放置脚本标记的位置。
您需要一个位置来显示返回的结果。
将JS的最后一行更改为
alert(compare(userChoice,computerChoice));
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选择一个随机值,并将其转换为适当的岩石/纸张/剪刀线值
- 它执行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"会发生什么?),但这是一个很好的开始!