### Code for designing and developing a very famous game- Tic Tac Toe or say Simply Cross- zero game with the help of JavaScript

In this blog i am going to share a very interesting thing. Yes, you are right i am going to show you how we could make a game very easily with the help of JavaScript.

All of us have heard about this game and in our childhood days almost almost all of us had played Tic-Tac-Toe game or in simple words Cross-zero game. But now we'll play it on our PC and that too developed by ourselves. So you seems excited to develop it. You don't require to take any stress just copy and paste the whole code and start playing... :)

• First of all copy paste the whole JavaScript code inside the <head> tag given below ::

<script type="text/javascript">
//Simple Tic Tac Toe Game:
//board is a 3 by 3, two dimensional array of numbers.
board = new Array(new Array(0, 0, 0), new Array(0, 0, 0), new Array(0, 0, 0))

//integer points/values in board for user
var userSingle = 16         //each user's position is worth 16
var userDouble = 32         //two user positions in a run are 32
var usertriple = 48         //three user positions in a run is 48

//integer points/values in board for game
var gameSingle = 1         //each game's position is worth 1
var gameDouble = 2         //two game positions in a run is worth 2
var gametriple = 3         //three game positions in a run is worth 3
var lastMove = 0           //want to check last move user made on third move
var keepPlaying = false    //flag to stop user from adding to board when game is over

//points to rate and compare possible game moves
var toWin   = 9
var block   = 8
var twoWay  = 7
var run4   = 5
var run3   = 3
var run2   = 2

//assign an initial image to each marker - not really necessary here, see newGame()
var userMarker = "x.gif"
var gameMarker = "o.gif"

//clearBoard places a blank image in each square and sets each array value to 0
function clearBoard(){
for (var row=0; row < board.length; row++){
for (var col=0; col < board.length; col++){
board[row][col] = 0
document.images["i" + row + col].src = "blank.gif"
}
}
}

//starts a new game if userX, means the user gets X and goes first.
function newGame(userX){
clearBoard()
turn = 0
keepPlaying = true
if (userX){
userMarker = "x.gif"
gameMarker = "o.gif"
}
else{
userMarker = "o.gif"
gameMarker = "x.gif"
gameMove(1, 1)
}
}

//announce the end and set the keepPlaying flag to false
function gameOver(msg){
keepPlaying = false
}

//return an array with all the runs that go through the row, col position
//each slot in the array holds the sum of points in that run ie in the three squares in that run.
function getruns(row, col){
var runs = new Array()
var slot = 0
runs[slot++] = board[row] + board[row] + board[row]
runs[slot++] = board[col] + board[col] + board[col]
if (row == col){
runs[slot++] = board + board + board
}
if ((Math.abs(col - row) == 2) || (row == 1 && col == 1)){
runs[slot++] = board + board + board
}
return runs
}

//See if the user has won the game. If not return the highest run value.
//This is needed for responding to the third move.
function evaluateUserMove(row, col){
var maxValue = 0
var runs = getruns(row, col)
for (var i=0; i<runs.length; i++){
if (runs[i] == usertriple) return usertriple
if (runs[i] > maxValue) maxValue = runs[i]
}
return maxValue
}

//Look at all runs for a given open square.
//Return a rating for this square.
//Note that on the third move a special rating is required.
function evaluateMove(row, col){
var maxValue = 0
var nSingles = 0
var nUsers   = 0
var runs = getruns(row,col)
for (var i = 0; i < runs.length; i++){
if (runs[i] == userDouble) maxValue = block
if (runs[i] == gameSingle) nSingles++
if (runs[i] == userSingle) nUsers++
}
if (maxValue < block){
if (nSingles > 1){
maxValue = twoWay
}
else{
maxValue = runs.length
if ((turn == 3) && (runs.length == 2) && (lastMove == 33) && (board == gameSingle)) maxValue = 4
if ((turn == 3) && (nUsers == 2)) maxValue = 4
}
}
return maxValue
}

function makeBestMove(){
var value
var maxValue = 0
var maxRow
var maxCol
for (var row = 0; row < board.length; row++){
for (var col = 0; col < board.length; col++){
if (board[row][col] == 0){
value = evaluateMove(row,col)
if (value > maxValue){
maxValue = value
maxRow   = row
maxCol   = col
}
}
}
}
gameMove(maxRow, maxCol)
if (maxValue == toWin){
gameOver("You Lose!")
}
else{
if (turn == 9){
gameOver("Draw Game!")
}
}
}

function gameMove(row, col){
board[row][col] = gameSingle
document.images["i" + row + col].src = gameMarker
turn++
}

function userMove(row, col){
if (!keepPlaying){
if (userMarker == "x.gif"){
newGame(false)
return
}
else{
newGame(true)
return
}
}
if (board[row][col] != 0){
return
}
board[row][col] = userSingle
document.images["i" + row + col].src = userMarker
turn++
lastMove = evaluateUserMove(row, col)
if (usertriple == lastMove){
gameOver("You Win!")
}
else{
if (turn == 9){
gameOver("Draw Game!")
}
else{
makeBestMove()
}
}
}

</script>

• Now paste the whole code inside the <body> tag given below ::
<tr>
<td><a href="javascript:userMove(0,0)">
<img src="blank.gif" name="i00" border="0" width="50" height="50"></a>
</td>
<td><a href="javascript:userMove(0,1)">
<img src="blank.gif" name="i01" border="0" width="50" height="50"></a>
</td>
<td><a href="javascript:userMove(0,2)">
<img src="blank.gif" name="i02" border="0" width="50" height="50"></a>
</td>
</tr>
<tr>
<td><a href="javascript:userMove(1,0)">
<img src="blank.gif" name="i10" border="0" width="50" height="50"></a>
</td>
<td><a href="javascript:userMove(1,1)">
<img src="blank.gif" name="i11" border="0" width="50" height="50"></a>
</td>
<td><a href="javascript:userMove(1,2)">
<img src="blank.gif" name="i12" border="0" width="50" height="50"></a>
</td>
</tr>
<tr>
<td><a href="javascript:userMove(2,0)">
<img src="blank.gif" name="i20" border="0" width="50" height="50"></a>
</td>
<td><a href="javascript:userMove(2,1)">
<img src="blank.gif" name="i21" border="0" width="50" height="50"></a>
</td>
<td><a href="javascript:userMove(2,2)">
<img src="blank.gif" name="i22" border="0" width="50" height="50"></a>
</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="Play O" onClick="newGame(false)"> <input type="button" value="Play X" onClick="newGame(true)" ></td>
</tr>
</table>