topical media & game development

talk show tell print

game-javascript-casual-squares-game.htm / htm



  <!-- TWO STEPS TO INSTALL SQUARES:
  
    1.  Copy the coding into the HEAD of your HTML document
    2.  Add the last code into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Ken Douglas (ken@ntlworld.com) -->
  <!-- Web Site:  http://www.groveroad.herts.sch.uk -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Begin
  // static globals 
  var maxheight = 9;
  var maxwidth = maxheight;
  var winscore = Math.round((maxheight * maxwidth / 2) + 0.5);
  // dynamic globals
  var player = 1; 
  var won = 0;
  function newGame() {
  // sets all graphics back to default and clears scores
  won = 0;
  eval('document.squares.score1.value = 0');
  eval('document.squares.score2.value = 0');
  for (var y = 1; y <= maxheight; y ++ ) {
  for (var x = 1; x <= maxwidth; x ++ ) {
  document.game-javascript-casual-squares-["x" + x + "y" + y].src = sqr[0].src;
  document.game-javascript-casual-squares-["vx" + x + "vy" + y].src = ver[0].src;
  document.game-javascript-casual-squares-["hx" + x + "hy" + y].src = hor[0].src;
     }
  }
  for (var a = 1; a <= maxheight; a ++ ) {
  onemore = maxheight + 1;
  document.game-javascript-casual-squares-["vx" + onemore + "vy" + a].src = ver[0].src;
  document.game-javascript-casual-squares-["hx" + a + "hy" + onemore].src = hor[0].src;
     }
  }
  function preload() {
  if (document.game-javascript-casual-squares-) {
  sqr = new makeArray(3);
  sqr[0].src = "game-javascript-casual-squares-p0.gif";
  sqr[1].src = "game-javascript-casual-squares-p1.gif";
  sqr[2].src = "game-javascript-casual-squares-p2.gif";
  ver = new makeArray(3);
  ver[0].src = "game-javascript-casual-squares-v0.gif";
  ver[1].src = "game-javascript-casual-squares-v1.gif";
  ver[2].src = "game-javascript-casual-squares-v2.gif";
  hor = new makeArray(3);
  hor[0].src = "game-javascript-casual-squares-h0.gif";
  hor[1].src = "game-javascript-casual-squares-h1.gif";
  hor[2].src = "game-javascript-casual-squares-h2.gif";
  sel = new makeArray(2);
  sel[0].src = "game-javascript-casual-squares-notsel.gif";
  sel[1].src = "game-javascript-casual-squares-sel.gif";
  }
  else {
  alert("Sorry, this game needs a browser\nwhich supports the image object.");
     }
  }
  function makeArray(n) {
  this.length = n;
  for (i = 0; i < n; i ++) {
  this[i] = new Image();
  }
  return this;
  }
  function go (type, a, b) {
  // processes clicks on square verticals and horizontals...
  hit = 0;
  if (type == 1) {
  if (document.game-javascript-casual-squares-["hx" + a + "hy" + b].src == hor[1].src) {
  alert("Already taken - try again");
  return;
  }
  document.game-javascript-casual-squares-["hx" + a + "hy" + b].src = hor[1].src;
  // figure out if the square above is captured 
  if (b != 1) {
  var an = a + 1;
  var bn = b - 1;
   if ((document.game-javascript-casual-squares-["vx" + a + "vy" + bn].src == ver[1].src) && (document.game-javascript-casual-squares-["vx" + an + "vy" + bn].src == ver[1].src) && (document.game-javascript-casual-squares-["hx" + a + "hy" + bn].src == hor[1].src)) {
  document.game-javascript-casual-squares-["x" + a + "y" + bn].src = sqr[player].src;
  scoresOnDoors();
  hit = 1;
     }
  }
  //figure out if the square below is captured
  if (b != maxheight + 1) {
  var an = a + 1;
  var bn = b + 1;
  if ((document.game-javascript-casual-squares-["vx" + a + "vy" + b].src == ver[1].src) && (document.game-javascript-casual-squares-["vx" + an + "vy" + b].src == ver[1].src) && (document.game-javascript-casual-squares-["hx" + a + "hy" + bn].src == hor[1].src)) {
  document.game-javascript-casual-squares-["x" + a + "y" + b].src = sqr[player].src;
  scoresOnDoors();
  hit = 1;
        }
     }
  }
  if (type == 2) {
  if (document.game-javascript-casual-squares-["vx" + a + "vy" + b].src == ver[1].src) {
  alert("Already taken - try again");
  return;
  }
  document.game-javascript-casual-squares-["vx" + a + "vy" + b].src = ver[1].src;
  // figure out if the square right is captured 
  if (a != maxwidth + 1) {
  var an = a + 1;
  var bn = b + 1;
  if ((document.game-javascript-casual-squares-["hx" + a + "hy" + b].src == hor[1].src) && (document.game-javascript-casual-squares-["hx" + a + "hy" + bn].src == hor[1].src) && (document.game-javascript-casual-squares-["vx" + an + "vy" + b].src == ver[1].src)) {
  document.game-javascript-casual-squares-["x" + a + "y" + b].src = sqr[player].src;
  scoresOnDoors();
  hit = 1;
     }
  }
  //figure out if the left is captured
  if (a != 1) {
  var an = a - 1;
  var bn = b + 1;
  if ((document.game-javascript-casual-squares-["hx" + an + "hy" + b].src == hor[1].src) && (document.game-javascript-casual-squares-["hx" + an + "hy" + bn].src == hor[1].src) && (document.game-javascript-casual-squares-["vx" + an + "vy" + b].src == ver[1].src)) {
  document.game-javascript-casual-squares-["x" + an + "y" + b].src = sqr[player].src;
  scoresOnDoors();
  hit = 1;
        }
     }
  }
  // change players if no hit
  if (hit == 0) {
  if (player != 1) {player = 1
  }
  else {
  player = 2;
  }
  showPlayer();
  }
  return;
  }
  function showPlayer() {
  // let the users jnow which player is "up" by switching on the appropriate graphic
  if (player == 1) {
  document.game-javascript-casual-squares-["play2"].src = sqr[0].src;
  document.game-javascript-casual-squares-["play1"].src = sqr[1].src;
  }
  if (player == 2) {
  document.game-javascript-casual-squares-["play1"].src = sqr[0].src;
  document.game-javascript-casual-squares-["play2"].src = sqr[2].src;
  }
  return;
  }
  function scoresOnDoors() {
  // simple score increment and check - note play can comtinue after a winner is declared
  eval('tmp = document.squares.score' + player + '.value');
  tmp = tmp * 1;
  tmp += 1;
  eval('document.squares.score' + player + '.value = tmp');
  if (won == 0 && tmp >= winscore) {
  alert("Player " + player + " wins");
  won = 1;
  }
  return;
  }
  //  End -->
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Ken Douglas (ken@ntlworld.com) -->
  <!-- Web Site:  http://www.groveroad.herts.sch.uk -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Begin
  var output = '';
  output += '<TABLE CELLPADDING = 0 CELLSPACING = 8 BORDER = 0><TR>';
  // create the board
  output += '<TD><TABLE CELLPADDING = 0 CELLSPACING = 0 BORDER = 0>';
  for (var y = 1; y <= maxheight; y ++ ) {
  output += '<TR>';
  for (var x = 1; x <= maxwidth; x ++ ) {
  output += '<TD><IMG SRC = "game-javascript-casual-squares-d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD><TD><A HREF = "javascript:go(1,' + x + ',' + y + ');" onFocus = "blur();">';
  output += '<IMG SRC = "game-javascript-casual-squares-h0.gif" NAME = "hx' + x + 'hy' + y + '" WIDTH = 38 HEIGHT = 4 ALT = "" BORDER = 0></A></TD>';
  }
  output += '<TD><IMG SRC = "game-javascript-casual-squares-d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD></TR><TR>'
  for (var x = 1; x <= maxwidth; x ++ ) {
  output += '<TD><A HREF = "javascript:go(2,' + x + ',' + y + ');" onFocus = "blur();">';
  output += '<IMG SRC = "game-javascript-casual-squares-v0.gif" NAME = "vx' + x + 'vy' + y + '" WIDTH = 4 HEIGHT = 38 ALT = "" BORDER = 0></A></TD>';
  output += '<TD><IMG SRC = "game-javascript-casual-squares-p0.gif" NAME = "x' + x + 'y' + y + '" WIDTH = 38 HEIGHT = 38 ALT = "" BORDER = 0></TD>';
  }
  var x = maxwidth + 1
  output += '<TD><A HREF = "javascript:go(2,' + x + ',' + y + ');" onFocus = "blur();">';
  output += '<IMG SRC = "game-javascript-casual-squares-v0.gif" NAME = "vx' + x + 'vy' + y + '" WIDTH = 4 HEIGHT = 38 ALT = "" BORDER = 0></A></TD>';
  output += '</TR>';
  }
  output += '<TR>'
  for (var x = 1; x <= maxwidth; x ++ ) {
  output += '<TD><IMG SRC = "game-javascript-casual-squares-d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD><TD><A HREF = "javascript:go(1,' + x + ',' + y + ');" onFocus = "blur();">';
  output += '<IMG SRC = "game-javascript-casual-squares-h0.gif" NAME = "hx' + x + 'hy' + y + '" WIDTH = 38 HEIGHT = 4 ALT = "" BORDER = 0></A></TD>';
  }
  output += '<TD><IMG SRC = "game-javascript-casual-squares-d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD></TR><TR><TD COLSPAN = ';
  spanthis = (maxheight*2) + 1;
  output += spanthis;
  output += '> </TD></TR></TABLE></TD>';
  // create the form for feedback to user and also a "new game" button
  output += '<TD VALIGN = top><FORM NAME = "squares"><TABLE CELLPADDING = 2 CELLSPACING = 0 BORDER = 0 BGCOLOR = "#0193ff">';
  output += '<TR><TD ALIGN = center><FONT FACE = "Arial, Helvetica, sans-serif" SIZE = 2>Player 1</FONT></TD>';
  output += '<TD ALIGN = center><FONT FACE = "Arial, Helvetica, sans-serif" SIZE = 2>Player 2</FONT></TD></TR>';
  output += '<TR><TD ALIGN = center><IMG SRC = "game-javascript-casual-squares-p1.gif" WIDTH = 38 HEIGHT = 38 NAME = "play1" ALT = " Player 1 " VSPACE = 2" BORDER = 0><BR></TD>';
  output += '<TD ALIGN = center><IMG SRC = "game-javascript-casual-squares-p0.gif" WIDTH = 38 HEIGHT = 38 NAME = "play2" ALT = " Player 2 " VSPACE = 2" BORDER = 0><BR></TD></TR>';
  output += '<TR><TD ALIGN = center><INPUT TYPE = "text" NAME = "score1" SIZE = "3" VALUE = 0 onFocus = "blur();"></TD>';
  output += '<TD ALIGN = center><INPUT TYPE = "text" NAME = "score2" SIZE = "3" VALUE = 0 onFocus = "blur();"></TD></TR>';
  output += '<TR><TD COLSPAN = 2 ALIGN = center><BR><INPUT TYPE = "button" VALUE = " New Game " onClick = "newGame();">';
  output += '<BR> </TD></TR><TR><TD COLSPAN = 2 BGCOLOR = "#0193ff" ALIGN = center>';
  output += '<BR><BR><FONT FACE = "Arial, Helvetica, sans-serif" SIZE = 1>';
  output += '<A HREF = "http://www.groveroad.herts.sch.uk/kids/squares/howtoplay.html" TARGET="_new">Instructions</A><BR>';
  output += '<BR></FONT></TD></TR>';
  output += '</TABLE></FORM></TD>';
  output += '</TR></TABLE>';
  document.write(output);
  preload();
  //  End -->
  </script>
  
  <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:  9.29 KB -->
  


(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.