Number guesser

**Hot_Milo23** · 10-14-2009, 06:22 AM

So, after writing my first tutorial, I was quite happy with how it turned out, so im trying my hand at another one. I wrote this in class today for a friend, and cleaned it up a little when i got home. so here it is, the number guesser. The user thinks of a number between 1 and 100 and the computer guesses the number in 7 or less guesses (sounds impressive?

). So heres the code, HTML and all.

Code:

<html>
<head>
<title>Number Guesser</title>
script>
var max=101            //So heres our variables. Max, min, (both used for calculating next guess 
var min=0              //the computers guess and amount of guesses the user has taken
var cGuess=50;         //
var Guesses=1;

So, we have our html tags and our first variables, I'm hoping they are pretty self explanatory, max and min are the maximum and minimum values the computer can see the users number as being (well, not quite the min would actually be one more than whatever the min variable says, and the max is one less than the max variable, but this helps when finding the number in between the two). cGuess is the computers guess of what the users number is, default 50 (halfway between 1 and 100). and guesses just keeps track of how many guesses the computer takes (should never go over 7, hopefully... ...)

Code:

function Guess(n){		//okay, so we call this function when the user presses one of our 
  if(n==1){		//buttons if n==1 the user presses "Higher" in which case we make  
   min=cGuess		//theminimum value what the computer guess was
  }
  else{			//n!=1 (n==2) then the user pressed "Lower", thus a similar idea
   max=cGuess
  }
  Guesses=Guesses+1	//user made a guess, increase guesses
  cGuess=Math.floor((max+min)/2) //guess=the average of the max and min (this is why we use 101
  Guesser.value=cGuess		//not 100 as max, makes this start with better numbers
  guesses.value=Guesses		//enter the values into the inputs
}

The first function. Guess is called when a user presses either the "Higher" or "Lower" buttons (n==1 when they press higher and 2 when they press lower). We increase guesses by one and work out our new guess based on whether our guess was too high or too low. math.floor() is a function that returns the the highest integer less than or equal to the number that is enter. max+min/2 gives the number in between the maximum answer and the minimum and maximum answer.

Code:

function Start(){		//called when the page loads and when the user wants to start 
  max=101			//again. Refreshes variables, and inputs and is ready for
  min=0				//user to start guessing again.
  cGuess=50;
  Guesses=1;
  Guesser.value=cGuess
  guesses.value=Guesses
}

This is the second and last function. (called "start" ironically

) it is called when the page loads and when the user wants to try again. It refreshes variables and displays the new values in input boxes. Simple as that. Now for the HTML

Code:

</script>
</head>

<body bgcolor=black onload=Start()>
<center><h1><font color=red>Number Guesser
<table border=5 bordercolor=gold>
 <tr>
  <td colspan=2>
   <center>
   <font color=red size=4>
    Think of a number between 0 and 100. <br>Now the computer is going to guess it in 7 or less     guesses.
  </td>
 </tr>
 <tr>
  <td width=50%>
  <center>
   <font color=red size=4>
    No. Guesses:
  </td>
  <td>
   <center>
    <input value=1 id=guesses size=5>		<!--guesses the user has taken-->
  </td>
 </tr>
 <tr>
  <td>
   <center>
    <font color=red size=4>
     Computer Guess:
  </td>
  <td>
   <center>
    <input value=50 id=Guesser size=5>		<!--the computers guess-->
  </td>
 </tr>
 <tr>
  <td>
   <center>
    <input type=button value=Higher onclick=Guess(1)>		<!--//"Higher" button-->
  </td>
  <td>
   <center>
    <input type=button value=Lower onclick=Guess(2)>		<!--"Lower" button-->
  </td>
 </tr>
 <tr>
  <td colspan=2>
   <center>
    <input type=button value="Start Again" onclick=Start()>	<!--"start again" button-->
  </td>
 </tr>
</table>
</body>
</html>

.
So, this just draws up our table with input boxes for computers guess, number of guesses, buttons for "higher", "lower" and "start again" and just some brief instructions for the user.

Well, hopefully i didnt skip over too much, im not sure what level of user this is supposed to be aimed at. if anyone needs anything explained further, i'd me more than happy to help.

Till next time, cyah!

(Oh, heres the full code):

Code:

