
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Javascript Tic Tac Toe

Article by:

Premshree Pillai (10/10/2002)

	Add to Favourites
	Tell a friend

Sponsored by:

Neil Matthews Hypnotherapy, Wilmslow

Summary:

Play against the computer and learn a crafty bit of Javascript with this simple game.

Viewed: 27322 times

Rating (375 votes):

5 out of 5

Rate this Article

Read Comments

Post Comments

Javascript Tic Tac Toe

View Online Demo
Download Project (11KB)

The game is written in JavaScript and works with IE 5+/NS 6+.

The Rules of the game are simple :You win if you get a complete row or complete column or any complete diagonal.

The game has been written in such a way that, the computer always tries to block the player's path. This is how the Game works :

First select who plays first. When the computer plays it's first move, it tries to place its token("0") in a diagonal position. In the course of the game, the computer analyses the number of rows, columns and diagonals with maximum number of the player's token("1"). If the computer already has a token in a particular row/column/diagonal, it gives that particular row/column/diagonal a low preference.

Thus it analyses the row/column/diagonal with maximum player's token and then places it's token in one of the empty spaces in that row/column/diagonal. A row/column/diagonal which is full is given low preference.

We'll put the main javascript here on the page, but to experiment with the entire project, we recommend downloading the zip file above and seeing how the various elements interweave.

Select All Code

/////////////////////////////////////////////////////////////////
//
//    Tic-Tac-Toe JavaScript
//    By Premshree Pillai
//    Created : 04/10/02 (dd/mm/yy)
//    Web : http://www.qiksearch.com
//          http://javascript.qik.cjb.net
//    
//    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.
//
//    © 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;
    meFirst=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)
            move(size);
    }
    else
        alert('You cannot insert here!');
    if((drawCounter==size*size)&&!lostFlag)
    {
        alert('It\'s a Draw!!!');
        if(confirm("Do you want to play again ?"))
        {
            flush();
            genBox(size,'container');
        }
        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();
            genBox(size,'container');
        }
        else
            document.getElementById('container').innerHTML=_def_exit_msg;
        lostFlag=false;
    }
    else
    {
        if(checkWin(size))
        {
            alert('OOPS! You lost!!!');
            if(confirm("Do you want to play again ?"))
            {
                flush();
                genBox(size,'container');
            }
            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);
}

Useful Links

Affordable Windows Hosting

Reseller Hosting

Web+Hosting=$1.66

Web Hosting

Hosting

Windows Hosting

Web Hosting Providers

Cheap Hosting

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'Javascript Tic Tac Toe'

Posted by : Archive Import (Priscilla Molina) at 19:52 on Sunday, November 17, 2002

It's very good!!

Posted by : Archive Import (Jan) at 13:16 on Sunday, December 22, 2002

Thanks for the game, I love it. Its just what I have been looking for my site.

Posted by : Archive Import (rylon) at 12:43 on Friday, May 09, 2003

can sum1 send it to me where i dont have to take out or enter stuff i am useing geocities pagebuilder(i im 14 trying to learn how to make a cool site for my friends)

Posted by : Archive Import (Dan) at 05:18 on Tuesday, July 29, 2003

If you select centre, centre top, top right, centre right you win every time!

Posted by : k111 at 14:31 on Friday, January 16, 2004

i cant make it work in "Ready to Program" which i need it to work for my assignment...can u help me??

To post comments you need to become a member. If you are already a member, please log in .

Recent Forum Threads

•	Re: Insert Contents of .txt file into a .html page
•	Re: Perl regular expression problem.
•	Re: Problems in login using WWW::Mechanize
•	searching for gd::graph guide
•	Re: ARRAY OF HASHMAPS
•	Adv. Regexp or Otherwise
•	Adv. Regexp or Otherwise
•	I need help pleasee! My project is about using I/o Stream
•	Help Running VB script in Windows 2003

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article