Add Tic-Tac-Toe To a Webpage


tic tac toeLet your visitors play Tic-Tac-Toe game on your Blogspot/blogger blogs! We created and played with tons of widgets and plugins now its time to add some spice to your normal work. Engaging readers in an interactive activity like a game will help decreasing down your page bounce rate and will also provide fun to your regular readers or blog visitors. I cam across a simple javascript that uses array to program a simple tictactoe game where a visitor can play with computer bot. The consists of a total four levels with increasing difficulty level. The game uses artificial intelligence to guess important moves to knock a player down. The scores are saved for each level and the total number of wins and draws are recorded for both the computer player and your visitor. I guess this would surely be welcomed by all your visitors. :p

Live Demo

I have edited the codes and this code is working fine both with HTML/Javascript widget and blogger post editor. The installation process is extremely simple.

How to install Tic-Tac-Toe on Blogger?

We simple need to paste a large chunk of code inside the editor in order to embede the game inside a website or webpage.

  1. Go to Blogger > Create New Post
  2. Give your Post a title
  3. Add the following code inside the Edit HTML section of your blogger post editor

<script language="javascript">
<!--Brought to you by www.mybloggertricks.com -->

//Tic Tac Toe- By Brian (http://scriptasylum.com/bgaudiodr/)
//Modified by Yossi Cohen (yossi@prosite.co.il)
//Featured on Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

var image1=new Image(); image1.src="http://2.bp.blogspot.com/-0bwll3cd88g/TmPKLohO_oI/AAAAAAAAE7g/jf-wkoNlEcc/s400/ex.gif";
var image2=new Image(); image2.src="http://1.bp.blogspot.com/-KYUR0umrPnk/TmPKL6jcCQI/AAAAAAAAE7w/2TP3aHzPwzw/s400/oh.gif";

var level=1, myway, mynextmove;
var tmp, done, iswon, content;
var pcwins=[0,0,0,0];
var playerwins=[0,0,0,0];
var draws=[0,0,0,0];
var playerstarts=true;
var moves=new Array();
var game=new Array(9);
var choices=[11,12,13,21,22,23,31,32,33];
var corners=[11,13,31,33];
var ways=new Array();
ways[1]=[0,11,12,13];
ways[2]=[0,21,22,23];
ways[3]=[0,31,32,33];
ways[4]=[0,11,21,31];
ways[5]=[0,12,22,32];
ways[6]=[0,13,23,33];
ways[7]=[0,11,22,33];
ways[8]=[0,13,22,31];
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

function init(){
oktoplay=true;
iswon=false;
done=0;
writetext(4);
moves[11]=0; moves[12]=0; moves[13]=0; moves[21]=0; moves[22]=0; moves[23]=0; moves[31]=0; moves[32]=0; moves[33]=0;
for(i=0;i<=8;i++){
document.images['rc'+choices[i]].src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif";
document.images['rc'+choices[i]].alt="";
game[i]=0;
}
if(!playerstarts)pcturn();
}

function writetext(num){
switch(num){
case 1: content='This game is a draw';
break;
case 2: content='The computer won this round.';
break;
case 3: content='You won this round.';
break;
case 4: content='LEVEL: '+level+'\n\nComputer Wins:  This level- '+pcwins[level]+'  (Total: '+(pcwins[0]+pcwins[1]+pcwins[2]+pcwins[3])+')\nPlayer Wins  :  This level- '+playerwins[level]+'  (Total: '+(playerwins[0]+playerwins[1]+playerwins[2]+playerwins[3])+')\nDraws        :  This level- '+draws[level]+'  (Total: '+(draws[0]+draws[1]+draws[2]+draws[3])+')';
break;
}

document.scores.scores2.value=content

if(num<4)setTimeout('init(4)',1000);
}

function setlevel(x){
    if (level!=x){
        level=x;
        init();
}}

