Tic tac toe : Game : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Game »

 

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> 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</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</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</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>

           
       

Download : Download nav_tictactoe.zip nav_tictactoe.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Game