www.webdeveloper.com
Results 1 to 6 of 6

Thread: TIC TAC TOE VAR PutCross not defined HELP!

  1. #1
    Join Date
    Oct 2012
    Posts
    8

    TIC TAC TOE VAR PutCross not defined HELP!

    When I try to run it everything is displayed but I can't play because the Error Console says that my PutCross function is not defined. Can anyone help me with this? Thanks

    <script language="javascript" type="text/javascript">
    //Tic Tac Toe

    //variable global
    var playing = true

    //function check movement------------------------------------------------
    function CheckMovement(board, chip) {
    //checks that there is a probability to win the game in a row, column or diagonal.
    //returns the position where you have to put your chip. To do it and - 1 if there is not game.
    var x, y

    for(x = 0; x < 9; x += 3) { //check rows
    if ((board.elements[x].value == chip) && (board.elements[x + 1].value == chip))
    if (board.elements[x + 2].value == "")
    return (x + 2)
    if ((board.elements[x].value == chip) && (board.elements[x + 2].value == chip))
    if (board.elements[x + 1].value == "")
    return (x + 1)
    if ((board.elements[x + 1].value == chip) && (board.elements[x + 2].value == chip))
    if (board.elements[x].value == "")
    return (x)
    }

    for(x = 0; x < 3; x++) { //check columns
    if ((board.elements[x].value == chip) && (board.elements[x + 3].value == chip))
    if (board.elements[x + 6].value == "")
    return (x + 6)
    if ((board.elements[x].value == chip) && (board.elements[x + 6].value == chip))
    if (board.elements[x + 3].value == "")
    return (x + 3)
    if ((board.elements[x + 3].value == chip) && (board.elements[x + 6].value == chip))
    if (board.elements[x].value == "")
    return (x)
    }

    //check diagonals
    if ((board.elements[2].value == chip) && (board.elements[4].value == chip) && (board.elements[6].value == ""))
    return (6)
    if ((board.elements[2].value == chip) && (board.elements[4].value == "") && (board.elements[6].value == chip))
    return (4)
    if ((board.elements[2].value == "") && (board.elements[4].value == chip) && (board.elements[6].value == chip))
    return (2)
    if ((board.elements[0].value == chip) && (board.elements[4].value == chip) && (board.elements[8].value == ""))
    return (8)
    if ((board.elements[0].value == chip) && (board.elements[4].value == "") && (board.elements[8].value == chip))
    return (4)
    if ((board.elements[0].value == "") && (board.elements[4].value == chip) && (board.elements[8].value == chip))
    return (0)

    return -1
    }


    //Function Horizontal Pair---------------------------------------------------
    function HorizontalPair(board, chip) {
    //Checks if it's possible to put 2 in a row, if the other case of the same row is empty.
    //Returns the row to allows to do it, or - 1 in the opposite.

    var x, y

    for(x = 0; x < 9; x += 3) { //check rows
    if ((board.elements[x].value == chip) && (board.elements[x + 1].value == "") && (board.elements[x + 2].value == ""))
    return (x)
    if ((board.elements[x].value == "") && (board.elements[x + 1].value == chip) && (board.elements[x + 2].value == ""))
    return (x + 1)
    if ((board.elements[x].value == "") && (board.elements[x + 1].value == "") && (board.elements[x + 2].value == chip))
    return (x + 2)
    }

    return -1
    }


    //FUNCION Vertical Pair---------------------------------------------------
    function VerticalPair(board, chip, gameHtal) {
    //Checks if it's possible to put 2 in a column, if the other case of the same column is empty.
    //Returns the row to allows to do it, or - 1 in the opposite.



    var x, y

    for(x = 0; x < 3; x++) { //check columns
    if ((board.elements[x].value == chip) && (board.elements[x + 3].value == "") && (board.elements[x + 6].value == ""))
    if (x != gameHtal) //If it's horizontal pair it doesn't interest as much as vertical
    return (x)
    if ((board.elements[x].value == "") && (board.elements[x + 3].value == chip) && (board.elements[x + 6].value == ""))
    if ((x + 3) != gameHtal)
    return (x + 3)
    if ((board.elements[x].value == "") && (board.elements[x + 3].value == "") && (board.elements[x + 6].value == chip))
    if ((x + 6) != gameHtal)
    return (x + 6)
    }

    return -1
    }


    //FUNCTION OBTAIN POSITION-------------------------------------------------
    function ObtainPosition(gameHtal, gameVcal) {
    //looks for the position to make a vertical and horizontal game at the same time
    //known the rows and columns where you can make pairs

    var x, y, row, column
    var posit= 0
    position = new Array(3)

    for (x = 0; x < 3; x++) { //creates a position for rows and columns
    position[x] = new Array(3)
    for (y = 0; y < 3; y++) {
    position[x][y] = posit
    posit++
    }
    }

    for (x = 0; x < 3; x++) { //looks for row and column
    for (y = 0; y < 3; y++) {
    if (position[x][y] == gameHtal) //found the row
    row = x
    if (position[x][y] == gameVcal) //found the column
    }
    }

    return (position[row][column]) //returns posit game
    }


    //Function put the circle-------------------------------------------------
    function PutCircle(board) {
    //plays the computer

    var gamet, gameHtal, gameVcal

    //attack and win
    gamet = CheckMovement(board, "O")
    if (gamet != -1) {
    board.elements[gamet].value = "O"
    alert('ˇYo gano!')
    document.score.lose.value++
    playing = false
    return 1
    }

    //defends trying to don't lose
    gamet = CheckMovement(board, "X")
    if (gamet != -1) {
    board.elements[gamet].value = "O"
    return 1
    }

    //attack and win next
    gameHtal = HorizontalPair(board, "O")
    gameVcal = VerticalPair(board, "O", gameHtal)
    if ((gameHtal != -1) && (gameVcal != -1)) { //Can put 2 in the row and 2 in column.
    if ((gameHtal != 4) || (gameVcal != 4)) { //it's not the center.
    gamet = ObtainPosition(gameHtal, gameVcal) //finds where to move.
    board.elements[gamet].value = "O"
    return 1
    }
    }

    //attacks and puts 2 in row
    if ((gameHtal != -1) && (gameVcal == -1)) {
    if ((gameHtal != 2) && (gameHtal != 5) && (gameHtal != 8)) //this is arbitrary
    board.elements[gameHtal + 1].value = "O" //move right
    else
    board.elements[gameHtal - 1].value = "O" //move left
    return 1
    }

    //attacks and puts 2 in column
    if ((gameHtal == -1) && (gameVcal != -1)) {
    if ((gameVcal != 6) && (gameVcal != 7) && (gameVcal != 8))
    board.elements[gameVcal + 3].value = "O" //moves down
    else
    board.elements[gameVcal - 3].value = "O" //moves up
    return 1
    }

    //moves center
    if (board.elements[4].value == "") {
    board.elements[4].value = "O"
    return 1
    }

    //moves the first free one
    for (x = 0; x < 9; x++)
    if (board.elements[x].value == "") {
    board.elements[x].value = "O"
    return 1
    }

    alert('draw.')
    document.score.draw.value++
    playing = false
    return -1
    }


    //Function put cross------------------------------------------------------
    function PutCross(board, position) {

    //checsk that we're playing
    if (playing) {
    if (board.elements[position].value != "") //box not empty
    alert('This box is has been already taken.')
    else { //box empty, you can move there
    board.elements[position].value = "X"

    //checks if win
    if ( CheckVictory(board, "X") ) {
    alert('ˇCongratulations! You won.')
    document.score.won.value++
    playing = false
    } else
    PutCircle(board)
    }
    } else {
    alert('To start a new game press/ New game.')
    }
    }


    //Function Check Victory ----------------------------------------------
    function CheckVictory(board, chip) {

    //Checks the winner

    var x

    for(x = 0; x < 9; x += 3) { //check rows
    if ((board.elements[x].value == chip) && (board.elements[x + 1].value == chip) && (board.elements[x + 2].value == chip))
    return true
    }

    for(x = 0; x < 3; x++) { //check columns
    if ((board.elements[x].value == chip) && (board.elements[x + 3].value == chip) && (board.elements[x + 6].value == chip))
    return true
    }

    //check diagonales
    if ((board.elements[2].value == chip) && (board.elements[4].value == chip) && (board.elements[6].value == chip))
    return true
    if ((board.elements[0].value == chip) && (board.elements[4].value == chip) && (board.elements[8].value == chip))
    return true

    return false
    }

    </script>

  2. #2
    Join Date
    Oct 2012
    Posts
    8
    <table><center><tr><td>
    <p align="center"><font size="6" color="#000080"><b>*** TIC TAC TOE GAME</b></font></p>
    <p align="center" style="margin-top: 0; margin-bottom: 0"><b><font color="#000080" size="3" face="Arial">Click buttons of X to make your movements.</font></b></p>
    <center>
    <form name="board">
    <div align="center"><center><table border="0" width="69%" cellpadding="5">
    <tr>
    <td width="20%" align="center">
    <p align="center"><input type="text" name="T0" size="1"></p>
    </td>
    <td width="20%" align="center"><font color="#00FF00"><input type="text" name="T1" size="1"></font></td>
    <td width="20%" align="center"><input type="text" name="T2" size="1"></td>
    </div>
    </td>
    </tr>
    <tr>
    <td width="20%" align="center"><input type="text" name="T3" size="1"></td>
    <td width="20%" align="center"><input type="text" name="T4" size="1"></td>
    <td width="20%" align="center"><input type="text" name="T5" size="1"></td>
    <td width="85%" align="center"></td>
    </tr>
    <tr>
    <td width="20%" align="center"><input type="text" name="T6" size="1"></td>
    <td width="20%" align="center"><input type="text" name="T7" size="1"></td>
    <td width="20%" align="center"><input type="text" name="T8" size="1"></td>
    <td width="85%" align="center"></td>
    </tr>
    <tr>
    <td width="20%" align="center"><input type="button" value=" X " name="B0"
    onClick="PutCross(board, 0)" style="font-family: arial"></td>
    <td width="20%" align="center"><input type="button" value=" X " name="B1"
    onClick="PutCross(board, 1)" style="font-family: arial"></td>
    <td width="20%" align="center"><input type="button" value=" X " name="B2"
    onClick="PutCross(board, 2)" style="font-family: arial"></td>
    <td width="85%" align="center"><input type="reset" value="New game" name="new"
    onClick="playing=true" style="font-family: arial"></td>
    </tr>
    <tr>
    <td width="18%" align="center"><input type="button" value=" X " name="B3"
    onClick="PutCross(board, 3)" style="font-family: arial"></td>
    <td width="17%" align="center"><input type="button" value=" X " name="B4"
    onClick="PutCross(board, 4)" style="font-family: arial"></td>
    <td width="18%" align="center"><input type="button" value=" X " name="B5"
    onClick="PutCross(board, 5)" style="font-family: arial"></td>
    </tr>
    <tr>
    <td width="18%" align="center"><input type="button" value=" X " name="B6"
    onClick="PutCross(board, 6)" style="font-family: arial"></td>
    <td width="17%" align="center"><input type="button" value=" X " name="B7"
    onClick="PutCross(board, 7)" style="font-family: arial"></td>
    <td width="18%" align="center"><input type="button" value=" X " name="B8"
    onClick="PutCross(board, 8)" style="font-family: arial"></td>
    <td width="85%" align="right"></td>
    </tr>
    </td></tr>
    </table>
    </center></div>
    </form>

    <form name="score">
    <div align="center"><center><table border="0" width="67%" cellpadding="5" cellspacing="0">
    <tr>
    <td width="20%" align="center"><div align="left"><p><b><font color="#000080" face="Arial" size="2">Draw:<br>
    <input type="text" name="draw" value="0" size="6"></font></b>
    </div>
    </td>
    <td width="20%" align="center"><div align="left"><p><b><font color="#000080" face="Arial" size="2">Lose:<br>
    <input type="text" name="lose" value="0" size="6"></font></b>
    </div>
    </td>
    <td width="20%"><div align="left"><p><b><font color="#000080" face="Arial" size="2">Won:<br>
    <input type="text" name="won" value="0" size="6"></font></b></td>
    <td width="85%" align="center"><div align="right"><p align="center"> <b> <font color="#000080" face="Arial" size="2"> <input type="reset"
    value="Clean" name="delete" style="font-family: arial"></font></b></td>
    </tr>
    </table>
    </center></div>
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Dec 2005
    Posts
    268
    Don't know if it is your problem, but ObtainPosition() has errors.

  4. #4
    Join Date
    Oct 2012
    Posts
    8
    How can I solve it?

  5. #5
    Join Date
    Dec 2005
    Posts
    268
    I don't think your curly brackets matched up, but not positive. I strongly recommend including curly brackets for all if statements, and terminating each line with a semi-column. For instance, change your code from:
    Code:
    if (position[x][y] == gameHtal) //found the row
    row = x
    to
    Code:
    if (position[x][y] == gameHtal) {//found the row
       row = x;
    }
    Also, you didn't show how the JavaScript is initialized. You just posted some functions and a html table. Make a working example on jsfiddle, and I'll take a look.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    See this page and his source for explanations...
    Two dimensional array are never useful for this kind of games. See this other connect four game !
    Last edited by 007Julien; 10-29-2012 at 09:46 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles