topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

game-javascript-casual-buttonmania-game.htm / htm



  
  <!-- THREE STEPS TO INSTALL BUTTON MANIA:
  
    1.  Copy the coding into the HEAD of your HTML document
  
    2.  Add the onLoad event handler into the BODY tag
  
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <style type="text/css">
  
  <!--
  
  body { background-color: #EEEEEE; color: black }
  
  a { font-weight: bold }
  
  a:link { background-color: #EEEEEE; color: blue }
  
  a:visited { background-color: #EEEEEE; color: blue }
  
  a:active { background-color: #EEEEEE; color: blue }
  
  a:hover { background-color: white; color: maroon}
  
  input { font-family: monospace; font-size: 24px; border-left: 10px; border-right: 10px; border-color: silver; border-style: double }
  
  -->
  
  </style>
  
  <SCRIPT LANGUAGE="JavaScript">
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  http://webplaza.pt.lu/dostert/ -->
  
  <!-- Begin
  
  var Size = new Number(6);
  
  var Moves = new Array();
  
  function NewGame()
  
  {
  
          for(i = 0; i < Size * Size; document.forms[0].elements[i++].value = 0);
  
          for(i = 0; i < 3 + 3 * document.forms[0].Difficulty.selectedIndex; i++)
  
                  NewValue(Math.floor(Math.random() * Size),Math.floor(Math.random() * Size),1);
  
          Moves.length = document.forms[0].Score.value = 0;
  
  }
  
  function TakeBack(flag)
  
  {
  
          while(flag-- && (i = Moves.pop()))
  
                  NewValue(parseInt(i.split("-")[0]),parseInt(i.split("-")[1]),1);
  
          document.forms[0].Score.value = Moves.length;
  
  }
  
  function Clicked(x,y)
  
  {
  
          NewValue(x,y,3);
  
          document.forms[0].Score.value = Moves.push(x + "-" + y);
  
          for(i = 0; i < Size * Size; i++)
  
                  if(parseInt(document.forms[0].elements[i].value))
  
                          return;
  
          alert((Moves.length <= 3 + 3 * document.forms[0].Difficulty.selectedIndex ? "Perfect!\n" : "") + "Done in " + Moves.length + " clicks");
  
          NewGame();
  
  }
  
  function NewValue(x,y,c)
  
  {
  
          ChangeValue(x,y,c);
  
          ChangeValue(x - 1,y,c);
  
          ChangeValue(x + 1,y,c);
  
          ChangeValue(x,y - 1,c);
  
          ChangeValue(x,y + 1,c);
  
  }
  
  function ChangeValue(x,y,c)
  
  {
  
          if(x >= 0 && x < Size && y >= 0 && y < Size)
  
                  with(document.forms[0].elements[x + Size * y]) value = (parseInt(value) + c) & 3;
  
  }
  
  //  End -->
  
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <BODY onLoad="NewGame()">
  
  <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
  
  <p><a href="" onClick="NewGame(); return false;" onMouseOver="window.status='Start a new game'; return true;" onMouseOut="window.status=''; return true;" title="Start a new game">New</a> - <a href="" onClick="TakeBack(-1); return false;" onMouseOver="window.status='Restart the board'; return true;" onMouseOut="window.status=''; return true;" title="Restart the board">Restart</a> - <a href="" onClick="TakeBack(1); return false;" onMouseOver="window.status='Undo last move'; return true;" onMouseOut="window.status=''; return true;" title="Undo last move">Undo</a></p>
  
  <form action="" method="get" enctype="application/x-www-form-urlencoded">
  
  <script type="text/javascript">
  
  <!--
  
  for(y = 0; y < Size; y++,window.document.write("<br>"))
  
          for(x = 0; x < Size; x++)
  
                  window.document.write('<input type="button" value="" onClick="Clicked(' + x + ',' + y + ')">');
  
  // -->
  
  </script>
  
  <p>
  
  Difficulty setting: <select name="Difficulty" onChange="NewGame()">
  
  <option>Huh, what ?</option>
  
  <option>Dumb</option>
  
  <option>Real easy</option>
  
  <option>Easy</option>
  
  <option selected>Normal</option>
  
  <option>Hard</option>
  
  <option>Real hard</option>
  
  <option>Master</option>
  
  <option>Impossible</option>
  
  </select>
  
  </p>
  
  <p>Clicks used: <input type="text" name="Score" value="0" size="3" disabled></p>
  
  </form>
  
  <dl>
  
  <dt>How to play:</dt>
  
  <dd>Click on one of the buttons in the playing field<br>to decrement that button's value by 1,<br>as well as the values of the 4 surrounding ones.</dd>
  
  <dt>Objective:</dt>
  
  <dd>Set all buttons to '0'.</dd>
  
  </dl>   
  
  <p><center>
  
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  
  </center><p>
  
  <!-- Script Size:  4.37 KB -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.