Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JavaScript:Tutorial, Your First Game!


  • Please log in to reply
35 replies to this topic

#1 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 05 December 2006 - 01:05 PM

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


  • 0

#2 ahmed_14_1

ahmed_14_1

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 17 November 2007 - 04:27 AM

thanks man for this code
  • 0

#3 $RaMRoM$

$RaMRoM$

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 18 January 2008 - 04:42 AM

wow! javaScript is amazing! thanks a lot!
  • 0

#4 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 12 March 2008 - 10:45 AM

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
  • 0

#5 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 22 March 2008 - 07:37 AM

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

Well they are not empty for me :S
  • 0

#6 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 22 March 2008 - 09:05 AM

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

#7 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 22 March 2008 - 02:03 PM

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

#8 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 22 March 2008 - 02:22 PM

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

#9 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 23 March 2008 - 01:29 AM

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.
  • 0

#10 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 24 March 2008 - 08:10 AM

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?
  • 0

#11 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 25 March 2008 - 04:11 AM

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>

  • 0

#12 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 25 March 2008 - 12:24 PM

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 :)
  • 0




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download