четверг, 29 ноября 2012 г.

JavaScript игра Крестики-Нолики

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {border-collapse: collapse;}
table tr td {padding: 0; border: 1px solid black; text-align: center; vertical-align: middle; cursor: default;}
table#scores tr td {width: 65px; height: 30px;}
table#play_field tr td {width: 50px; height: 50px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var current_player = "PlayerX";   
   
    var current_game_turn = 1;
    var max_game_turns_number = 9;
   
    var current_game_round = 1;
    var max_game_rounds_number = 5;
   
    var scores_table = '<table id="scores">' +
                                            '<tr><td>Round</td><td>Player X</td><td>Player O</td></tr>';
                                           
    for (var i = 0; i < max_game_rounds_number; i++) {
                  scores_table += '<tr><td>' + ( i + 1) + '</td><td></td><td></td></tr>';
    }

             scores_table += '</table>';

    var play_field_table = '<table id="play_field">' +
                                            '<tr><td></td><td></td><td></td></tr>' +
                                            '<tr><td></td><td></td><td></td></tr>' +
                                            '<tr><td></td><td></td><td></td></tr>' +
                                      '</table>';
                                     
    var round_field = '<p id="round">Round: <span>1</span></p>';

    $("body").append(round_field).append(scores_table).append('<br />').append(play_field_table);
   
    function refreshScoresTable () {
        for (var i = 0; i < 5; i++) {
            $("table#scores tr:eq(" + (i + 1) + ") td:eq(1)").text("");
            $("table#scores tr:eq(" + (i + 1) + ") td:eq(2)").text("");
        }
    }
   
    function refreshPlayFieldTable () {
        $("table#play_field tr td").text("").removeClass("checked");
    }
   
    var classPlayer = function () {};
           classPlayer.prototype = {
                   scores: 0
           };
   
    var PlayerX =  new classPlayer();
    var PlayerO =  new classPlayer();

    function winCheck() {
   
        // Diagonal Win
        // X
        //   X
        //     X
        if (
                ($("table#play_field tr:eq(0) td:eq(0)").text() == "X") &&
                ($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
                ($("table#play_field tr:eq(2) td:eq(2)").text() == "X")
        ) {
            return "Player X Win";
        }
       
        // Vertical Win
        // O
        //   O
        //     O
        if (
                ($("table#play_field tr:eq(0) td:eq(0)").text() == "O") &&
                ($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
                ($("table#play_field tr:eq(2) td:eq(2)").text() == "O")
        ) {
            return "Player O Win";
        }
       
        // Diagonal Win
        //     X
        //   X
        // X
        if (
                ($("table#play_field tr:eq(0) td:eq(2)").text() == "X") &&
                ($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
                ($("table#play_field tr:eq(2) td:eq(0)").text() == "X")
        ) {
            return "Player X Win";
        }
       
        // Vertical Win
        //     O
        //   O
        // O
        if (
                ($("table#play_field tr:eq(0) td:eq(2)").text() == "O") &&
                ($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
                ($("table#play_field tr:eq(2) td:eq(0)").text() == "O")
        ) {
            return "Player O Win";
        }

        for (var i=0; i < 3; i++) {
       
            // Horizontal Win X X X
            if (
                    ($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "X") &&
                    ($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "X") &&
                    ($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "X")
            ) {
                return "Player X Win";
            }
           
            // Horizontal Win O O O
            if (
                    ($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "O") &&
                    ($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "O") &&
                    ($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "O")
            ) {
                return "Player O Win";
            }
           
            // Vertical Win
            // X
            // X
            // X
            if (
                    ($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "X") &&
                    ($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "X") &&
                    ($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "X")
            ) {
                return "Player X Win";
            }
           
            // Vertical Win
            // O
            // O
            // O
            if (
                    ($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "O") &&
                    ($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "O") &&
                    ($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "O")
            ) {
                return "Player O Win";
            }

        }
       
        return "Nobody Win";

    };
   
    $("table#play_field tr td").click(function(){ console.log("Round: " +  current_game_round + " Turn: " + current_game_turn + " CurrentPlayer: " + current_player);

        if (!$(this).hasClass("checked")) {
       
            if (current_player == "PlayerX") {
           
                $(this).text("X").addClass("checked");
                current_player = "PlayerO";
               
               
            } else if (current_player == "PlayerO") {
           
                $(this).text("O").addClass("checked");
                current_player = "PlayerX";
               
            }
   
            current_game_turn++;
       
            if(winCheck() == "Nobody Win") {
           
                if (current_game_turn != (max_game_turns_number + 1)) {
                    // Game round continue.
                } else {
                    $("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Draw");
                    $("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Draw");
                    refreshPlayFieldTable ();
                    current_game_turn = 1;
                    current_game_round++;
                    if (current_game_round > 5) {
                        $("p#round span").text(max_game_rounds_number);
                    } else {
                        $("p#round span").text(current_game_round);
                    }
                }
               
            } else if (winCheck() == "Player X Win") {
           
                PlayerX.scores = PlayerX.scores + 1;
                $("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Win");
                $("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Lose");
                refreshPlayFieldTable ();
                current_game_turn = 1;
                current_game_round++;
                if (current_game_round > 5) {
                    $("p#round span").text(max_game_rounds_number);
                } else {
                    $("p#round span").text(current_game_round);
                }
               
            } else if (winCheck() == "Player O Win") {
           
                PlayerO.scores = PlayerO.scores + 1;       
                $("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Lose");
                $("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Win");
                refreshPlayFieldTable ();
                current_game_turn = 1;
                current_game_round++;
                if (current_game_round > 5) {
                    $("p#round span").text(max_game_rounds_number);
                } else {
                    $("p#round span").text(current_game_round);
                }
               
            }
           
            if (current_game_round == (max_game_rounds_number + 1)) {
                refreshPlayFieldTable ();
                if (PlayerX.scores > PlayerO.scores) {
                    alert("Game End. Player X Win.");
                } else if (PlayerX.scores < PlayerO.scores) {
                    alert("Game End. Player O Win.");
                } else if (PlayerX.scores == PlayerO.scores) {
                    alert("Game End. Draw.");
                }
                 refreshScoresTable ();
                current_game_turn = 1;
                current_game_round = 1;
                $("p#round span").text(current_game_round);
            }
           
        }
        console.log("Round: " +  current_game_round + " Turn: " + current_game_turn + " CurrentPlayer: " + current_player + " WinCheck: " + winCheck());
    });
   

});
</script>
<title>XO Game</title>
</head>
<body>
</body>
</html>

Комментариев нет:

Отправить комментарий