Programming Projects

Welcome to the Land of Programming Projects

This site hosts projects related to C, C++, .NET, PHP, MYSQL, Javascript and other programming languages.


Project Title: Tic Tac Toe (Game) In Javascript

Description: This project is about a game known as Tic Tac Toe. The game is played between a human user and computer. The computer plays Tic Tac Toe game intelligently, and its not easy to beat it, especially in hard level. Copy the Tic Tac Toe code, save in notepad or any other editor that you like with .html extension and run it in you browser.

Difficulty: Hard

Language: HTML, Javascript (js)

Compiler: NA

View Source

 

<HTML> 
<HEAD> 
        <TITLE>Tic Tac Toe</TITLE> 
<script language = javascript> 
var myPointer, urPointer
var gameStart = false
var gameLevel
var status = 1
var startStatus = true
 
mat = new Array(3)
for (i = 0; i <mat.length; i++ )
   mat[i] = new Array(3)
 
for (i = 0; i< mat.length; i++ )
{
	for (j = 0; j< mat[i].length; j++ )
		mat[i][j] = 0
 
}
 
function startIt()
{
  gameStart = true
  if (startStatus !=  true)
  { 
	alert("press clear button first")
	return	
  }
 if ( document.f1.pointer[0].checked == true )
 {
	urPointer = "   x   "
	myPointer = "   0   "
 }
 else 
 {
	urPointer = "   0   "
	myPointer = "   x   "	
 }
 
  if (document.f1.turn[1].checked == true)
 	randomMoves(2)
 
 
  if (document.f1.level[0].checked == true)
	gameLevel =0
  else if  (document.f1.level[1].checked == true)
	gameLevel = 1
  else if  (document.f1.level[2].checked == true)
	gameLevel = 2

  document.f1.pointer[0].disabled =true
  document.f1.pointer[1].disabled =true

  document.f1.turn[0].disabled =true
  document.f1.turn[1].disabled =true

  document.f1.level[0].disabled =true
  document.f1.level[1].disabled =true
  document.f1.level[2].disabled =true 
}
 
function getInput(row, col)
{
  
    if (status == 0)
  {	
	alert("This game has ended. To start a new game, press clear, then start")
	return 0;
  }

  if (gameStart == false)
  {
	alert("Press start button to play the game")
	return
 
  }
 


  if ( IsIndexEmpty(row,col) == false ) {
	alert("This move is already taken")
	return
  }	
  
  display(row,col, urPointer)
  mat[row][col] = 1
   
    if (winningConditions(1) ==true ) {
	alert("You win!")
	status = 0
	startStatus = false
	return
    }
 
    if (IsGameOver()== true) {
	alert('Game ended in a draw')	
	status = 0 
	startStatus = false
	return
    }

  myMoves()
    if (winningConditions(2) ==true ) {
	alert('you Lose!')
	status = 0
	startStatus = false
	return
    }
 
    if (IsGameOver()== true) {
	alert("Game ended in a draw")
	status = 0 
	return
    }
   
}
 
function display(row,col, p)
{
        if (row == 0 && col == 0)
	document.f1.b00.value = p
else if (row == 0 && col == 1)
	document.f1.b01.value = p
else if (row == 0 && col == 2)
	document.f1.b02.value = p
else if (row == 1 && col == 0)
	document.f1.b10.value = p
else if (row == 1 && col == 1)
	document.f1.b11.value = p
else if (row == 1 && col == 2)
	document.f1.b12.value = p
else if (row == 2 && col == 0)
	document.f1.b20.value = p
else if (row == 2 && col == 1)
	document.f1.b21.value = p
else if (row == 2 && col == 2) 
	document.f1.b22.value =p
}
 
function IsIndexEmpty(row,col)
{
	if ( mat[row][col] != 0 )
		return false
	else
		return true
}
 
function winningConditions(val)
{
           if (mat[0][0] == val && mat[0][1] == val && mat[0][2] ==val)
	return true
    else  if (mat[1][0] == val && mat[1][1] == val && mat[1][2] ==val)
	return true
    else  if (mat[2][0] == val && mat[2][1] == val && mat[2][2] ==val)
	return true
    else  if (mat[0][0] == val && mat[1][0] == val && mat[2][0] ==val)
	return true   
    else  if (mat[0][1] == val && mat[1][1] == val && mat[2][1] ==val)
	return true
    else  if (mat[0][2] == val && mat[1][2] == val && mat[2][2] ==val)
	return true
    else  if (mat[0][0] == val && mat[1][1] == val && mat[2][2] ==val)
	return true
    else  if (mat[0][2] == val && mat[1][1] == val && mat[2][0] ==val)
 	return true
   else
	return false
}
 
