Another tictactoe
<!----------------------------------------------------------------\
| |
| Fair License |
| |
| JS Games :: Tic-Tac-Toe |
| Copyright (C) 2002-2004 Arun Narayanan |
| |
| For latest release information and downloads visit: |
| http://jsgames.sourceforge.net/ |
| |
| Usage of the works is permitted provided that this |
| instrument is retained with the works, so that any entity |
| that uses the works is notified of this instrument. |
| |
| DISCLAIMER: THE WORKS ARE WITHOUT WARRANTY. |
| |
| [2004, Fair License: rhid.com/fair] |
| |
\----------------------------------------------------------------->
<html>
<head>
<title>!!! JS Games :: Tic-Tac-Toe !!!</title>
<style>
body,h1,h2,h3,.msg,td {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2,.h2 {font-size:22pt; margin:0px; font-weight:bold; padding:0px;}
h3 {font-size:8pt; margin:0px; font-weight:bold;}
.cell {width:54px; height:60px; border:3px solid #999999; font-size:32pt; font-weight:bold;
background-color:#606060; color:#ffffff;}
.tab {border:3px solid #999999; background-color:#999999;}
.msg {font-size:8pt; font-weight:bold;}
.tab {cursor:hand;}
.board {font-size:9pt; font-weight:bold;}
.status {font-size:9pt; font-weight:bold; color:#99ff99;}
.progress {font-size:8pt; font-weight:bold;}
.success {font-size:14pt; font-weight:bold; color:#33ccff;}
.bnote {font-size:8pt; font-weight:normal;color:white;}
a.notelnk,a.notelnk:visited,a.notelnk:active {font-size:8pt; font-weight:normal; color:#66ffcc;}
.bnotehead {font-size:10pt; font-weight:bold;color:#66ffcc;}
.email {font-size:8pt; font-weight:bold; color:white;}
.but {font-size:8pt; font-weight:bold; height:24px; background-color:#606060; background-image:url(images/butbase.gif);
border:0px solid #cccccc; border-left:none; border-right:none; color:white;}
.fra {border:2px solid #999999; background-color:#606060;}
.clsThisGame, .clsBar {font-size:8pt; font-weight:bold; color:#cccccc;}
.clsBar {margin:0px; font-size:8pt; font-weight:bold; color:#ffffff;}
.clsOtherGame {margin:0px; font-size:8pt; font-weight:bold; color:#ffffff; text-decoration:none;}
.help {font-size:8pt; margin:0px; font-weight:bold;}
.menubar {padding:0px; margin:0px; brder-top:1px solid white; brder-bottom:1px solid white; background-color:#606060;
background-image:url(images/menu.gif);}
</style>
<script>
var gtarget, ghi, gtries, gtime, gintervalid=-1;
function toggleHelp()
{
if (butHelp.value == "Hide Help")
{
help.style.display = "none";
butHelp.value = "Show Help";
}
else
{
help.style.display = "";
butHelp.value = "Hide Help";
}
}
/*
0 1 2
0|-----|
1| |
2|_____|
*/
var gcoords = new Array(
"000102",
"101112",
"202122",
"001020",
"011121",
"021222",
"001122",
"021120"
);
//random number between low and hi
function r(low,hi)
{
return Math.floor((hi-low)*Math.random()+low);
}
//random number between 0 and hi
function r0(hi)
{
return Math.floor((hi)*Math.random());
}
//random number between 1 and hi
function r1(hi)
{
return Math.floor((hi-1)*Math.random()+1);
}
function showMessage(msgstr,classname)
{
if (classname != null)
fldStatus.innerHTML = "<span class=" + classname + ">" + msgstr + "</span>";
else
fldStatus.innerHTML = msgstr;
}
function stopGame()
{
clearInterval(gintervalid);
gintervalid=-1;
}
function isMarked(obj)
{
if (obj.innerHTML == "")
return false;
else
return true;
}
function markCell(obj,symbol)
{
obj.innerHTML = symbol;
}
function getCell(row,col)
{
return eval("a_" + row + "_" + col);
}
function getMark(obj)
{
return obj.innerHTML;
}
function getMark(row,col)
{
return getCell(row,col).innerHTML;
}
function getMarkSpace(row,col)
{
var r = getCell(row,col).innerHTML;
if (r=="") r = " ";
return r;
}
function drawBoard()
{
var s, i, j;
s = "<table class=tab cellpadding=0 cellspacing=0>\n";
for (i=0;i<3;i++)
{
s += "<tr>\n";
for (j=0;j<3;j++)
s += "<td class=cell align=center id=a_" + i + "_" + j + " onclick=draw(this)></td>\n";
s += "</tr>\n";
}
s += "</table>";
board.innerHTML = s;
}
function toArray(coords)
{
var arr = new Array();
for (var i=0;i<6;i++)
{
arr[i] = parseInt(coords.substr(i,1));
}
return arr;
}
//Returns the blank cell in the first line where two cells are
//already filled with 'X' or 'O'. Returns null if match not found
function getTwoInLineCell(symbol)
{
var s, arr;
for (var i=0;i<gcoords.length;i++)
{
s = getLine(gcoords[i]);
arr = toArray(gcoords[i]);
if ( (symbol=="X" && s=="XX ") || (symbol=="O" && s=="OO ") )
return getCell(arr[4],arr[5]);
if ( (symbol=="X" && s=="X X") || (symbol=="O" && s=="O O") )
return getCell(arr[2],arr[3]);
if ( (symbol=="X" && s==" XX") || (symbol=="O" && s==" OO") )
return getCell(arr[0],arr[1]);
}
return null;
}
//Returns a blank cell (random) in the first line where one cell
//is already filled with 'X' or 'O' and the other two are blank.
//Returns null if no such match is found
function getOneInLineCell(symbol)
{
var s, arr;
for (var i=0;i<gcoords.length;i++)
{
s = getLine(gcoords[i]);
arr = toArray(gcoords[i]);
if ( (symbol=="X" && s=="X ") || (symbol=="O" && s=="O ") )
return (r0(2)==0) ? getCell(arr[2],arr[3]) : getCell(arr[4],arr[5]);
if ( (symbol=="X" && s==" X") || (symbol=="O" && s==" O") )
return (r0(2)==0) ? getCell(arr[2],arr[3]) : getCell(arr[0],arr[1]);
if ( (symbol=="X" && s==" X ") || (symbol=="O" && s==" O ") )
return (r0(2)==0) ? getCell(arr[0],arr[1]) : getCell(arr[4],arr[5]);
}
return null;
}
function getRandomFreeCell()
{
var i,j,row=new Array(),col=new Array(),c=-1,n;
if (getMark(1,1)=="") return getCell(1,1);
for (i=0; i<3; i++)
{
for (j=0; j<3; j++)
{
if (getMark(i,j)=="")
{
c++;
row[c] = i;
col[c] = j;
}
}
}
if (c == -1) return null;
n = r0(c+1);
return getCell(row[n],col[n]);
}
function getLine(coords)
{
var a = toArray(coords);
return getMarkSpace(a[0],a[1]) + getMarkSpace(a[2],a[3]) + getMarkSpace(a[4],a[5]);
}
function isGameOver()
{
var s;
for (var i=0;i<gcoords.length;i++)
{
s = getLine(gcoords[i]);
if (s=="XXX")
{
showMessage("Game Over! You have won it!<br>Time Taken: " + gtime + " secs","success");
stopGame();
return true;
}
if (s=="OOO")
{
showMessage("Game Over! Sorry, you have lost it!<br>Time Taken: " + gtime + " secs","success");
stopGame();
return true;
}
}
return false;
}
function draw(obj)
{
var cell;
if (gintervalid == -1)
{
alert("Please press the \"Start Game\" button to start a new game.");
return;
}
if (isMarked(obj)) return; //exit if already marked
markCell(obj,"X");
if (isGameOver()) return;
cell = getTwoInLineCell("O");
if (cell != null) //found two O's and a blank in a line
{
markCell(cell,"O");
if (isGameOver()) return; //always returns!
}
cell = getTwoInLineCell("X");
if (cell != null) //found two X's and a blank in a line; block it!
{
markCell(cell,"O");
return;
}
cell = getOneInLineCell("O");
if (cell != null)
{
markCell(cell,"O");
return;
}
cell = getRandomFreeCell();
if (cell != null)
{
markCell(cell,"O");
return;
}
else //no free cells available
{
showMessage("Game Over! It's a TIE!","success");
stopGame();
}
}
function startGame()
{
gtime = 0;
drawBoard()
showMessage("");
clearInterval(gintervalid);
gintervalid = setInterval("tick()",1000);
tick();
}
function tick()
{
gtime++;
showMessage("Time: " + gtime + " secs","progress");
}
</script>
</head>
<body bgcolor="black" text="white" onload="toggleHelp();drawBoard()" background="images/bkg.gif">
<center>
<h1>JS Games!</h1>
<span class=msg>Copyright © 2002-2004 Arun Narayanan</span><br>
<a class=notelnk href="http://jsgames.sourceforge.net/">http://jsgames.sourceforge.net/</a>
<br>
<table width="450" class=fra cellpadding=0 cellspacing=0 border=0><tr><td>
<table width=100% cellpadding=2 cellspacing=0>
<tr><td colspan=2 class=bnotehead height=31 background="images/framebase.gif">Important Note:</td></tr>
<tr><td class=bnote valign=top>This game is written entirely using JavaScript. It requires Internet Explorer Version 4 or above
for proper functioning.
</td>
<td>
<a href="http://www.microsoft.com/windows/ie/" target="_blank"><img border="0" src="images/ie.gif" alt="Download Internet Explorer"></a>
</td></tr></table>
</td></tr></table>
<br>
<table width=620 height=47 border=0 cellpadding=0 cellspacing=0 bgcolor="#606060">
<tr><td colspan=4 height=31 background="images/framebase.gif"><img src="images/clear.gif" height=31></td></tr>
<tr>
<td width=8> </td><td class=h2 align=center width=98%>Tic-Tac-Toe</td>
<td align=right valign=bottom><input type=button id=butHelp value="Hide Help" class="but" onclick="toggleHelp()"></td>
<td width=8> </td>
</tr>
</table>
<table id=help width=620 background="images/body.gif" border=0 cellpadding=0 cellspacing=0 bgcolor="#606060">
<tr><td height="10"><img src="images/clear.gif" height=10></td></tr>
<tr><td class=help>
<ol>
<li>Press the "Start Game" button to start the game.</li>
<li>Click on any of the 9 cells on the board to mark a cross.</li>
<li>The computer would put a round in another cell.</li>
<li>The objective of the game is to complete a line (vertical, horizontal or diagonal).</li>
<li>The one who completes a line first wins.</li>
</ol>
</td></tr>
</table>
<table width=620 background="images/bottom.gif" border=0 cellpadding=0 cellspacing=0 bgcolor="#606060">
<tr><td height=29><td valign=middle align=center>
<h3>Complete a line in the shortest time...</h3>
</td></tr>
</table>
<p>
<table class=board>
<tr>
<td align=center>
<input class=but type=button value="Start Game" id=butStart onclick="startGame();">
</td>
</tr>
<tr>
<td align=center><br><div id=fldStatus class=progress></div><br></td>
</tr>
<tr>
<td align=center>
<div id=board><div>
</td>
</tr>
</table>
</center>
<br>
<p>
</center>
</body>
</html>
JavaScriptGame.zip( 115 k)Related examples in the same category