title: Javascript small game
body: <p>Right now I am learning some Javascript but got many problems right now since my skills are low. I need some help with several problems in this code.</p>
  
  <p>I am trying to write a game called "hit the fish". It has a timer, score and onclick.
  Onlclick the fish should disappear and 1 point will be added in the score. There is a timer limit of 60 seconds.</p>
  
  <p>Here is the whole code.</p>
  
  <pre><code>&lt;html&gt;  
  &lt;head&gt;  
      &lt;title&gt;  
          Hit the fish!
      &lt;/title&gt;  
      &lt;style&gt;
          table{
              margin-left: auto;
              margin-right: auto;
              width: 70%;
              height: 90%;
              background-color:#66ff00;
          }
          #playground input{
              position: inherit;
              height: 100px;
              width: 100px;
              margin-left: 20px;
              margin-right: 20px;
              margin-bottom: 20px;
          }
          #input {
              height:40px;
          }
          #area {
              background-color:#888;
              position:absolute;
              left:0px;
              right:0px;
              top:50px;
              bottom:0px;
          }
          #area button {
              width:150px;
              height:30px;
              position:absolute;
          }
          .red {
              color:red;
          }
  
      &lt;/style&gt;
  
      &lt;script language="Javascript"&gt;
          function one () {
              document.play.one.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function two () {
              document.play.two.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function three () {
              document.play.three.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function four () {
              document.play.four.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function five () {
              document.play.five.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
  
          }
  
          function six () {
              document.play.six.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function seven () {
              document.play.seven.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function eight () {
              document.play.eight.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
          function nine () {
              document.play.nine.value="";
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
  
  
          function count()
          {         
              stop();
              // get the counter element
              var counter = document.getElementById("counter");
              // get it's value
              var value = parseInt(counter.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              counter.innerHTML=value;
              // limitation
              if(value===60){
                  alert("Time Out!");
                  clearInterval(countTimer);
                  document.getElementById("counter").innerHTML="0";
                  document.getElementById("score").innerHTML="0";
              }
          }
  
          function start () {
              stop();
              var countTimer = setInterval("count()",1000);
              document.play.four.value="&gt;(  °3°)";
              document.play.three.value="&gt;(  °3°)"; 
              setTimeout("nextone ()");
              var score = document.getElementById("score");
          }
          function score(){
              // get the counter element
              var score = document.getElementById("score");
              // get it's value
              var value = parseInt(score.innerHTML);
              // increase it
              value = value + 1;
              // write the new value back
              score.innerHTML=value;
          }
          function nextone () {
              document.play.four.value="";
              document.play.five.value="&gt;(  °3°)"; 
  
              setTimeout("nexttwo ()",400);
          }
  
          function nexttwo () {
              document.play.three.value=""; 
              setTimeout("nextthree()",400);
          }
  
          function nextthree () {
              document.play.seven.value="&gt;(  °3°)";
              document.play.one.value="&gt;(  °3°)";
              document.play.six.value="&gt;(  °3°)"; 
              setTimeout("nextfour ()",700);
          }
  
          function nextfour () {
              document.play.one.value="";
              document.play.six.value="";
              document.play.two.value="&gt;(  °3°)"; 
              setTimeout("nextfive ()",700);
          }
  
          function nextfive () {
              document.play.seven.value="";
              document.play.two.value="";
              document.play.four.value="&gt;(  °3°)"; 
              setTimeout("nextsix ()",800);
          }
  
          function nextsix () {
              document.play.eight.value="&gt;(  °3°)";
              document.play.two.value="&gt;(  °3°)"; 
              setTimeout("nextseven ()",700);
          }
  
          function nextseven () {
              document.play.eight.value="";
              document.play.five.value="&gt;(  °3°)"; 
              setTimeout("nexteight ()",400);
          }
  
          function nexteight () {
              document.play.nine.value="&gt;(  °3°)"
              document.play.four.value="&gt;(  °3°)"; 
              setTimeout("nextnine ()",500);
          }
  
          function nextnine () {
              document.play.five.value="";
              document.play.four.value="";
              document.play.one.value="&gt;(  °3°)"; 
              setTimeout("nextten ()",200);
          }
  
          function nextten () {
              document.play.three.value="&gt;(  °3°)";
              document.play.six.value="&gt;(  °3°)"; 
              setTimeout("nexteleven ()",600);
          }
  
          function nexteleven () {
              document.play.one.value="";
              document.play.seven.value="&gt;(  °3°)"; 
              setTimeout("nexttwelve ()",500);
          }
  
          function nexttwelve () {
              document.play.two.value="&gt;(  °3°)";
              document.play.nine.value="&gt;(  °3°)"; 
              setTimeout("nextthirteen ()",700);
          }
  
          function nextthirteen () {
              document.play.one.value="&gt;(  °3°)";
              document.play.nine.value="";
              document.play.seven.value=""; 
              setTimeout("start ()",600);
          }
  
          function stop () {
              clearInterval(countTimer);
              document.play.one.value="";
              document.play.two.value="";
              document.play.three.value="";
              document.play.four.value="";
              document.play.five.value="";
              document.play.six.value="";
              document.play.seven.value="";
              document.play.eight.value="";
              document.play.nine.value="";
          }
          function reset()
          {
              document.getElementById("counter").innerHTML="0";
              document.getElementById("score").innerHTML="0";
          }
  
          // get the counter element
          var score = document.getElementById("score");
          // get it's value
          var value = parseInt(score.innerHTML);
          // increase it
          value = value + 1;
          // write the new value back
          score.innerHTML=value;
  
  
      &lt;/script&gt; 
  &lt;/head&gt;  
  
  &lt;body&gt;
      &lt;div id="input"&gt;
          &lt;button onclick="start()"&gt;start&lt;/button&gt;
          &lt;button onclick="stop()"&gt;stop&lt;/button&gt;
          &lt;button onclick="reset()"&gt;reset&lt;/button&gt;
          &lt;div style="font-size:10em" id="counter"&gt;0&lt;/div&gt;&lt;br&gt;
          &lt;p&gt;Your score:&lt;/p&gt;&lt;div style="font-size:5em" id="score"&gt;0&lt;/div&gt;
          &lt;script&gt;
              var countTimer = setInterval('count()',1000);
          &lt;/script&gt;
      &lt;/div&gt;
      &lt;div id="playground"&gt;
          &lt;table border=100 cellpadding=0 cellspacing=0&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;form name="play"&gt;
                          &lt;center&gt;  
                              &lt;INPUT TYPE="button" NAME="one" OnClick="one ()" id="one" value="      "&gt;  
                              &lt;INPUT TYPE="button" NAME="two" OnClick="two ()" id="two" value="      "&gt;  
                              &lt;INPUT TYPE="button" NAME="three" OnClick="three ()" id="three" value="      "&gt;
                              &lt;br&gt;  
                              &lt;INPUT TYPE="button" NAME="four" OnClick="four ()" id="four" value="      "&gt;  
                              &lt;INPUT TYPE="button" NAME="five" OnClick="five ()" id="five" value="      "&gt;  
                              &lt;INPUT TYPE="button" NAME="six" OnClick="six ()" id="six" value="      "&gt;
                              &lt;br&gt;  
                              &lt;INPUT TYPE="button" NAME="seven" OnClick="seven ()" id="seven" value="      "&gt;  
                              &lt;INPUT TYPE="button" NAME="eight" OnClick="eight ()" id="eight" value="      "&gt;  
                              &lt;INPUT TYPE="button" NAME="nine" OnClick="nine ()" id="ten" value="      "&gt;
                              &lt;br&gt;
                              &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;/table&gt;  
                              &lt;/div&gt;
                              &lt;/body&gt;  
                              &lt;/html&gt;
  </code></pre>
  
  <p>The problem is the counter goes too fast after 20 - 30, after click the button the fish doesn't disappear and no points are added on score. </p>