function IsGameOver()
{
  for (i = 0; i< mat.length; i++ )
  {
	for (j = 0; j< mat[i].length; j++ )
	{
		if (mat[i][j] != 1 && mat[i][j] != 2 )
			return false
	}
 
  }
 return true
}
 
function myMoves()
{ 
  if (gameLevel == 0)
  {
	randomMoves(2)
	return
  }	
  var bool = true
	  bool =  artificialIntelligence1(2,2)    
  if (bool == true)
	return
 
	  bool =  artificialIntelligence2(2,2)   
  if (bool == true)
	return
 
  	  bool =  artificialIntelligence3(2,2)    
  if (bool == true)
	return
 
  	  bool =  artificialIntelligence4(2,2)    
  if (bool ==true)
	return
 
 
	   bool =  artificialIntelligence1(2,1)    
  if (bool == true)
	return
 
	  bool =  artificialIntelligence2(2,1)    
  if (bool == true)
	return
  	  bool =  artificialIntelligence3(2,1)    
  if (bool == true)
	return
 
  	  bool =  artificialIntelligence4(2,1)    
  if (bool == true)
	return  
 
  if (gameLevel ==1 )
  {
	randomMoves(2)
	return
  }
  	bool = otherMoves(2,1)
  if (bool ==true)
	return
 
  randomMoves(2)
  	
}
 
function artificialIntelligence1(myP, urP)  //p for pointer: myp = 2, urp = 1
{
  var count = 0
  for (i = 0; i< mat.length; i++)
  {
	for (j = 0; j< mat[i].length; j++ )
	{
		if (mat[i][j] == urP )
			count++
	}
	if (count > 1) 
	{
		for (j = 0; j< mat[i].length; j++ )
		{
			if (IsIndexEmpty(i,j) == true)
			{	mat[i][j] = myP
				display(i,j,myPointer)
				return true
			}
		}
 
	}
	count = 0
  }
  return false
 
}
 
function artificialIntelligence2(myP, urP)    
{
  var count = 0
  for (i = 0; i< mat.length; i++)
  {
	for (j = 0; j< mat[i].length; j++ )
	{
		if (mat[j][i] == urP )
			count++
	}
	if (count > 1) 
	{ 
		for (j = 0; j< mat[i].length; j++ )
		{
			if (IsIndexEmpty(j,i) == true)
			{	mat[j][i] = myP
				display(j, i, myPointer)
				return true
			}
		}
 
	}
	count = 0
  }
  return false
}
 
function artificialIntelligence3(myP, urP)    
{
  var count  = 0
  for (i =0; i< mat.length; i++ ) 
  {
	if (mat[i][i] == urP)
		count++
  }
 
  if (count > 1)
  { 
	for (i = 0; i<mat.length; i++ )
	{
		if (IsIndexEmpty(i,i) ==true)
		{              
			mat[i][i] = myP
			display(i,i,myPointer)
			return true
		}
 
	}
 
  }
  return false
 
}
 
function artificialIntelligence4(myP, urP)    
{
  var count = 0
  var j = 2
 
  for (i = 0; i<mat.length; i++ )
  {  
	if (mat[i][j] == urP)
		count++
	j--
 
  }	
 
  if (count > 1)
  {	
	  var j = 2
	  for (i = 0; i<mat.length; i++ )
	  {
		if (IsIndexEmpty(i,j) ==true)
		{
			mat[i][j] = myP
			display(i,j,myPointer)
			return true
		}
		j--
 
	  }
  }
return false
 
}
 
