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
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