Need Help with Variable Assignments in Rock, Paper, Scissor game

DogfoodEnforcer

New to the CF scene

Join Date: Apr 2009
Posts: 1

Need Help with Variable Assignments in Rock, Paper, Scissor game

Apr 3, 2009, 08:48 PM

I am having a very hard time with this game. i can get the userChoice image to display, and the computerChoice image to display, but i cannot get the checkWinLoseTie() function to work. but i am unsure WHY it isnt working. are my arguments wrong (i know there is something wrong, but cannot get it right!), are the variables even getting assigned a value?

i keep getting the message "you lost" which means that the rest of the stuff is not running!

please help me, this is driving me nuts! i've been working on this for the last 2-3 weeks and have been stuck on this part for 10 days trying to work it out.

here is my code:

Code:

<html>
<head>
<script>
	var computerChoice;
	var userChoice;

	function computerChoose()
	{
		
		computerChoice = Math.floor(Math.random()*3)+1;
			if (computerChoice == 1)
			{
				document.computerImage.src = "rock.jpg";
			}
			else if (computerChoice == 2)
			{
				document.computerImage.src = "paper.jpg";
			}
			else
			{
				document.computerImage.src = "scissors.jpg";
			}
	}
	
	function userChoose(userChoice)
	{
		if (userChoice == 1)
		{
			document.userImage.src = "rock.jpg";
		}
		if (userChoice == 2)
		{
			document.userImage.src = "paper.jpg";
		}
		if (userChoice == 3)
		{
			document.userImage.src = "scissors.jpg";
		}
	}

	function checkWinLoseTie()
	{

		if (userChoice == computerChoice)
		{
			document.gameForm.userDraws.value = parseInt(document.gameForm.userDraws.value) + 1;
			alert("That's a Tie!");

		}
		if ((userChoice == 2 && computerChoice == 1)||(userChoice == 3 && computerChoice == 2)||(userChoice == 1 && computerChoice == 3))
		{
			document.gameForm.userWins.value = parseInt(document.gameForm.userWins.value) + 1;
			alert("You Won!");
		}
		else
		{
			document.gameForm.userLosses.value = parseInt(document.gameForm.userLosses.value) + 1;
			alert("Sorry, You Lost!");	
		}

	}
		
	function playGame()
	{
		computerChoose();
		checkWinLoseTie();
	}
		

</script>
</head>
<body>
	<img name="userImage" src="" width 70 height=70><img name="computerImage" src="" width=70 height=70><br>
<form name="gameForm">
	You Choose:<input type=button value="Rock" onClick='
	var userChoice = 1;
	document.userImage.src = "rock.jpg";
	'>
	<input type=button value="Paper" onClick='
	var userChoice = 2;
	document.userImage.src = "paper.jpg";
	'>
	<input type=button value="Scissors" onclick='
	var userChoice = 3;
	document.userImage.src = "scissors.jpg";
	'><br>
	<input type = button value = "Play!" onclick = "playGame()"><br>

	Wins:<input type = text name = "userWins" value = "0"><br>
	Losses:<input type = text name = "userLosses" value = "0"><br>
	Draws:<input type = text name = "userDraws" value = "0">
</form>		
</body>
</html>

this is my other code (ive been trying to get either or to work! cant figure out which one woudl be best)

Code:

