View Demo 
Download Code [3.29 kb]
Playing
The computer always plays with circles ( “O”) and you with blades
( “X”). Start your. To put an X have to click on the button
the bottom panel that corresponds to the position you want to put it. You can
also hand-write it, always with capital letters (without cheating, because the
computer trusts you).
The computer will make its redondel every time you put your X .
Never make a mistake, and if you neglect (and you do not cheat), you win. If you cheat, do not
work correctly.
When the game ends, the computer shows the result and increase the counters
lower. To play another game, press the button again Game , which
Clean the panel game. To clear the counters, click the Clear button Clear.
This < head> between and </head>:
<script language="javascript" type="text/javascript">
// Tic Tac Toe
// Version: 1 (10/08/2009)
// Venu Thomas
// This script and many others can
// download online for free
// in the code: [url = http://www.wisecodes.com] www.wisecodes.com [/ url]
// To understand the explanations:
// Win - and win puts
// Game - and has put in a two-line 'O' and an empty box
// Defend - keep winning the next move in the opposite
// It makes no sense at first occupy the center if there is victory or play
// There must defend first and attack later. First look for the victory, then
// search and then defends move
// global variable
var strPlaying = true
//ROLE PLAY CHECK------------------------------------------------
function wc_fnCheckPlay(grid, record) {
// check that it is possible to stripe 3 in a row, column or diagonal
// returns the position where you have to put the record to do so and -1 if there is no gamble
var x, y
for(x = 0; x < 9; x += 3) { //Check the rows
if ((grid.elements[x].value == record) && (grid.elements[x + 1].value == record))
if (grid.elements[x + 2].value == "")
return (x + 2)
if ((grid.elements[x].value == record) && (grid.elements[x + 2].value == record))
if (grid.elements[x + 1].value == "")
return (x + 1)
if ((grid.elements[x + 1].value == record) && (grid.elements[x + 2].value == record))
if (grid.elements[x].value == "")
return (x)
}
for(x = 0; x < 3; x++) { //Check the columns
if ((grid.elements[x].value == record) && (grid.elements[x + 3].value == record))
if (grid.elements[x + 6].value == "")
return (x + 6)
if ((grid.elements[x].value == record) && (grid.elements[x + 6].value == record))
if (grid.elements[x + 3].value == "")
return (x + 3)
if ((grid.elements[x + 3].value == record) && (grid.elements[x + 6].value == record))
if (grid.elements[x].value == "")
return (x)
}
//check the diagonals
if ((grid.elements[2].value == record) && (grid.elements[4].value == record) && (grid.elements[6].value == ""))
return (6)
if ((grid.elements[2].value == record) && (grid.elements[4].value == "") && (grid.elements[6].value == record))
return (4)
if ((grid.elements[2].value == "") && (grid.elements[4].value == record) && (grid.elements[6].value == record))
return (2)
if ((grid.elements[0].value == record) && (grid.elements[4].value == record) && (grid.elements[8].value == ""))
return (8)
if ((grid.elements[0].value == record) && (grid.elements[4].value == "") && (grid.elements[8].value == record))
return (4)
if ((grid.elements[0].value == "") && (grid.elements[4].value == record) && (grid.elements[8].value == record))
return (0)
return -1
}
//HORIZONTAL PARTNER ROLE
function wc_fnPartnerHorizontal(grid, record) {
// check if it's possible to put 2 in a row, the other empty position ...
//... same row
// returns the row to do so, or -1 if not
var x, y
for(x = 0; x < 9; x += 3) { //Check the rows
if ((grid.elements[x].value == record) && (grid.elements[x + 1].value == "") && (grid.elements[x + 2].value == ""))
return (x)
if ((grid.elements[x].value == "") && (grid.elements[x + 1].value == record) && (grid.elements[x + 2].value == ""))
return (x + 1)
if ((grid.elements[x].value == "") && (grid.elements[x + 1].value == "") && (grid.elements[x + 2].value == record))
return (x + 2)
}
return -1
}
//VERTICAL PARTNER ROLE---------------------------------------------------
function wc_fnPartnerVertical(grid, record, playHtal) {
// check if it's possible to put 2 in a column, the other empty position ...
//... same column and taking into account whether that position is horizontal pair
// returns the column if you do not allow horizontal pair, or -1 if not
var x, y
for(x = 0; x < 3; x++) { //check the columns
if ((grid.elements[x].value == record) && (grid.elements[x + 3].value == "") && (grid.elements[x + 6].value == ""))
if (x != playHtal) //if partner not interested in horizontal and vertical
return (x)
if ((grid.elements[x].value == "") && (grid.elements[x + 3].value == record) && (grid.elements[x + 6].value == ""))
if ((x + 3) != playHtal)
return (x + 3)
if ((grid.elements[x].value == "") && (grid.elements[x + 3].value == "") && (grid.elements[x + 6].value == record))
if ((x + 6) != playHtal)
return (x + 6)
}
return -1
}
//Get POSITION\
function wc_fnGetPosition(playHtal, playVcal) {
// Find the position that allows you move vertically and horizontally at the same time move
// known row and column where couples can be
var x, y, fila, columna
var position = 0
matrix = new Array(3)
for (x = 0; x < 3; x++) { //creates a matrix that assigns a row and column position
matrix[x] = new Array(3)
for (y = 0; y < 3; y++) {
matrix[x][y] = position
position ++
}
}
for (x = 0; x < 3; x++) { //looking for the row and column
for (y = 0; y < 3; y++) {
if (matrix[x][y] == playHtal) //find the row
fila = x
if (matrix[x][y] == playVcal) //I found the column
columna = y
}
}
return (matrix[fila][columna]) //move back position
}
//FUNCION REDONDELA PUT-------------------------------------------------
function wc_fnPutRedondela(grid) {
//the ordanador plays
var play, playHtal, playVcal
//attacks and wins
play = wc_fnCheckPlay(grid, "O")
if (play != -1) {
grid.elements[play].value = "O"
alert('I won!!!')
document.scoreboard.missing.value++
strPlaying = false
return 1
}
//advocates avoiding the rival wins
play = wc_fnCheckPlay(grid, "X")
if (play != -1) {
grid.elements[play].value = "O"
return 1
}
//attacks and win the next
playHtal = wc_fnPartnerHorizontal(grid, "O")
playVcal = wc_fnPartnerVertical(grid, "O", playHtal)
if ((playHtal != -1) && (playVcal != -1)) { //you can put 2 and 2 in a row in column
if ((playHtal != 4) || (playVcal != 4)) { //is not the center
play = wc_fnGetPosition(playHtal, playVcal) //gets where it should put
grid.elements[play].value = "O"
return 1
}
}
//attacks and put two in a row
if ((playHtal != -1) && (playVcal == -1)) {
if ((playHtal != 2) && (playHtal != 5) && (playHtal != 8)) //this is arbitrary
grid.elements[playHtal + 1].value = "O" //puts the right
else
grid.elements[playHtal - 1].value = "O" //placed to the left
return 1
}
//attacks and put in two column
if ((playHtal == -1) && (playVcal != -1)) {
if ((playVcal != 6) && (playVcal != 7) && (playVcal != 8))
grid.elements[playVcal + 3].value = "O" //put down
else
grid.elements[playVcal - 3].value = "O" //puts up
return 1
}
//occupies the center
if (grid.elements[4].value == "") {
grid.elements[4].value = "O"
return 1
}
//This took the first free
for (x = 0; x < 9; x++)
if (grid.elements[x].value == "") {
grid.elements[x].value = "O"
return 1
}
alert('Draw...')
document.scoreboard.draw.value++
strPlaying = false
return -1
}
//FUNCION PUT ASPA
function wc_fnPutAspa(grid, position) {
//first check that this strPlaying
if (strPlaying) {
if (grid.elements[position].value != "") //empty box
alert('That box is already occupied.')
else { //empty box, you can put
grid.elements[position].value = "X"
//Check if you have won
if ( wc_fnNotesVictoria(grid, "X") ) {
alert('Congratulations! You win... 
')
document.scoreboard.won.value++
strPlaying = false
} else
wc_fnPutRedondela(grid)
}
} else {
alert('To start a new line \nClick Play again.')
}
}
//VICTORIA FUNCTION CHECK
function wc_fnNotesVictoria(grid, record) {
//Check if you have earned the record player that plays with
var x
for(x = 0; x < 9; x += 3) { //Check the rows
if ((grid.elements[x].value == record) && (grid.elements[x + 1].value == record) && (grid.elements[x + 2].value == record))
return true
}
for(x = 0; x < 3; x++) { //check the columns
if ((grid.elements[x].value == record) && (grid.elements[x + 3].value == record) && (grid.elements[x + 6].value == record))
return true
}
//check the diagonals
if ((grid.elements[2].value == record) && (grid.elements[4].value == record) && (grid.elements[6].value == record))
return true
if ((grid.elements[0].value == record) && (grid.elements[4].value == record) && (grid.elements[8].value == record))
return true
return false
}
</script>
And this from <body> and </body> :
<!-- To display the grid, and Accountants -->
<form name="grid">
<div align="center"><center>
<table border="0" width="62%" cellpadding="5">
<tr>
<td width="20%"><input type="text" name="T0" size="3"></td>
<td width="20%"><input type="text" name="T1" size="3"></td>
<td width="20%"><input type="text" name="T2" size="3"></td>
<td width="85%" align="right"></td>
</tr>
<tr>
<td width="20%"><input type="text" name="T3" size="3"></td>
<td width="20%"><input type="text" name="T4" size="3"></td>
<td width="20%"><input type="text" name="T5" size="3"></td>
<td width="85%" align="right"></td>
</tr>
<tr>
<td width="20%"><input type="text" name="T6" size="3"></td>
<td width="20%"><input type="text" name="T7" size="3"></td>
<td width="20%"><input type="text" name="T8" size="3"></td>
<td width="85%" align="right"></td>
</tr>
<tr>
<td width="20%"><input type="button" value=" X " name="B0" onClick="wc_fnPutAspa(grid, 0)" class="metal"></td>
<td width="20%"><input type="button" value=" X " name="B1" onClick="wc_fnPutAspa(grid, 1)" class="metal"></td>
<td width="20%"><input type="button" value=" X " name="B2" onClick="wc_fnPutAspa(grid, 2)" class="metal"></td>
<td width="85%"><input type="reset" value="New game" name="new" onClick="strPlaying=true" class="metal"></td>
</tr>
<tr>
<td width="18%"><input type="button" value=" X " name="B3" onClick="wc_fnPutAspa(grid, 3)" class="metal"></td>
<td width="17%"><input type="button" value=" X " name="B4" onClick="wc_fnPutAspa(grid, 4)" class="metal"></td>
<td width="18%"><input type="button" value=" X " name="B5" onClick="wc_fnPutAspa(grid, 5)" class="metal"></td>
<td width="85%"></td>
</tr>
<tr>
<td width="18%"><input type="button" value=" X " name="B6" onClick="wc_fnPutAspa(grid, 6)" class="metal"></td>
<td width="17%"><input type="button" value=" X " name="B7" onClick="wc_fnPutAspa(grid, 7)" class="metal"></td>
<td width="18%"><input type="button" value=" X " name="B8" onClick="wc_fnPutAspa(grid, 8)" class="metal"></td>
<td width="85%" align="right"></td>
</tr>
</table>
</center></div>
</form>
<form name="scoreboard">
<div align="center"><center>
<table border="0" width="62%" cellpadding="5" cellspacing="0">
<tr>
<td width="20%"><small>draw:<br>
</small><input type="text" name="draw" value="0" size="6"></td>
<td width="20%"><small>missing:<br>
</small><input type="text" name="missing" value="0" size="6"></td>
<td width="20%"><small>won:<br>
</small><input type="text" name="won" value="0" size="6"></td>
<td width="85%"> <br><input type="reset" value="Clear" name="delete" class="metal"></td>
</tr>
</table>
</center></div>
</form>
<h2>Playing</h2>
<p>The computer always plays with <em> circles </em> ( "O") and you with <em> blades </em>
( "X"). Start your. To put an X <em> </em> have to click on the button
the bottom panel that corresponds to the position you want to put it. You can
also hand-write it, always with capital letters (without cheating, because the
computer trusts you).</p>
<p>The computer will make its <em> redondel </em> every time you put your <em> X </em>.
Never make a mistake, and if you neglect (and you do not cheat), you win. If you cheat, do not
work correctly.</p>
<p>When the game ends, the computer shows the result and increase the counters
lower. To play another game, press the button again <strong> Game </strong>, which
Clean the panel game. To clear the counters, click the Clear button <strong>Clear</strong>.</p>
Happy Programming!!! 
