Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
<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... ...)
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.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 :P) 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</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! :D
(Oh, heres the full 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>
Back to top
