如何在我的tic tac toe游戏中提醒胜利者?

时间:2015-12-02 06:24:14

标签: javascript jquery html css

我选择同一个方格的提示仅适用于JsFiddle,我尝试了多种方式来提醒胜利者,但一切都没有发生。它只是位于x&s和o的页面上。我感谢任何和所有的帮助,非常感谢你!

Ps:必须是javascript(不是java)

Javascript:

// -1 means 0's turn
// 1 means X's turn

// AFTER EVERY MOVE
// UNTIL GAME OVER
// THIS NEEDS TO BE FLIPPED
// IF IT WAS 1, now it will be -1 and vice versa

var turn = 1;

// 0 means no move has been made yet 
// on that particular square
var grid = [
    [0, 0 ,0],
    [0, 0 ,0],
    [0, 0, 0]
];


function makeMove(row, column) {

    if (grid [row][column] == 0) 
        {
grid[row][column] = turn;

        var idOfSquareToChange = row +"" + column;

        if (turn == 1) {

            $("#"+idOfSquareToChange).html('X');
        }else {
            $("#"+idOfSquareToChange).html('O');
        }

        // CHECK IF GAME IS OVER

        // IF GAME ISN'T OVER   
        if (turn == 1) {
            turn = -1;
        }else {
            turn = 1;
        }
        printGrid();
    }else {
        alert('That square has been chosen');
    }
}

function printGrid(){

    var board = grid[0][0] + " " + grid [0][1] + " " + grid[0][2];
    board += "\n";
    board += grid[1][0] + " " + grid [1][1] + " " + grid[1][2];
    board += "\n";
    board += grid[2][0] + " " + grid [2][1] + " " + grid[2][2];

    alert(board);
}

HTML:

<table>
            <tr>
                <td id="00" onclick="makeMove(0,0)">00</td>
                <td id ="01" onclick="makeMove(0,1)">01</td>
                <td id ="02" onclick="makeMove(0,2)">02</td>
            </tr>
            <tr>
                <td id ="10" onclick="makeMove(1,0)">10</td>
                <td id ="11" onclick="makeMove(1,1)">11</td>
                <td id ="12" onclick="makeMove(1,2)">12</td>
            </tr>
            <tr>
                <td id ="20" onclick="makeMove(2,0)">20</td>
                <td id ="21" onclick="makeMove(2,1)">21</td>
                <td id ="22" onclick="makeMove(2,2)">22</td>
            </tr>
        </table>

        <hr>
        <input id="myMoveButton" type="submit">
<input type="button" value="Reset" onclick="playAgain()" />

    <script src="java.js"></script>

的CSS:

table {
    width: 300px;
    height:300px;

    font-size:20px;
}

table td {
    border:solid 1px red;

}

0 个答案:

没有答案