Introducing DOCJSLIB Version 2.0: 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.
// https://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Yehuda Shiran.
// Begin DOCJSLIB version 2.0. Released Oct 26, 1998.
// This is DOCJSLIB library.
// It begins in this comment and continues until the matching comment
// The matching comment is "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 (numbers to the
// left designate version of DOCJSLIB where first introduced:
// 1.0 getSrc (gets the image's URL of a DHTML element, url)
// 1.0 setSrc (sets the image's URL of a DHTML element)
// 2.0 getWidth (gets the DHTML element's width, pixels)
// 2.0 getVisibility (gets the DHTML element's visibility, true or false)
// 2.0 setVisibility (sets the DHTML element's visibility, true or false)
// 2.0 setPosFromLeft (sets the DHTML element's horiz. position,
// pixels from left)
// 2.0 setZposition (set the Z position of the DHTML element, integer)
// 1.0 makeImage (creates an image-based DHTML element)
// 2.0 makeBox (creates a DHTML container)
//
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 getWidth(id) {
if (NS4) {return eval("document." + id + ".clip.width")}
else {return eval("document.all." + id + ".style.pixelWidth")}
}
function getVisibility(id) {
if (NS4) {
if (eval("document." + id).visibility == "show") return true
else return false;
}
else {
if (eval("document.all." + id).style.visibility == "visible") return true
else return false;
}
}
function setVisibility(id, flag) {
if (NS4) {
var str = (flag) ? 'show' : 'hide';
eval("document." + id).visibility = str;
}
else {
var str = (flag) ? 'visible' : 'hidden';
eval("document.all." + id).style.visibility = str;
}
}
function setPosFromLeft(id, xCoord) {
if (NS4) {eval("document." + id).left = xCoord}
else {eval("document.all." + id).style.left = xCoord}
}
function setZposition(id, z) {
if (NS4) {eval("document." + id).zIndex = z}
else {eval("document.all." + id).style.zIndex = z}
}
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>'
);
}
function makeBox(boxID, // given id
htmlFiller, // HTML filler
boxWidth, // box width
posFromLeft, // absolute position from left of window
posFromTop, // absolute position from top of window
boxBg, // box background color
boxColor, // html filler text color
boxVisibility) // visibility
{
var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
var visibility = (boxVisibility) ? 'visible' : 'hidden';
document.write(
'<STYLE TYPE="text/css">',
'#', boxID, ' {',
'position: absolute;',
'left: ', posFromLeft, '; top: ', posFromTop, ';',
'width: ', boxWidth, ';',
'layer-background-color: ', boxBg, ';',
'background-color: ', boxBg, ';',
'visibility: ', visibility, ';',
'border-width: 2;',
'border-style: solid;',
'border-color: ', boxColor, ';',
padding,
'z-index: 1',
'}',
'</STYLE>',
'<DIV ID="', boxID, '">',
htmlFiller,
'</DIV>'
);
}
//
// End DOCJSLIB Version 2.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>
Created: October 26, 1998
Revised: October 29, 1998
URL: https://www.webreference.com/js/column28/code1.html
Find a programming school near you