function otherMoves(myP, urP)
{
	
  if (IsIndexEmpty(1,1) == true)
  {
	mat[1][1] = myP
	display(1,1,myPointer)
	return true
  }	
  
 
  if (mat[1][1] == urP)
  {	
	row = Math.floor(Math.random() * 2)  * 2 //produces a rnd num of 0,2
 	col =  Math.floor(Math.random() * 2) * 2
	if (IsIndexEmpty(row,col) == true)
	{
		mat[row][col] = myP
		display(row,col, myPointer)
		return true
	}	
		
  }	

return false
 
}

 
function randomMoves(myP)
{  
  
  row = Math.floor(Math.random() * 3)
  col =  Math.floor(Math.random() * 3)
  while (IsIndexEmpty(row,col) != true)
  { 
	  row = Math.floor(Math.random() * 3)
	  col =  Math.floor(Math.random() * 3)
  }
	mat[row][col] = myP
	display(row,col,myPointer)
}
 
function clearMatrix()
{

  document.f1.pointer[0].disabled =false
  document.f1.pointer[1].disabled =false

  document.f1.turn[0].disabled =false
  document.f1.turn[1].disabled =false

  document.f1.level[0].disabled =false
  document.f1.level[1].disabled =false
  document.f1.level[2].disabled =false

  status = 1
  startStatus = true
  gameStart = false

  for (i = 0; i< mat.length; i++ )
  {
	for (j = 0; j< mat[i].length; j++ )
		mat[i][j] = 0
  }

  document.f1.b00.value = "        "
  document.f1.b01.value = "        "
  document.f1.b02.value = "        "
  document.f1.b10.value = "        "
  document.f1.b11.value = "        "
  document.f1.b12.value = "        "
  document.f1.b20.value = "        "
  document.f1.b21.value = "        "
  document.f1.b22.value = "        "
}

 
</script> 
</HEAD> 
<BODY> 
 
 
<form name = f1> 
 
<b>Choose your pointer  </b><BR>  <input type = radio name = "pointer"
 value = "x"  checked>x
 
<input type = radio name = "pointer" value = "0" >0 <P> 
 
<b>Wanna play first or second? </b> <BR> 
<input type = radio name = turn checked>first
<input type = radio name = turn > second<P> 
 
<b>Choose your playing level </b> <BR> <input type = radio name = level>easy
 <input type = radio name = level checked>medium
 <input type = radio name = level>hard <P> 
 
<input type = button name = bstart value = "  start  " onclick = startIt()> 
<input type = button name = bclear value = "  clear " onclick = clearMatrix()> 
 
 
<center> 
<input type = button name = b00 value = "        " onclick = getInput(0,0) > 
<input type = button name = b01 value = "        " onclick = getInput(0,1) > 
<input type = button name = b02 value = "        " onclick = getInput(0,2) ><BR> 
<input type = button name = b10 value = "        " onclick = getInput(1,0) > 
<input type = button name = b11 value = "        " onclick = getInput(1,1) > 
<input type = button name = b12 value = "        " onclick = getInput(1,2) ><BR> 
<input type = button name = b20 value = "        " onclick = getInput(2,0) > 
<input type = button name = b21 value = "        " onclick = getInput(2,1) > 
<input type = button name = b22 value = "        " onclick = getInput(2,2) ><BR> 
</center> 
 
</form> 
 
 
</BODY> 
</HTML> 
 
 
	   


Notes: Frightened by the length of the code? Well the Tic Tac Toe deserves some code, after all its an intelligent game. Lets break it down.

The project displays a simple HTML form where you can choose among several options. Thats plain HTML and we will not go into its details. When "start" button is pressed, the program waits for user input(if user wishes to play first, otherwise computer makes the first move). When user makes his move, we call a simple function "getInput" , that displays the user input on the page. Behind the scene, every move is stored in a 3 * 3 Matrix, thus the program marks an entry in this matrix for the current user move. The computer then responds to this move. This process continues until either user or computer wins or game ends in a draw.

After each move, Tic Tac Toe checks for winning conditions and game drawn conditions, thats simply checking our matrix to see if we have got any combination for winning or in case of game draw, if the matrix is full (remember, at the start of the game, the matrix is empty).

"myMoves (aka, the computer moves)" , is where comes the intelligence of the machine. Regarding intelligence, If you think that computer thinks before making a move, you need to reconsider your thinking. In terms of this game, computer intelligence simply means that it scans the matrix to see any combination that would result in user win. If such combination is found, the computer makes its move accordingly. Tic Tac Toe game provides four functions for "artificialIntelligence" that scan the matrix rowwise, columnwise, right diagonal and left diagonal each. Not that if game level "easy" is selected, the program doesn't call intelligent functions; rather it makes random moves. In that case, the computer acts as a real dumb and idiot machine.