Introducing DOCJSLIB, Part I: Connect-Three Board Game - Doc JavaScript | WebReference

Introducing DOCJSLIB, Part I: Connect-Three Board Game - Doc JavaScript


The Connect-Three Board Game's Code

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// Copyright (c) 2000 internet.com Corp.
// http://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Yehuda Shiran.
// Begin docjslib version 1.0. Released Oct 11, 1998.
// This is docjslib library.
// It begins in this comment and continues
// until the matching comment, "End docjslib ...".
// It should not be normally touched.
// docjslib is a cross-browser library.
// You should not worry about the browser in your code.
// This version includes the following functions:
//   getSrc (gets the image URL of a DHTML element)
//   setSrc (sets the image URL of a DHTML element)
//   makeImage (creates a DHTML element)
var IE4 = (document.all) ? true : false;
var NS4 = (document.layers) ? true : false;
function getSrc(id) {
  if (NS4) {return eval("document." + id + ".document." + id + "img.src")}
  else {return eval("document.all." + id + "img.src")}
}
function setSrc(id, url) {
  if (NS4) {eval("document." + id + ".document." + id + "img").src = url}
  else {eval("document.all." + id + "img").src = url}
}
function makeImage(imgID,          // given id
                   imgURL,         // image URL
                   imgHeight,      // image height
                   imgWidth,       // image width
                   imgAlt,         // alternative image
                   posFromLeft,    // absolute position from left of window
                   posFromTop,     // absolute position from top of window
                   clickParam1,    // parameter passed to "onclick" handler
                   clickParam2)    // parameter passed to "onclick" handler
  {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', imgID, '">',
    '<A HREF="javascript:', "handleImageClick('", imgID, "'", ',',
    clickParam1, ',', clickParam2, ')">',
    '<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL, '" ALT="',
    imgAlt, '" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="',
    imgWidth, '">', '</A></DIV>'
  );
}
//
// End docjslib Version 1.0
//
function rowComplete() {
  var lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") &&
      (grid[2][1] == lastPlayedBy) &&
      (grid[3][1] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][2];
  if ((lastPlayedBy != "") &&
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][2] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3];
  if ((lastPlayedBy != "") &&
      (grid[2][3] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") &&
      (grid[1][2] == lastPlayedBy) &&
      (grid[1][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[2][1];
  if ((lastPlayedBy != "") &&
      (grid[2][2] == lastPlayedBy) &&
      (grid[2][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[3][1];
  if ((lastPlayedBy != "") &&
      (grid[3][2] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") &&
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3];
  if ((lastPlayedBy != "") &&
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][1] == lastPlayedBy)) return(true);
}
function itsAtie() {
  for( var i = 1; i <= 3; i++)
    for( var j = 1; j <= 3; j++)
      if (grid[i][j] == "") return(false);
  return(true);
}
function handleImageClick(id, param1, param2) {
    if (getSrc(id).indexOf('initialbutton.gif') < 0) return;
    if (lastPlayedBy == "o") {
      setSrc(id, "xbutton.gif");
      lastPlayedBy = "x";
    }
    else {  // lastPlayedBy = "x"
      setSrc(id, "obutton.gif");
      lastPlayedBy = "o";
    }
    grid[param1][param2] = lastPlayedBy;
    if (rowComplete()) {
      alert("The " + lastPlayedBy + " wins");
      window.location.reload();
    }
    else if (itsAtie()) {
           alert("It's a tie");
           window.location.reload();
         }
}
var lastPlayedBy = "o";
var grid = new Array();
grid[1] = new Array();
grid[2] = new Array();
grid[3] = new Array();
for (var i = 1; i <= 3; i++)
  for (var j = 1; j <= 3; j++)
    grid[i][j] = "";
var xBase = 8;
var yBase = 8;
for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    makeImage("box" + i + "" + j,     // id
              "initialbutton.gif",    // URL
              100,                    // height
              100,                    // width
              "game box",             // alternative
               xBase + (i-1) * 108,   // position from left
               yBase + (j-1) * 108,   // position from top
               i,                     // parameter passed to onclick handler
               j);                    // parameter passed to onclick handler
  }
}
// -->
</SCRIPT>
</BODY>
</HTML>

http://www.internet.com


Created: October 12, 1998
Revised: October 12, 1998

URL: http://www.webreference.com/js/column27/code1.html