<html>
<head>
<script>
	var computerChoice;
	var userChoice;

	function computerChoose()
	{
		
		computerChoice = Math.floor(Math.random()*3)+1;
			if (computerChoice == 1)
			{
				document.computerImage.src = "rock.jpg";
			}
			else if (computerChoice == 2)
			{
				document.computerImage.src = "paper.jpg";
			}
			else
			{
				document.computerImage.src = "scissors.jpg";
			}
	}
	
	function userChoose(userChoice)
	{
		if (userChoice == 1)
		{
			document.userImage.src = "rock.jpg";
		}
		if (userChoice == 2)
		{
			document.userImage.src = "paper.jpg";
		}
		if (userChoice == 3)
		{
			document.userImage.src = "scissors.jpg";
		}
	}

	function checkWinLoseTie()
	{
		var userChoice;
		var computerChoice;

		if (userChoice == computerChoice)
		{
			draw();
		}
		if ((userChoice == 2 && computerChoice == 1)||(userChoice == 3 && computerChoice == 2)||(userChoice == 1 && computerChoice == 3))
		{
			win();
		}
		else
		{
			loss();
		}

	}
	
	function draw()
	{
		document.gameForm.userDraws.value = parseInt(document.gameForm.userDraws.value) + 1;
		alert("That's a Tie!");
	}
	function win()
	{
		document.gameForm.userWins.value = parseInt(document.gameForm.userWins.value) + 1;
		//alert("You Won!");
	}
	function loss()
	{
		document.gameForm.userLosses.value = parseInt(document.gameForm.userLosses.value) + 1;
		alert("Sorry, You Lost!");
	}
		
	function playGame()
	{
		computerChoose();
		checkWinLoseTie();
	}
		

</script>
</head>
<body>
	<img name="userImage" src="" width 70 height=70><img name="computerImage" src="" width=70 height=70><br>
<form name="gameForm">
	You Choose:<input type=button value="Rock" onClick='
	var userChoice = 1;
	document.userImage.src = "rock.jpg";
	'>
	<input type=button value="Paper" onClick='
	var userChoice = 2;
	document.userImage.src = "paper.jpg";
	'>
	<input type=button value="Scissors" onclick='
	var userChoice = 3;
	document.userImage.src = "scissors.jpg";
	'><br>
	<input type = button value = "Play!" onclick = "playGame()"><br>

	Wins:<input type = text name = "userWins" value = "0"><br>
	Losses:<input type = text name = "userLosses" value = "0"><br>
	Draws:<input type = text name = "userDraws" value = "0">
</form>		
</body>
</html>

Tags: None

Old Pedant

New to the CF scene

Join Date: Feb 2009

Posts: 29732
- Share
- Tweet
#2

Apr 3, 2009, 09:52 PM

Your fundamental problem is a simple one:

Code:

<input type=button value="Paper" onClick=' [B][COLOR="Red"]var[/COLOR][/B] userChoice = 2; document.userImage.src = "paper.jpg"; '>

GET RID of the keyword var in there!!!

When you put the var there, you are declaraing a *LOCAL* variable that lasts ONLY as long as the onClick runs!!! So the one you declared at the head of your code is *IGNORED*! It's called "variable scope."

So zap those three var usages.

HOWEVER...

Why did you code the function userChoose??? You never call it.

If you make a minor change to it, you could call it from your buttons and simplify the heck out of the buttons:

Code:

function userChoose([B][COLOR="Red"]uc[/COLOR][/B]) { [B][COLOR="Red"]userChoice = uc;[/COLOR][/B] if (userChoice == 1) { document.userImage.src = "rock.jpg"; } if (userChoice == 2) { document.userImage.src = "paper.jpg"; } if (userChoice == 3) { document.userImage.src = "scissors.jpg"; } }

And then your buttons become simply:

Code:

<input type=button value="Rock" onClick="userChoose(1);"> <input type=button value="Paper" onClick="userChoose(2);"> <input type=button value="Scissors" onClick="userChoose(3);">

Now, this code is still only B or B- quality. You need to learn how to use an array to simplify the heck out of both userChoose( ) and computerChoose( )

Since I assume this is homework, I'll leave that exercise to you.

Oh...and for an A+ grade, figure out how to do the test for win with only *TWO* comparisons, not 3.

(And if it's not really homework, I apologize. If you make the changes I show, it's quite adequate for web usage. It doesn't need the A+ grade. <grin/>)

Be yourself. No one else is as qualified.
Comment

Previous template Next

Announcement

Need Help with Variable Assignments in Rock, Paper, Scissor game

Need Help with Variable Assignments in Rock, Paper, Scissor game

Comment