此JavaScript程序将让用户对计算机播放Rock,Paper,Scissors。如果玩家希望玩游戏,他应该按一个按钮开始游戏。该程序将提示玩家输入Rock的“摇滚”选项,Paper的“纸”,剪刀的“剪刀”,蜥蜴的“Lizard”和spock的“spock”。计算机“播放器”将生成一个随机数,以表明它的选择。
程序将显示谁赢得了游戏(计算机或玩家)以及计算机和播放器的选择。
我遇到的问题是,当var“UserChoice”在文本框内输入答案并点击“提交”时,屏幕变为空白。我也不知道如何在没有庞大列表的情况下整齐地放下我的“IF”语句。我对JavaScript非常陌生,所以我的技能和能力都很低。谢谢你的帮助!
HTML
<head>
<title> RPSSL </title>
</head>
<div style="width:1331px; height:62px ;border:6px; background-color:#263035"> <!-- Header -->
<center><h1>Rock, Paper, Scissors, Lizard, and Spock</h1></center></div>
<center>
<img src="http://www.thinkgeek.com/images/products/additional/large/b597_rock_papaer_scissors_lizard_spock_dd.jpg"
width= "400" height= "400">
<form onsubmit="Game()"> <!-- Textbox and submit button -->
<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
<input type="submit" value="Submit">
</form>
的JavaScript
var rock = 1;
var paper = 2;
var scissors = 3;
var spock = 4;
var lizard = 5;
function Game() {
var ComputerChoice = ((Math.Random() * 5) + 1); // from 1 - 5 it chooses one of the given variables to then compare to the users anwser
var UserChoice = document.getElementById("user").value; // input from the textbox
if (UserChoice == ComputerChoice) { // if both anwsers are the same then a tie is given
document.getElementById("user").innerHTML = "<h2>Its a tie! Your opponent also chose </h2>" + ComputerChoice;
}
if (ComputerChoice == 1) { // Makes the computers choice readable for the user
return "Rock";
}
if (ComputerChoice == 2) {
return "Paper";
}
if (ComputerChoice == 3) {
return "Scissors";
}
if (ComputerChoice == 4) {
return "Spock";
}
if (ComputerChoice == 5) {
return "Lizard";
}
if (ComputerChoice == 1 && UserChoice == 2) { // how the computer decides winner
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 1 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 1 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 1 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 2) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 2) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 5) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 2) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
}
答案 0 :(得分:1)
您需要return false
处理程序onsubmit
来停止提交表单。
事实上,您不应该首先使用<form>
。