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

Share on Facebook

Tags: Game, JAVASCRIPT, OpenSource

This entry was posted on Monday, August 10th, 2009 and is filed under JAVASCRIPT.