Guess Number : Game : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Game »

 

Guess Number



<!----------------------------------------------------------------
|                                                                 |
|  Fair License                                                   |
|                                                                 |
|  JS Games :: HI-LO                                              |
|  Copyright (C2002-2004 Arun Narayanan                         |
|                                                                 |
|  For latest release information and downloads visit:            |
|  http://jsgames.sourceforge.net/                                |
|                                                                 |
|  Usage of the works is permitted provided that this             |
|  instrument is retained with the works, so that any entity      |
|  that uses the works is notified of this instrument.            |
|                                                                 |
|  DISCLAIMER: THE WORKS ARE WITHOUT WARRANTY.                    |
|                                                                 |
|  [2004, Fair License: rhid.com/fair]                            |
|                                                                 |
----------------------------------------------------------------->

<html>
<head>
<title>!!! JS Games :: HI-LO !!!</title>
<style>
body,h1,h2,h3,.msg,td {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2,.h2 {font-size:22pt; margin:0px; font-weight:bold; padding:0px;}
h3 {font-size:8pt; margin:0px; font-weight:bold;}
.msg {font-size:8pt; font-weight:bold;}
.tab {cursor:hand;}
.board {font-size:9pt; font-weight:bold;}
.status {font-size:9pt; font-weight:bold; color:#99ff99;}
.progress {font-size:8pt; font-weight:bold;}
.success {font-size:14pt; font-weight:bold; color:#33ccff;}
.but {font-size:8pt; font-weight:bold; height:24px; background-color:#606060; background-image:url(images/butbase.gif);
      border:0px solid #cccccc; border-left:none; border-right:none; color:white;}
.bnote {font-size:8pt; font-weight:normal;color:white;}
a.notelnk,a.notelnk:visited,a.notelnk:active {font-size:8pt; font-weight:normal; color:#66ffcc;}
.bnotehead {font-size:10pt; font-weight:bold;color:#66ffcc;}
.email {font-size:8pt; font-weight:bold; color:white;}
.fra {border:2px solid #999999; background-color:#606060;}
.clsThisGame, .clsBar {font-size:8pt; font-weight:bold; color:#cccccc;}
.clsBar {margin:0px; font-size:8pt; font-weight:bold; color:#ffffff;}
.clsOtherGame {margin:0px; font-size:8pt; font-weight:bold; color:#ffffff; text-decoration:none;}
.help {font-size:8pt; margin:0px; font-weight:bold;}
.menubar {padding:0px; margin:0px; brder-top:1px solid white; brder-bottom:1px solid white; background-color:#606060;
          background-image:url(images/menu.gif);}
</style>
<script language=javascript src="games.js"></script>
<script>
var gtarget, ghi, gtries, gtime, gintervalid;

function toggleHelp()
{
  if (butHelp.value == "Hide Help")
  {
    help.style.display = "none";
    butHelp.value = "Show Help";
  }
  else
  {
    help.style.display = "";
    butHelp.value = "Hide Help";
  }  
}

//random number between low and hi
function rand(low,hi)
{
  return Math.floor((hi-low)*Math.random()+low)
}

//random number between 1 and hi
function r1(hi)
{
  return Math.floor((hi-1)*Math.random()+1)
}

function showMessage(msgstr,classname)
{
  if (classname != null)
    fldStatus.innerHTML = "<span class=" + classname + ">" + msgstr + "</span>";
  else
    fldStatus.innerHTML = msgstr;
}

function stopGame()
{
  fldGuess.value = "";
  showMessage('Choose a Level and press the "Start Game" button');
  fldProgress.innerHTML = "";
  clearInterval(gintervalid);
  gintervalid=-1;
  fldHi.focus();
}

function startGame()
{
  gtries = 0;
  gtime = 0;
  ghi = parseInt(fldHi.value);
  gtarget = rand(0,ghi);    
  showMessage("Ok! I have guessed a number between 0 and " + ghi + "<br>Now make your guess!");
  clearInterval(gintervalid);
  gintervalid = setInterval("tick()",1000);  
  tick();
  fldGuess.focus();
}

function tick()
{
  gtime++;
  fldProgress.innerHTML = "Tries:&nbsp;" + gtries + "&nbsp;&nbsp;&nbsp;&nbsp;Time:&nbsp;" + gtime + "&nbsp;secs"
}

function checkGuess()
{
  if (gintervalid == -1)
  {
    alert("Please press the "Start Game" button to start a new game.");
    fldHi.focus();
    return;
  }
  
  if (fldGuess.value == "")
  {
    alert("Please enter your guess in the box.");
    fldGuess.focus();
    return;
  }
  
  //check if the number entered is proper
  var n = parseInt(fldGuess.value);
  
  if (isNaN(n))
  {
    alert("Please enter a valid number in the box.");
    fldGuess.focus();
    return;
  }
  
  //check range
  if (n < || n > ghi)
  {
    alert("Please enter a number between 0 and " + ghi + ".");
    fldGuess.focus();
    return;
  }
  
  fldGuess.value = n; //required in case user enters alphabets after the digits

  gtries++;  
  
  if (n < gtarget)
  {
    showMessage("Your guess is lower than the number I thought of!<br>Choose a BIGGER number.");
    fldGuess.select();
    return;
  }
  if (n > gtarget)
  {
    showMessage("Your guess is higher than the number I thought of!<br>Choose a SMALLER number.");
    fldGuess.select();
    return;
  }
  if (n == gtarget)
  {
    stopGame();
    showMessage("CONGRATS!!<br>You have done it in " + gtries + " tries and " + gtime + " secs!","success");
    return;
  }
}
</script>
</head>

<body bgcolor="black" text="white" onload="toggleHelp();stopGame()" background="images/bkg.gif">
<center>
<h1>JS Games!</h1>
<span class=msg>Copyright &copy; 2002-2004 Arun Narayanan</span><br>

<br>&nbsp;
<table width="450" class=fra cellpadding=cellspacing=border=0><tr><td>

<table width=100% cellpadding=cellspacing=0>
<tr><td class=bnote valign=top>This game is written entirely using JavaScript. It requires Internet Explorer Version or above
for proper functioning.
</td>
</tr></table>

</td></tr></table>
<br>

<table width=620 height=47 border=cellpadding=cellspacing=0>
<tr><td colspan=height=16></td></tr>
<tr>
<td width=8>&nbsp;</td><td class=h2 align=center width=98%>HI-LO</td>
<td align=right valign=bottom><input type=button id=butHelp value="Hide Help" class="but" onclick="toggleHelp()"></td>
<td width=8>&nbsp;</td>
</tr>
</table>

<table id=help width=620 border=cellpadding=cellspacing=0>
<tr><td height="10"></td></tr>
<tr><td class=help>
<ol>
<li>Choose a level. Press the "Start Game" button. The computer will think of a number.</li>
<li>Make a guess by typing in a number in the box provided.</li>
<li>Press the "Check Out" button. Repeat steps and until you guess the number.</li>
<li>Tip: You can use the RETURN key instead of the buttons. Try it.</li>
</ol>
</td></tr>
</table>

<table width=620 border=cellpadding=cellspacing=0>
<tr><td height=29><td valign=middle align=center>
<h3>Guess the number in minimum number of tries...</h3>
</td></tr>
</table>

<p>
<table class=board>
<tr>
<td align=right width="49%">Choose Level: </td>
<td align=center>
<select class=board id=fldHi onkeypress="if (event.keyCode==13) startGame();">
<script>
var sel;
for (var i=10;i<=1000000;i*=10)
{
  if (i==1000sel=" selected "else sel=" ";
  document.writeln("<option" + sel + "value='" + i + "'>" + i + "</option>");
}
</script>
</select>
</td>
<td width="49%">
<input class=but  type=button value="Start Game" id=butStart onclick="startGame();">
</td>
</tr>
<tr>
<td colspan=align=center><br><div id=fldStatus class=status></div><br></td>
</tr>
<tr>
<td colspan=align=center><div id=fldProgress class=progress></div></td>
<tr>
<td align=right width="49%">Your Guess: </td>
<td align=center>
<input class=board type=text size="10" id=fldGuess onkeypress="if (event.keyCode==13) checkGuess();">
</td>
<td>
<input class=but  width="49%" type=button value="Check Out!" onclick="checkGuess();">
</td>
</tr>
</table>
</center>

<br>
</body>
</html>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Game