Question

我对javascript很新，并尝试创建一个Rock，Paper，Scissors游戏。只是为了练习需要。我似乎无法弄清楚如何保持得分。我得到它所以它会根据谁获胜来增加分数，但它立即重置。我怎样才能得分保存并继续添加？如果有什么东西搞乱或难以阅读，我道歉。

var computerChoice = Math.random();
var computerChoice = Math.round(computerChoice * 10);

function computer() 
{
	if(computerChoice <= 2)
	{
		computerChoice = "rock";
	}
	else if(computerChoice < 5)
	{
		computerChoice = "scissors";
	}
	else 
	{
		computerChoice = "paper";
	}
}
				

function TestFunc()
{
	computer();
	
	// Get User input
	var userChoice = document.getElementsByName('rpsOpt');
	if (userChoice[0].checked == true) 
	{
		userChoice = "rock";
	}
	else if (userChoice[1].checked == true) 
	{
		userChoice = "paper";
	}
	else if (userChoice[2].checked == true) 
	{
		userChoice = "scissors";
	}
	else 
	{ 
		alert("select rock, paper or scissors");
	}
	
	// Compare Choices
	
	//Tie
	if (userChoice == computerChoice)
	{
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("Tie!")
	}
	
	//User Rock
	else if(userChoice == "rock" && computerChoice == "scissors")
	{ 
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("You win! Rock Beats Scissors!");
		var user = document.getElementById("userScore");
		user.value++;
	}
	else if (userChoice == "rock" && computerChoice == "paper")
	{
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("You Lose Paper Beats Rock.");
		var comp = document.getElementById("computerScore");
		comp.value++;
	}
	
	//User Paper
		else if(userChoice == "paper" && computerChoice == "rock")
	{ 
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("You win! Paper Beats Rock!");
		var user = document.getElementById("userScore");
		user.value++;
	}
	else if (userChoice == "paper" && computerChoice == "scissors")
	{
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("You Lose Scissors Beats Paper.");
		var comp = document.getElementById("computerScore");
		comp.value++;		
	}
	
	//User Scissors
		else if(userChoice == "scissors" && computerChoice == "paper")
	{ 
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("You win! Scissors Beats Paper!");
		var user = document.getElementById("userScore");
		user.value++;		
	}
	else if (userChoice == "scissors" && computerChoice == "rock")
	{
		alert( "Your Choice: " + userChoice + "    " + "Vs."+ "    "  + "Computer Choice: " + computerChoice );
		alert("You Lose Rock Beats Scissors.");
		var comp = document.getElementById("computerScore");
		comp.value++;
	}
	

	
}

body
{
	background: #330000;
	color: #ff0000;
}
		
.rpsBox
{
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #333333;
	z-index: 100;
	margin-top: -200px;
	height: 400px;
	width: 600px;
	margin-left: -300px;
}

#rockBut
{
	background-color: transparent;
	border: none;
	background-image: rock.png;
}

label > input
	{
	visibility: hidden;
	position: absolute; 
	}
	
label > input + img
	{
	border:2px solid transparent;
	}
	
label > input:checked + img
	{ 
	border:2px inset #000;
	}                     

label > input:hover + img
	{ 
	border:2px inset #000;
	}                     

.score
{
	background: transparent;
	border: none;

}	
	
.button
{
	background-color: transparent;
	border: outset;
	
}

.button:hover
{
	background-color: transparent;
	border: inset;
	
}

.scoreCntr
{
	font-size: 2.4em;
	background-color: transparent;
	text-align: center;
	border-width: 0;
	width: 100%;
	margin: 0 0 .1em 0;
	color: #fff;
}

form 
{
	width: 700px;
	border:5px inset red;
	background: #fff;
	color: red;
	text-align: center;
	margin: auto;

}

#score
{
	width: 700px;
	border:5px inset red;
	background: #aaa;
	color: red;
	text-align: center;
	margin: auto;
}

<!DOCTYPE html>
<html>
<head>

	<script src="rps.js">  </script>
	<link rel="stylesheet" type="text/css" href="rpsStyle.css"> 

</head>


<body>

<h1> Rock, Paper, Scissors! </h1>
<div id="rbpsBox">
<form onsubmit="TestFunc()">
			<h3> Select One: </h3>
			
			<label for="rockbut">
				<input type="radio" value="rock" name="rpsOpt" id="rockbut" class="radioButton" />
				<img src="rock.png" width=150px height=150px >
			</label>

			<label for="paperbut"> 
				<input type="radio" value="paper" name="rpsOpt" id="paperbut" class="radioButton" />
				<img src="paper.jpg" width=150px height=150px >
			</label>

			<label for="scissorsbut"> 
				<input type="radio" value="scissors" name="rpsOpt" id="scissorsbut" class="radioButton" /> 
				<img src="scissors.png" width=150px height=150px > 
			</label>
				
			<br>
			<br>
			<input type="submit" value="GO!" class="button" > 
			<br>
			<br>
</form>
</div>

<div id="score">  

	Computer: <input type="text" class="score" id="computerScore" value=0> 
	You:  <input type="text" class="score" id="userScore" value=0>
	
</div>

</body>

</html>

有变量Javascript范围的问题

0 个答案: