Monday, January 26, 2015

Developing a basic Tic Tac Toe game using buttons - Javascript Programming

Hi everyone, I have developed a very basic Tic-Tac-Toe game using Javascript. It was developed for fun. For a beginner, this post will be a great boost to learn Javascript programming. In this game, I have used 9 buttons. The programming and working video of this game is shown below....


Video Description:

Winning Logic for 'X' : There are 8 set of rules for logic for 'X'. The set of rules are placed inside a function called xwin(). The function with the set of rules are given below

function xwin(){
if(first.value=='x' && second.value=='x' && third.value=='x') alert("Player X has won!")
if(first.value=='x' && fourth.value=='x' && seventh.value=='x') alert("Player X has won!")
if(first.value=='x' && fifth.value=='x' && ninth.value=='x') alert("Player X has won!")
if(second.value=='x' && fifth.value=='x' && eighth.value=='x') alert("Player X has won!")
if(third.value=='x' && sixth.value=='x' && ninth.value=='x') alert("Player X has won!")
if(third.value=='x' && fifth.value=='x' && seventh.value=='x') alert("Player X has won!")
if(fourth.value=='x' && fifth.value=='x' && sixth.value=='x') alert("Player X has won!")
if(seventh.value=='x' && ninth.value=='x' && eighth.value=='x') alert("Player X has won!")
}

Winning Logic for 'O' : There are again 8 set of rules for logic for 'O'. The set of rules are placed inside a function called owin(). The function with the set of rules are given below

function owin(){
if(first.value=='o' && second.value=='o' && third.value=='o') alert("Player O has won!")
if(first.value=='o' && fourth.value=='o' && seventh.value=='o') alert("Player O has won!")
if(first.value=='o' && fifth.value=='o' && ninth.value=='o') alert("Player O has won!")
if(second.value=='o' && fifth.value=='o' && eighth.value=='o') alert("Player O has won!")
if(third.value=='o' && sixth.value=='o' && ninth.value=='o') alert("Player O has won!")
if(third.value=='o' && fifth.value=='o' && seventh.value=='o') alert("Player O has won!")
if(fourth.value=='o' && fifth.value=='o' && sixth.value=='o') alert("Player O has won!")
if(seventh.value=='o' && ninth.value=='o' && eighth.value=='o') alert("Player O has won!")
}

And for a Draw, I have used a variable which increments its value on clicking a button. And thus, if the player clicks 9 times without producing a result, a alert box displays 'Its a Draw!'. A reset button is used to reset the game. This game is for Player1 vs Player2 and not Player vs Computer. The latter will be done soon.

The whole coding of this game can be downloaded from here. Hope you like it. Thats all for now

Cheers
Sravan

No comments:

Post a Comment