Tic tac toe : Game « Page Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » 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>

           
       
tictactoe.zip( 18 k)
Related examples in the same category
1. Chess: Draughts
2. Mine game
3. Word search game
4. Ranisima english
5. Yasminuroban (by Joan Alba Maldonado)
6. Level editor for Yasminuroban by Joan Alba Maldonado
7. js mine sweeper
8. Another tictactoe
9. Marbles
10. Jigsaw
11. Game sudoku
12. Game PunkPong
13. Tetris in Javascript
14. Arrange Game
15. Guess Number
16. Count Game
17.  A JavaScript Hangman Game
18. Game library
19. Type Tutor
20. Game: Place It (IE only)
21. HylZee
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.