Untitled

<!--TicTacToe by Maruthi Ayyappan-->
<html>
<head><title></title></head>
<!--Calling the below function-->
<body onload="javascript: drawboard();">
<canvas width="425" height="425" id="board" onclick="javascript: handleclick(event);"></canvas>
<script>

var boardX = 0;
var boardO = 0;
var begin = true;
var content;
var width, height;

<!--Overview of the Board-->

function drawboard() {
   var board = document.getElementById('board');

   width = board.width;
   height = board.height;
   content = board.getContext('2d');

   content.beginPath();
   content.strokeStyle = '#362626';
   content.lineWidth   = 3;

   content.moveTo((width / 3), 0);
   content.lineTo((width / 3), height);

   content.moveTo((width / 3) * 2, 0);
   content.lineTo((width / 3) * 2, height);

   content.moveTo(0, (height / 3));
   content.lineTo(width, (height / 3));

   content.moveTo(0, (height / 3) * 2);
   content.lineTo(width, (height / 3) * 2);

   content.stroke();
   content.closePath();

  <!--Random Start for 'X' or 'O'-->

   if (begin) {
      var init = Math.abs(Math.floor(Math.random() * 9 - 0.1));
      markBit(1 << init, 'O');
      begin = false;
   } else {
      begin = true;
   }
}

  <!--Check winner 'X' or 'O'-->

function wincheck(board) {

   var result = false;

   if (((board | 0x1C0) == board) || ((board | 0x38 ) == board) ||
	((board | 0x7) == board) || ((board | 0x124) == board) ||
	((board | 0x92) == board) || ((board | 0x49) == board) ||
	((board | 0x111) == board) || ((board | 0x54) == board)) {

	result = true;
   }
   return result;
}

  <!--Print 'X' in the box-->

function paintX(x, y) {

   content.beginPath();

   content.strokeStyle = '#f40d0d';
   content.lineWidth   = 3;

   var Xoffset = (width / 3) * 0.1;
   var Yoffset = (height / 3) * 0.1;

   var beginX = x * (width / 3) + Xoffset;
   var beginY = y * (height / 3) + Yoffset;

   var endX = (x + 1) * (width / 3) - Xoffset * 2;
   var endY = (y + 1) * (height / 3) - Yoffset * 2;

   content.moveTo(beginX, beginY);
   content.lineTo(endX, endY);

   content.moveTo(beginX, endY);
   content.lineTo(endX, beginY);

   content.stroke();
   content.closePath();
}

  <!--Print 'O' in the box-->

function paintO(x, y) {

   content.beginPath();

   content.strokeStyle = '#0303db';
   content.lineWidth   = 3;

   var Xoffset = (width / 3) * 0.1;
   var Yoffset = (height / 3) * 0.1;

   var beginX = x * (width / 3) + Xoffset;
   var beginY = y * (height / 3) + Yoffset;

   var endX = (x + 1) * (width / 3) - Xoffset * 2;
   var endY = (y + 1) * (height / 3) - Yoffset * 2;

   content.arc(beginX + ((endX - beginX) / 2), beginY + ((endY - beginY) / 2), (endX - beginX) / 2 , 0, Math.PI * 2, true);

   content.stroke();
   content.closePath();
}

  <!--Alternate 'X" and 'O' for UI-->

function handleclick(e) {

    var i = Math.floor(e.clientY / (height / 3));
    var j =  Math.floor(e.clientX / (width/ 3));

    var bit =  (1 << j + ( i * 3 ));

    if (isEmpty(boardX, boardO, bit)) {

	markBit(bit, 'X')

        if (!checkNobody())  {
		if (wincheck(boardX)) {

		    alert('You win!!');
		    restart();

		} else {

	     	   play();
		   if (!checkNobody()) {

		       if (wincheck(boardO)) {
			   alert('Loser!!');
			   restart();
		        }
		    }
	 	}
	   }
     }
}

  <!--Check Winner (draw game)-->

function checkNobody(){
   if ((boardX | boardO) == 0x1FF) {
       alert('Nobody won!!');
       restart();
       return true;
   }
   return false;
}

function restart() {
   content.clearRect (0, 0, width , height);
   boardX = 0;
   boardO = 0;
   drawboard();
}

function isEmpty(boardX, boardO, bit) {
   return (((boardX & bit) == 0) && ((boardO & bit) == 0));
}

function simulate(boardO, boardX) {

   var ratio = 0;

   var bit = 0;
   for (var i= 0; i < 9; i++) {

        var cBit = 1 << i;

	if (isEmpty(boardX, boardO, cBit)) {

           if (wincheck(boardO | cBit)) {
	      bit = cBit;
              break;
	   } else if (wincheck(boardX | cBit)) {
	      bit = cBit;
	   }
	}
   }

   if (bit == 0) {
      for (var i= 0; i < 9; i++) {
	  var cBit = 1 << i;

	  if (isEmpty(boardX, boardO, cBit)) {
	      var result = think(boardO, boardX, 'X', 0, 1)
	      if (ratio == 0 || ratio < result) {
	         ratio = result;
	         bit = cBit;
	      }
	   }
       }
   }
   return bit;
}

  <!-- Try to stop three 'X' or 'O' -->


function think(boardO, boardX, player, bit, ratio) {

   if (player == 'O') {
	boardO = boardO | bit;
   } else {
	boardX = boardX | bit;
   }

   if (wincheck(boardO)) {
      ratio *= 1.1;
      return ratio;

   } else if (wincheck(boardX)) {

      ratio *= 0.7;
      return ratio;

   } else {
	var best = 0;
	ratio *= 0.6;

	for (var j= 0; j < 9; j++) {

	   if (isEmpty(boardX, boardO, 1 << j)) {

               var newRatio = think(boardO, boardX, player == 'O' ? 'X' : 'O', 1 << j, ratio);

               if (best == 0 || best < newRatio) {
		  best = newRatio;
               }
	  }
 	}

	return best;
   }
}

function markBit(markBit, player) {

   var bit = 1;
   var Xpos = 0, Ypos = 0;

   while ((markBit & bit) == 0) {
	bit = bit << 1;
        Xpos++;
	if (Xpos > 2) {
            Xpos = 0;
            Ypos++;
        }
   }

    if (player == 'O') {
        boardO = boardO | bit;
	paintO(Xpos, Ypos);
    } else {
        boardX = boardX | bit;
	paintX(Xpos, Ypos);
    }
}

function play() {
   var bestBit = simulate(boardO, boardX);
   markBit(bestBit, 'O');

}
</script>
</body>
</html>