JavaScript:Tutorial, Your First Game!

#1
TcM

Posted 05 December 2006 - 01:05 PM

Writes binary right handed and hex left handed

Members
11,147 posts

Introduction:-
Here I will show you how to make a simple 'Guess The Number' game. It will do fine as your first game!

Solution:-
This goes in the <head>:-


<SCRIPT LANGUAGE="JavaScript">

var num = Math.floor(Math.random() * 101);

function guessnum(){

var guess = document.forms['form1'].num.value;

if (guess == num)

{

alert("Great you Guessed! How did you know that?");

}

if (guess < num)

{

alert("No your number is too low!");

}

if (guess > num)

{

alert("No your number is too  high");

}

}

</SCRIPT>

And this in the <body>


<form name="form1">

Enter a number <input type="text" size=5 maxlength=3

name="num"> <input type="button" onClick="guessnum();"

value="Enter">

</form>

Explanation:-


var num = Math.floor(Math.random() * 101);

This is a Mathematical Function Math.Random() is to choose a random number *101 means up to 100 so the numbers will be from 0 to 100 and Math.floor is so to eliminate any decimal points

A Preview:-
Posted Image

Conclusion:-
As Always Feedback is welcome and the full source is attached!!

Attached Files

Guess The Number.zip 477bytes 643 downloads

#2
ahmed_14_1

Posted 17 November 2007 - 04:27 AM

Newbie

Members
1 posts

thanks man for this code

#3
$RaMRoM$

Posted 18 January 2008 - 04:42 AM

Newbie

Members
6 posts

wow! javaScript is amazing! thanks a lot!

#4
chili5

Posted 12 March 2008 - 10:45 AM

Writes binary right handed and hex left handed

Members
7,247 posts

I don't see anything in the code section. :confused:

I've seen this before its really cool though and very easy to change the range for the random number.

----------------
Now playing: Disturbed - I'm Alive
via FoxyTunes

#5
TcM

Posted 22 March 2008 - 07:37 AM

Writes binary right handed and hex left handed

Members
11,147 posts

What code section? You mean the code tags are empty??

Well they are not empty for me :S

#6
chili5

Posted 22 March 2008 - 09:05 AM

Writes binary right handed and hex left handed

Members
7,247 posts

Last time I was here, the code tags were empty.

#7
TcM

Posted 22 March 2008 - 02:03 PM

Writes binary right handed and hex left handed

Members
11,147 posts

Maybe because you did not have enough posts to view the code in the threads?

#8
chili5

Posted 22 March 2008 - 02:22 PM

Writes binary right handed and hex left handed

Members
7,247 posts

Wait you have to have a certain number of posts to see code?

#9
TcM

Posted 23 March 2008 - 01:29 AM

Writes binary right handed and hex left handed

Members
11,147 posts

Well I don't know... but the code was always there... thats why I asked you... can't understand why you did not see it.

#10
chili5

Posted 24 March 2008 - 08:10 AM

Writes binary right handed and hex left handed

Members
7,247 posts

Well it's working for me now. I was trying to add something to this, to keep the number of guesses. Here's my code, i think i got it working where it shows the number of guesses.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var num = Math.floor(Math.random() * 101);
function guessnum(){
var guess = document.forms['form1'].num.value;
var count = 0;
if (guess == num)
{
alert("Great you Guessed! How did you know that?");
count += 1
document.getElementById('counter').innerHTML = "Congratulations! you guessed the number! 

It took you " + count + " guesses to win.";
}
if (guess < num)
{
alert("No your number is too low!");
count += 1;
document.getElementById('counter').innerHTML = "Number of guesses: " + count;

}
if (guess > num)
{
alert("No your number is too  high");
count += 1;
document.getElementById('counter').innerHTML = "Number of guesses: " + count;

}
}
</SCRIPT>
<title>Guess the Number</title>
</head>
<body>
<form name="form1">
Enter a number <input type="text" size=5 maxlength=3
name="num"> <input type="button" onClick="guessnum();"
value="Enter">
</form>
<div id="counter">

</div>
</body>
</html>

actually the counter doesn't really work, it only gets to 1 guesses and doesn't work, could someone help me fix this help?

#11
TcM

Posted 25 March 2008 - 04:11 AM

Writes binary right handed and hex left handed

Members
11,147 posts

Well I don't know why, but your code does not show any dialog, but it's pretty simple, your value of count is remaining 1 because. you are declaring it as 0 within the function, so whenever you press the button it declares it 0 and then increases it by 1, then again you press the button and it declares it as 0 and increases it by one, so just declare out of the function it's self, below the num variable.

I made this code for you hope it helps:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var num = Math.floor(Math.random() * 101);
var count = 0;
function guessnum()
		{
			var guess = document.forms['form1'].num.value;
			if (guess == num)
				{
					count+=1;
					alert("Great you Guessed! took you" + count);
				}
			if (guess < num)
				{
					count+=1;
					alert("No your number is too low! Count " + count);
				}
			if (guess > num)
				{
					count+=1;
					alert("No your number is too  high Count " + count);
				}
		}
</SCRIPT>
<title>Guess the Number</title>
</head>
<body>
<form name="form1">
Enter a number <input type="text" size=5 maxlength=3 name="num"> <input type="button" onClick="guessnum();" value="Enter">
</form>
<div id="counter">

</div>
</body>
</html>

#12
chili5

Posted 25 March 2008 - 12:24 PM

Writes binary right handed and hex left handed

Members
7,247 posts

Thanks :D that seems to be rather silly, but now that you point out my error it makes sense, I'm not sure why it's not displaying dialog it worked for me this morning.

And I got it to show on the page how many guesses the user took.

Thanks again :)