function setbutton(cellnum){
if (!iswon){             // Thanks to Roger for finding this Bug !!!
if(moves[cellnum]==0){
document.images['rc'+cellnum].src="http://2.bp.blogspot.com/-0bwll3cd88g/TmPKLohO_oI/AAAAAAAAE7g/jf-wkoNlEcc/s400/ex.gif";
document.images['rc'+cellnum].alt=" X ";
moves[cellnum]=1;
game[done]=cellnum;
done++;
findwinner(true);
}else alert('You cannot move here!');
}}

function pcstrategy(istowin){
if (level>0){
var str=(istowin)? 2 : 1;
for(n=1;n<=8;n++){
if((moves[ways[n][1]]==str) && (moves[ways[n][2]]==str) && (moves[ways[n][3]]==0)) tmp=ways[n][3];
if((moves[ways[n][1]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][2]]==0)) tmp=ways[n][2];
if((moves[ways[n][2]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][1]]==0)) tmp=ways[n][1];
}}}


function selecCorner(which){
if (which=="empty"){
do{
tmp=corners[Math.floor(Math.random()*4)];
}while(moves[tmp]!=0);
}
else
tmp=corners[Math.floor(Math.random()*4)];
}


function pcdontlose(){
if (!playerstarts){
if (done==0){
tmp=choices[2*Math.floor(Math.random()*5)];
if (tmp==22) myway=1;
else myway=2;
}
else if (done==2){
if (myway==1){
if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33)
tmp=44-game[1];   
else{
dlta=22-game[1];
op0=22+dlta+(10/dlta);
op1=22+dlta-(10/dlta);
tmp=eval("op"+Math.floor(Math.random()*2));
}}
else if (myway==2){
if (game[1]==22){
tmp=44-game[0];
myway=21;
}
else if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33){
selecCorner("empty");
myway=22;
}
else{
tmp=22;
myway=23;
}}}
else if (done==4){
if (myway==22){
for (i=0; i<4 ;i++){           
if (moves[corners[i]]==0){
tmp=corners[i];
}}}
else if (myway==23){
dlta=game[1]-game[0];
op0=44-(game[1]+dlta);
op1=(op0+game[0])/2;
tmp=eval("op"+Math.floor(Math.random()*2));
}
else if (myway==1)
tmp=44+game[2]-(2*game[3]);
}}
else if (level==3){
if (done==1){
if (game[0]==11 || game[0]==13 || game[0]==31 || game[0]==33){
tmp=22;
myway=1;
}
else if (game[0]==22){
selecCorner("any");
myway=2;
}
else{
tmp=22;
myway=3;
}}
else if (done==3){
if (myway==1){
if (game[2]==44-game[0])
tmp=choices[1+(2*Math.floor(Math.random()*4))];
else
tmp=44-game[0]
}
else if (myway==2){
if (game[2]==44-game[1])
selecCorner("empty");
}
else if (myway==3){
if (game[2]==11 || game[2]==13 || game[2]==31 || game[2]==33)
tmp=44-game[2];
if (game[2]==44-game[0]){
dlta=22-game[2];
tmp=22+(10/dlta);
mynextmove=tmp+dlta;
}
else{
dlta=22-game[0];
op0=game[0]+(10/dlta);   
op1=game[0]-(10/dlta);   
op2=game[2]+dlta;   
tmp=eval("op"+Math.floor(Math.random()*3));
}}}
else if (done==5 && myway==3){
tmp=mynextmove;
}}}


function findwinner(isplayer){
me=(isplayer)? 1 : 2;
for(n=1;n<=8;n++){
if( (moves[ways[n][1]]==me) && (moves[ways[n][2]]==me) && (moves[ways[n][3]]==me) ){
iswon=true;
break;
}}
if(iswon){
if(isplayer){
playerwins[level]++;
playerstarts=true;
writetext(3);
}else{
pcwins[level]++;
playerstarts=false;
writetext(2);
}}else{
if(done>8){
draws[level]++;
playerstarts=!playerstarts;
writetext(1);
}else if(isplayer) pcturn();
}}

function pcrandom(){
do{
tmp=choices[Math.floor(Math.random()*9)];
}while(moves[tmp]!=0);
}

function pcturn(){
tmp='00';
pcstrategy(true);
if(tmp=='00')pcstrategy(false);
if(tmp=='00' && level>1)
    pcdontlose();
if(tmp=='00')
    pcrandom();
moves[tmp]=2;
game[done]=tmp;
document.images['rc'+tmp].src="http://1.bp.blogspot.com/-KYUR0umrPnk/TmPKL6jcCQI/AAAAAAAAE7w/2TP3aHzPwzw/s400/oh.gif";
document.images['rc'+tmp].alt=" O ";
done++;
findwinner(false);
}

window.onload=init;

window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
}

<!--Brought to you by www.mybloggertricks.com-->
</script>


<table cellpadding="0" cellspacing="0" border="5" bordercolor="black" bordercolorlight="gray" bgcolor="white"><tr>
<td width="55"><a href="javascript:setbutton(11)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc11"></a></td>
<td width="55"><a href="javascript:setbutton(12)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc12"></a></td>
<td width="55"><a href="javascript:setbutton(13)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc13"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(21)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc21"></a></td>
<td width="55"><a href="javascript:setbutton(22)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc22"></a></td>
<td width="55"><a href="javascript:setbutton(23)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc23"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(31)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc31"></a></td>
<td width="55"><a href="javascript:setbutton(32)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc32"></a></td>
<td width="55"><a href="javascript:setbutton(33)"><img src="http://4.bp.blogspot.com/-AvgxeOIK0FU/TmPKLxjDZpI/AAAAAAAAE7o/ATKe1Qt6p-I/s400/nothing.gif" border="0" name="rc33"></a></td>
</tr></table><br>

<form name="scores"><textarea name="scores2" cols="60" rows="6" ></textarea>

<br><br>
<input type="radio" name="level" id="level" onclick="setlevel(0)">level 0 --  the Computer is totally dumb. <br>
<input type="radio" name="level" id="level" onclick="setlevel(1)" checked>level 1 --  Computer is smarter (original version). <br>
<input type="radio" name="level" id="level" onclick="setlevel(2)">level 2 --  You MAY win (only when you start). <br>
<input type="radio" name="level" id="level" onclick="setlevel(3)">level 3 --  Computer NEVER lose. <br>

</form>

 

    4.   Publish your post and you are all done!

If you wish to add this game inside a blogger widget then go to Design > Page Elements and choose a HTML/JavaScript widget and paste the code above inside it. Save and Done!

Do let me know if you need my help. Please Like it or +1'd in order to share this beautiful game with your friends. Peace. :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

11 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Thanks Buddy Nice Keep It Up Helped A Lot

    ReplyDelete
  2. Nice game , i lose 2 and draw 3 hahahaah

    ReplyDelete
  3. I love it. I put into my collumn and it fit great but the box with the scores goes out of the margin ...how can I change the width?

    ReplyDelete
  4. Really awesome playing xperience on my blog..http://pingstuff.blogspot.com/.
    I hope u'd provide some more interesting games brer..danq soooo much

    ReplyDelete
  5. @Varinder
    Welcomed varinder. :)

    @Faiz
    Dude try level3 and you will realize that none of our school tactics is helping us here. :P

    @Mathew
    Where it says textarea name="scores2" cols="60" rows="6"
    Reduce the number of columns to something less than 60. i.e to adjust width reduce cols="60"


    @ELITIST
    My pleasure brother. :)

    ReplyDelete
  6. I have a problem with the code when i try to publish on one post it show me this error.

    Your HTML cannot be accepted: Tag is broken: BR

    any idea of what happen?

    ReplyDelete
  7. @TheMex
    Use blogger.com and not draft.blogger.com.

    In your post editor click "Post options"
    Then choose
    Press "Enter" for line breaks

    and also choose
    Show HTML literally

    It will work just fine then.

    ReplyDelete
  8. thanks but i already make it work it's strange because it only work when i pusblished the post by using google in draft.

    ReplyDelete
  9. explain this line document.scores.scores2.value

    ReplyDelete
  10. Nice thanks youuuuuuuu, my games website coming :)

    http://www.jupstream.net/

    ReplyDelete