<html>
<head>
<title>Number Guesser</title>
<!--OK, so heres a nice little spin-off of the old "guess the number game". In this one, the user thinks of a number and the computer guesses it. This is a very simple program that makes use of only a couple of javascript commands. Functions, variables, math.floor(), and an algorithm for finding the users guess quickly. Coded by Luke Batchelor-->
<script>
var max=101            //So heres our variables. Max, min, (both used for calculating next guess 
var min=0              //the computers guess and amount of guesses the user has taken
var cGuess=50;         //
var Guesses=1;

function Guess(n){		//okay, so we call this function when the user presses one of our 
  if(n==1){		//buttons if n==1 the user presses "Higher" in which case we make  
   min=cGuess		//theminimum value what the computer guess was
  }
  else{			//n!=1 (n==2) then the user pressed "Lower", thus a similar idea
   max=cGuess
  }
  Guesses=Guesses+1	//user made a guess, increase guesses
  cGuess=Math.floor((max+min)/2) //guess=the average of the max and min (this is why we use 101
  Guesser.value=cGuess		//not 100 as max, makes this start with better numbers
  guesses.value=Guesses		//enter the values into the inputs
}

function Start(){		//called when the page loads and when the user wants to start 
  max=101			//again. Refreshes variables, and inputs and is ready for
  min=0				//user to start guessing again.
  cGuess=50;
  Guesses=1;
  Guesser.value=cGuess
  guesses.value=Guesses
}
</script>
</head>

<body bgcolor=black onload=Start()>
<center><h1><font color=red>Number Guesser
<table border=5 bordercolor=gold>
 <tr>
  <td colspan=2>
   <center>
   <font color=red size=4>
    Think of a number between 0 and 100. <br>Now the computer is going to guess it in 7 or less     guesses.
  </td>
 </tr>
 <tr>
  <td width=50%>
  <center>
   <font color=red size=4>
    No. Guesses:
  </td>
  <td>
   <center>
    <input value=1 id=guesses size=5>		<!--guesses the user has taken-->
  </td>
 </tr>
 <tr>
  <td>
   <center>
    <font color=red size=4>
     Computer Guess:
  </td>
  <td>
   <center>
    <input value=50 id=Guesser size=5>		<!--the computers guess-->
  </td>
 </tr>
 <tr>
  <td>
   <center>
    <input type=button value=Higher onclick=Guess(1)>		<!--//"Higher" button-->
  </td>
  <td>
   <center>
    <input type=button value=Lower onclick=Guess(2)>		<!--"Lower" button-->
  </td>
 </tr>
 <tr>
  <td colspan=2>
   <center>
    <input type=button value="Start Again" onclick=Start()>	<!--"start again" button-->
  </td>
 </tr>
</table>
</body>
</html>

Jordan · 10-14-2009, 06:34 AM

Not bad! I noticed that some of your lines have ending syntax and some do not:

Code:

var max=101            //So heres our variables. Max, min, (both used for calculating next guess 
var min=0              //the computers guess and amount of guesses the user has taken
var cGuess=50;         //
var Guesses=1;

You should choose to add the ; or not and be consistent.

I prefer to have them on all of my JS code.

+rep!

**Hot_Milo23** · 10-14-2009, 06:37 AM

haha, yes, soz. A bit of a rushed effort. I haven't written JS in over a year till this morning. haha.

**WingedPanther** · 10-14-2009, 07:23 AM

Nice little demo. Any reason you didn't do this as a tutorial? +rep anyway

**debtboy** · 10-14-2009, 01:43 PM

Good Tutorial +rep

**chili5** · 10-16-2009, 02:34 AM

Very cool. You know what you are doing here is utilizing the idea of a binary search algorithm.

I was reading in a data structures book the theory of this. I don't really remember the math of it but when the range is 1-100 the computer will always guess the number in no more than 7 guesses.

**WingedPanther** · 10-16-2009, 03:06 AM

logarithms

**Hajjel** · 10-26-2009, 01:44 AM

Nice, tnx! I've been looking for a script like this for a long time now.

Thread: Number guesser

LinkBack

Thread Tools

Search Thread

Display

Number guesser

Re: Number guesser

Re: Number guesser

Re: Number guesser

Re: Number guesser

Re: Number guesser

Re: Number guesser

Re: Number guesser

Thread Information

Users Browsing this Thread

Similar Threads

Number with zero

Very big number?

number counter...

PHP: only number

NaN - Not a Number

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions