Javascript Random Number Guessing Game Project

Started by Nerdfightur, November 08, 2011, 01:22:07 AM

Previous topic - Next topic

Nerdfightur

 Hi, i was absent when we learned functions and my programming teacher just assigned us this project.
So if any one wanted to go and attempt this and email me the code id be really happy.
Or email me with some advice.
my email is luvsdapoon@yahoo.com

M256 Computer Programming
I'm thinking of a number ...
Using HTML and JavaScript, write a program that will generate a random integer between 1 and 100 then have the user guess the number. Give clues to help the user guess.
Specific Requirements:
1. On the web page, include the following:
a. Clear instructions for the user on how to play the game.
b. A button for the user to click to start the game.
c. A button for the user to click to check his guess for the current round.
d. A button for the user to start the game over (use a confirm box). Be sure to reset all values (including totals).
e. A textbox to display the number of guesses in the current round.
f. A textbox to display the number of rounds played.
g. A textbox to display the number of rounds won.
h. A textbox to display the average number of tries it takes the user to guess the number correctly.
2. Do all processing in functions.
3. Generate a random integer between 1 and 100 for the user to guess.
4. If the user guesses the correct number, display an appropriate 'congratulations' message and update all totals accordingly.
5. If the user guesses incorrectly, display an appropriate message to tell the user to guess higher or lower the next time, then update all totals accordingly.
6. Only allow 6 guesses (if the user is wrong on the 6th guess, he 'loses' the game).
7. When the user 'wins', automatically generate a new number to play again (be sure to clear the 'number of guesses' textbox and any necessary variables). Let the user know a new round has been started.
8. For each round, keep track of the number of times the user guesses and display this in the appropriate textbox.
9. Throughout the game, keep track of and display an average number of tries it takes the person to guess correctly.
10. Display the number of rounds the player has won in the appropriate textbox.
11. Include appropriate comments in your source code.
Possible enhancements:
-Don't let the user guess the same number twice (alert them that they've already guessed that
number)
-Custom buttons
-Use innerHTML instead of textboxes to display the results for the game

Jubal

Good to see you here!  :)

Okay...

It makes a lot more sense for me to advise you than code it for you, since a) I'm hella short on time and b) then you'll know how for next time.

If you've never done functions before, the code is as follows.

function function_name () {}

Inputs into the function are in the round brackets, those create a kind of local variable for use within the function, which you have to put in when you call the function. The curly brackets are what the function does. The function keyword declares that this is a new function.

So for a button to call a function, have the button with onclick="function_name();" as a property. If you have any input variables, they need to go in the round brackets, for example if you're inputting a number it should be function_name(3); or whatever. However, in your case I think you probably want to get your numerical input from a text box, and you can "grab" that via the Document Object Model (you give the textbox a name="boxname" attribute, then
inputnum = encodeURIComponent(document.getElementById("boxname").value);
Will make a variable with your value in it. It's not all that neat, but it works. Another handy tip is that when you're grabbing numbers, multiply them by one before doing anything else; this checks/forces Javascript to see it as a number variable, since there's not actually any differentiation when creating the variables.

I'm assuming you know the HTML side of this, but correct me if I'm wrong. THhe above should let you get started; your start button needs to generate a random number and store it in a global variable (in other words, you need to create the storage variable outside your function). Then make a textbox, give it a name, make a second button that grabs your value from the textbox, tests if it's equal to the first stored value, then if it is adds to a "wins" variable and possibly also makes a little popup box to tell them that. Once you've got that sorted

Other useful functions:
Math.random() creates a random number between 0 and 1
+ - * / for add, take, times, divide
Math.round(a number) rounds it up to the nearest whole
Math.floor(a number) rounds it down to the nearest whole

You can nest functions, so Math.round(Math.random) will always give a value of 1. Math.round(Math.random()*10) will give a random number from 1 to 10, and so on.

Hope that helps as a starting point.  :)
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

Nerdfightur

This is all the Code i have so far. But im confused on how to do these
e. A textbox to display the number of guesses in the current round.
f. A textbox to display the number of rounds played.
g. A textbox to display the number of rounds won.
h. A textbox to display the average number of tries it takes the user to guess the number correctly.

I'll keep working on it but id be glad if any of you have any tips/suggestions.



<html>
<head>
<title> Project 3 </title>
<script type="text/Javascript">
<!-- created by Alejandro Suero -->
   var numRand = 0
   
   function startGame()
      {numRand=Math.floor(Math.random()*101)
         alert("Im thinking of a number between 1-100")
      }
   function checkGuess(frmGuess)
      { if(frmGuess.txtGuess.value == numRand){
         alert("Winner");
         }
      else if(frmGuess.txtGuess.value < numRand) {
         alert("Too Low")
      }
      else if(frmGuess.txtGuess.value > numRand) {
         alert("Too High")
      }
      }
      
</script>
</head>


<body>
<form name=frmGuess>
<center><input type=button value="start game" onClick="startGame()"></center>
<input type="text" name=txtGuess > Enter Guess

<input type=button value="Guess" onClick="checkGuess(frmGuess)">

</form>
</body>
</html>


Cuddly Khan

#3
Work harder. ;D Sorry but your better than me at this. I know 0.1% about what your talking about and what I do know is that JavaScript has absolutely nothing to do with Java... thats it.
Quote from: comrade_general on January 25, 2014, 01:22:10 AMMost effective elected official. Ever. (not counting Jubal)

He is Jubal the modder, Jubal the wayfarer, Jubal the admin. And he has come to me now, at the turning of the tide.

lordryan756

I am doing this off the top of my head right now. Too lazy to open my Notepad++ :P. Also, I haven't done JS in a while. May mess something up :P
Spoiler

<html>
<!--Created by Ryan Ballou 1/27/2012-->
<head>
<h1><center>Welcome to my Number Guesser!</center></h1>
</head>
<body bgcolor = "Grey">
<script type="text/javascript">
var RandomNumber = 0
function Random(){
RandomNumber = Math.floor(Math.random()*101)<!--Rounds down 1-100-->
alert("Guess my number!")
}

function Check(){
if(Fields.Guess.value < RandomNumber){
alert("Too Low!")
}else if(Fields.Guess.value > RandomNumber){
alert("Too High!")
}else if(Fields.Guess.value == RandomNumber){
alert("You Won!")
}
}

</script>
<form name=Fields>
<center>
<input type=button value="Go Again!" onClick="Random()">

<input type="text" name=Guess>Enter your Guess!

<input type=button value="Confirm Guess" onClick="Check()">
</center>
</form>
</body>
</html>

Should work without a problem :P