Tic tac toe
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Tic Tac Toe</title>
<!-- style.css -->
<style rel="stylesheet">
.main{background:#FFFFFF; border:#000000 solid 1px; width:400px}
.header{background:#000000; width:100%}
.ip{border:#000000 solid 1px; width:50px; height:20px}
.btn{border:#000000 solid 1px; font-weight:bold; height:20px; cursor:hand}
.content_cpy{font-family:verdana,arial,helvetica; font-size:8pt; color:#FFFFFF}
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#FFFFFF}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#99FF00}
.nav{font-family:verdana,arial; font-size:8pt; font-weight:bold;
border-right:#000000 solid 2px; border-left:#000000 solid 1px;
border-bottom:#000000 solid 2px; border-top:#000000 solid 1px;
background:#FFFFFF; height:20px; cursor:hand}
.nav_over{font-family:verdana,arial; font-size:8pt; font-weight:bold;
border-right:#000000 solid 1px; border-left:#000000 solid 2px;
border-bottom:#000000 solid 1px; border-top:#000000 solid 2px;
background:#FFFFFF; height:20px; cursor:hand}
</style>
</head>
<body bgcolor="#ffffff">
<table class="header"><tbody><tr><td align="center"><img src="head_ttt.gif"></td></tr></tbody></table>
<!-- BEGIN NAVIGATION -->
<table bgcolor="#cccccc" cellpadding="2" cellspacing="2" width="100%"><tbody><tr>
<td class="nav" onmouseover="this.className='nav_over'" onmouseout="this.className='nav'" onclick="location.reload();" align="center">Play Game!</td>
<td class="nav" onmouseover="this.className='nav_over'" onmouseout="this.className='nav'" onclick="location.href='about.htm'" align="center">About</td>
<td class="nav" onmouseover="this.className='nav_over'" onmouseout="this.className='nav'" onclick="location.href='working.htm'" align="center">How it Works!</td>
</tr></tbody></table>
<table bgcolor="#999999" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td></td></tr></tbody></table>
<table bgcolor="#666666" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td></td></tr></tbody></table>
<!--END NAVIGATION -->
<!-- BEGIN TIC-TAC-TOE JAVASCRIPT BY PREMSHREE PILLAI -->
<!-- tic-tac-toe.js -->
<script language="JavaScript">
/////////////////////////////////////////////////////////////////
//
// Tic-Tac-Toe JavaScript
// By Premshree Pillai
// Created : 04/10/02 (dd/mm/yy)
// Web : http://www.qiksearch.com
// http://javascript.qik.cjb.net
// E-mail : qiksearch@rediffmail.com
// jsfx@rediffmail.com
//
// Like the script ?
// Sign my Guestbook :
// - http://pub.alxnet.com/guestbook?id=2395118
//
// Use freely as long as all credits are reatained
// and all contents are as it is.
//
// CopyRight 2002 Premshree Pillai. All rights reserved.
// Do not modify anything below this!
//
/////////////////////////////////////////////////////////////////
/* Global Variables */
/////////////////////////////////////////////////////////////////
var playerToken="1";
var myToken="0";
var MAXSIZE=100;
var _def_size=60;
var _def_bg_color="#000000";
var _def_color="#FFFFFF";
var _def_exit_msg='<br><input type="button" class="btn" value="Play Again!" onClick="location.reload();">';
var isEmptyArr=new Array(MAXSIZE);
for(var i=0; i<isEmptyArr.length; i++)
isEmptyArr[i]=true;
var drawCounter=0;
/* Arrays for testing */
var rowArr=new Array();
for(var i=0; i<=MAXSIZE; i++)
rowArr[i]=0;
var colArr=new Array();
for(var i=0; i<=MAXSIZE; i++)
colArr[i]=0;
var digArr=new Array();
for(var i=0; i<=MAXSIZE; i++)
digArr[i]=-1;
var lostFlag=false;
var meFirst=false;
/////////////////////////////////////////////////////////////////
/* Reset Global Variables */
function flush()
{
isEmptyArr=new Array(MAXSIZE);
for(var i=0; i<isEmptyArr.length; i++)
isEmptyArr[i]=true;
rowArr=new Array();
for(var i=0; i<=MAXSIZE; i++)
rowArr[i]=0;
colArr=new Array();
for(var i=0; i<=MAXSIZE; i++)
colArr[i]=0;
digArr=new Array();
for(var i=0; i<=MAXSIZE; i++)
digArr[i]=-1;
drawCounter=0;
lostFlag=false;
}
/* Generate the Board */
function genBox(size,where)
{
var count=0;
var retVal='<br><table>';
for(var i=0; i<size; i++)
{
retVal+='<tr>';
for(var j=0; j<size; j++)
{
count++;
var id=new String('id'+count);
retVal+='<td id="' + id + '" bgcolor="' + _def_bg_color + '" width="' + _def_size + '" height="' + _def_size + '" align="center" onClick="insert(' + playerToken + ',this.id,' + size + ')" style="font-family:comic sans ms,verdana; font-size:20pt; font-weight:bold; color:' + _def_color + '"></td>';
}
retVal+='</tr>';
}
retVal+='</table>';
document.getElementById(where).innerHTML=retVal;
if(isNaN(size))
{
alert("Please enter a valid number!");
document.getElementById(where).innerHTML=_def_exit_msg;
}
}
/* Insert Token */
function insert(what,id,size)
{
var ids=id.split("id");
if(isEmpty(id))
{
drawCounter++;
document.getElementById(id).innerHTML=what;
isEmptyArr[ids[1]]=false;
if(what==playerToken)
if((!playerWin(size))&&(!checkWin(size)))
move(size);
}
else
alert('You cannot insert here!');
if((drawCounter==size*size)&&!lostFlag)
{
if((!checkWin(size))&&(!playerWin(size)))
{
alert('It\'s a Draw!!!');
if(confirm("Do you want to play again ?"))
{
flush();
resolveMove(size);
}
else
document.getElementById('container').innerHTML=_def_exit_msg;
}
}
}
/* Computer's Move! */
function move(size)
{
var count=0;
var maxCount=0;
/* Building the Row Array */
for(var i=1; i<=size; i++)
{
maxCount=0;
for(var j=1; j<=size; j++)
{
count++;
var id=new String('id'+count);
if(!isEmpty(id))
if(document.getElementById(id).innerHTML==playerToken)
maxCount++;
}
rowArr[i]=maxCount;
}
/* Building the Column Array */
for(var i=1; i<=size; i++)
{
count=i;
maxCount=0;
for(var j=1; j<=size; j++)
{
var id=new String('id'+count);
if(!isEmpty(id))
{
if(document.getElementById(id).innerHTML==playerToken)
maxCount++;
}
count+=size;
}
colArr[i]=maxCount;
}
/* Building the Diagonal Array */
for(var i=1; i<=2; i++)
{
if(i==1)
count=i;
else
count=size;
maxCount=0;
for(var j=1; j<=size; j++)
{
var id=new String('id'+count);
if(!isEmpty(id))
{
if(document.getElementById(id).innerHTML==playerToken)
maxCount++;
}
if(i==1)
count+=size+1;
else
count+=size-1;
}
digArr[i]=maxCount;
}
/* Finding max values */
var maxRow=max(rowArr,0,size,"row");
var maxCol=max(colArr,0,size,"col");
var maxDig=max(digArr,0,size,"dig");
var maxArrs=new Array(-1,max(rowArr,1,size,"row"),max(colArr,1,size,"col"),max(digArr,1,size,"dig"));
if(max(maxArrs,0,size,"x")==1)
count=size*maxRow-size+1;
if(max(maxArrs,0,size,"x")==2)
count=maxCol;
if(max(maxArrs,0,size,"x")==3)
{
if(maxDig==1)
count=maxDig;
else
count=size;
}
if(!firstMove(size))
{
for(var i=1; i<=size; i++)
{
var id=new String('id'+count);
if(isEmpty(id))
{
insert(myToken,id,size);
break;
}
if(max(maxArrs,0,size,"x")==1)
count++;
if(max(maxArrs,0,size,"x")==2)
count+=size;
if(max(maxArrs,0,size,"x")==3)
{
if(maxDig==1)
count+=size+1;
else
count+=size-1;
}
}
}
else
{
playFirst(size);
}
if(playerWin(size))
{
alert('WOW! You Won!!!');
if(confirm("Do you want to play again ?"))
{
flush();
resolveMove(size);
}
else
document.getElementById('container').innerHTML=_def_exit_msg;
lostFlag=true;
}
else
{
if(checkWin(size))
{
alert('OOPS! You lost!!!');
if(confirm("Do you want to play again ?"))
{
flush();
resolveMove(size);
}
else
document.getElementById('container').innerHTML=_def_exit_msg;
lostFlag=true;
}
}
}
function max(arr,what,size,type)
{
var max=-1,maxIndex=-1;
for(var i=1; i<=size; i++)
{
if(type=="x")
{
if(arr[i] > max)
{
max=arr[i];
maxIndex=i;
}
}
else
{
if(!isFull(type,i,size) && type!="dig")
{
if(arr[ i ] > max)
{
max=arr[i];
maxIndex=i;
}
}
}
}
if(type=="dig")
{
for(var i=1; i<=2; i++)
{
if(!isFull(type,i,size))
{
if(arr[i] > max)
{
max=arr[i];
maxIndex=i;
}
}
}
}
if(what==0)
return(maxIndex);
else
return(max);
}
function isEmpty(who)
{
who=who.split("id");
return(isEmptyArr[who[1]]);
}
function isFull(type,num,size)
{
var retVal,count=1;
if(type=="row")
{
count=size*num-size+1;
for(var i=1; i<=size; i++)
{
var id=new String('id'+count);
if(isEmpty(id))
{
retVal=false;
return false;
break;
}
else
retVal=true;
count++;
}
}
if(type=="col")
{
count=num;
for(var i=1; i<=size; i++)
{
var id=new String('id'+count);
if(isEmpty(id))
{
retVal=false
return false;
break;
}
else
retVal=true;
count+=size;
}
}
if(type=="dig")
{
if(num==1)
count=num;
else
count=size;
for(var i=1; i<=size; i++)
{
var id=new String('id'+count);
if(isEmpty(id))
{
retVal=false
return false;
break;
}
else
retVal=true;
if(num==1)
count+=size+1;
else
count+=size-1;
}
}
return(retVal);
}
function firstMove(size)
{
var count=0;
for(var i=1; i<=size*size; i++)
{
var id=new String('id'+i);
if(!isEmpty(id))
count++;
}
if(count<=1)
return true;
else
return false;
}
function playFirst(size)
{
if(size%2!=0)
{
var tempNum=Math.floor(size*size/2)+1;
var id=new String('id'+tempNum);
if(isEmpty(id))
insert(myToken,id,size);
else
{
tempNum+=size+1;
id=new String('id'+tempNum);
insert(myToken,id,size);
}
}
else
{
var temp=max(digArr,0,size,"dig");
if(temp==1)
count=temp;
else
count=size;
for(var i=1; i<=size; i++)
{
var id=new String('id'+count);
if(isEmpty(id))
{
insert(myToken,id,size);
break;
}
if(temp==1)
count+=size+1;
else
count+=size-1;
}
}
}
function checkWin(size)
{
var myRowArr=new Array();
var myColArr=new Array();
var myDigArr=new Array();
var maxCount,count=0;
/* Building My Row Array */
for(var i=1; i<=size; i++)
{
maxCount=0;
for(var j=1; j<=size; j++)
{
count++;
var id=new String('id'+count);
if(!isEmpty(id))
if(document.getElementById(id).innerHTML==myToken)
maxCount++;
}
myRowArr[i]=maxCount;
}
/* Building My Column Array */
for(var i=1; i<=size; i++)
{
count=i;
maxCount=0;
for(var j=1; j<=size; j++)
{
var id=new String('id'+count);
if(!isEmpty(id))
{
if(document.getElementById(id).innerHTML==myToken)
maxCount++;
}
count+=size;
}
myColArr[i]=maxCount;
}
/* Building My Diagonal Array */
for(var i=1; i<=2; i++)
{
if(i==1)
count=i;
else
count=size;
maxCount=0;
for(var j=1; j<=size; j++)
{
var id=new String('id'+count);
if(!isEmpty(id))
{
if(document.getElementById(id).innerHTML==myToken)
maxCount++;
}
if(i==1)
count+=size+1;
else
count+=size-1;
}
myDigArr[i]=maxCount;
}
var myMaxRow=myMax(myRowArr,0,size);
var myMaxCol=myMax(myColArr,0,size);
var myMaxDig=myMax(myDigArr,0,size);
var myMaxArrs=new Array(-1,myMax(myRowArr,1,size),myMax(myColArr,1,size),myMax(myDigArr,1,size));
if(myMax(myMaxArrs,1,size)==size)
{
var blinkWho=myMax(myMaxArrs,0,size);
var blinkNum;
if(blinkWho==1)
blinkNum=myMaxRow;
if(blinkWho==2)
blinkNum=myMaxCol;
if(blinkWho==3)
blinkNum=myMaxDig;
blink(blinkWho,blinkNum,size,"#FF0000");
return true;
}
else
return false;
}
function myMax(arr,what,size)
{
var max=-1,maxIndex=-1;
for(var i=1; i<=size; i++)
{
if(arr[i] > max)
{
max=arr[i];
maxIndex=i;
}
}
if(what==0)
return(maxIndex);
else
return(max);
}
function blink(who,num,size,color)
{
var count;
if(who==1)
count=size*num-size+1;
if(who==2)
count=num;
if(who==3)
{
if(num==1)
count=num;
else
count=size;
}
for(var i=1; i<=size; i++)
{
var id=new String('id'+count);
document.getElementById(id).style.color=color;
if(who==1)
count++;
if(who==2)
count+=size;
if(who==3)
{
if(num==1)
count+=size+1;
else
count+=size-1;
}
}
}
/* Check if player wins */
function playerWin(size)
{
var maxRow=myMax(rowArr,0,size);
var maxCol=myMax(colArr,0,size);
var maxDig=myMax(digArr,0,size);
var maxArrs=new Array(-1,myMax(rowArr,1,size),myMax(colArr,1,size),myMax(digArr,1,size));
if(myMax(maxArrs,1,size)==size)
{
var blinkWho=myMax(maxArrs,0,size);
var blinkNum;
if(blinkWho==1)
blinkNum=maxRow;
if(blinkWho==2)
blinkNum=maxCol;
if(blinkWho==3)
blinkNum=maxDig;
blink(blinkWho,blinkNum,size,"#00FF00");
return true;
}
else
return false;
}
function doGen()
{
var puts;
var size=document.containerForm.slct.options[document.forms[0].slct.options.selectedIndex].value;
var pf=document.containerForm.slct_pf.options[document.forms[0].slct_pf.options.selectedIndex].value;
if(pf==0)
alert("Player plays first.");
if(pf==1)
{
alert("Computer plays first.");
meFirst=true;
}
if(pf=="none")
alert("Please select who plays first!");
if(size=="none")
alert("Please select a Board size!");
if((size=="other")&&(pf!="none"))
{
puts='<form name="form2"><span style="font-family:verdana,arial; font-size:10pt; color:#000000">Enter size (eg 7): </span> <input type="text" name="ip" class="ip"> <input type="button" onClick="resolveMove(document.form2.ip.value)" value="Play!" class="btn"></form>';
document.getElementById('container').innerHTML=puts;
}
if((size!="none")&&(size!="other")&&(pf!="none"))
resolveMove(size);
}
function resolveMove(size)
{
genBox(size,'container');
if(meFirst)
setTimeout("playFirst('"+size+"')",300);
}
</script>
<!-- END TIC-TAC-TOE JAVASCRIPT BY PREMSHREE PILLAI -->
<div id="container" align="center"><form name="containerForm"><table><tbody><tr><td><select name="slct"><option value="none" style="background: rgb(204, 204, 204) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">Select Board Size</option><option value="3" style="background: rgb(238, 238, 238) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">3 x 3</option><option value="4" style="background: rgb(204, 204, 204) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">4 x 4</option><option value="5" style="background: rgb(238, 238, 238) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">5 x 5</option><option value="other" style="background: rgb(204, 204, 204) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">Other Size</option></select></td><td><select name="slct_pf"><option value="none" style="background: rgb(204, 204, 204) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">Who plays first ?</option><option value="0" style="background: rgb(238, 238, 238) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">Player</option><option value="1" style="background: rgb(204, 204, 204) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">Computer</option></select></td><td><input class="btn" onclick="javascript:doGen()" value="Play!" type="button"></td></tr></tbody></table></form></div>
<br>
<table bgcolor="#000000" width="100%"><tbody><tr><td><span class="content_cpy">CopyRight 2002 Premshree Pillai. <a href="http://pub.alxnet.com/guestbook?id=2395118" class="link">Sign my Guestbook</a> | <a href="http://www.qiksearch.com/javascripts.htm" class="link">More JavaScripts</a></span></td></tr></tbody></table>
</td></tr></tbody></table>
<table align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" width="398"><tbody><tr><td></td></tr></tbody></table>
<table align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" width="396"><tbody><tr><td></td></tr></tbody></table>
</body></html>
tictactoe.zip( 18 k)Related examples in the same category