пятница, 30 ноября 2012 г.

JavaScript Крестики-Нолики с AI с Таймером

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

function newArray () {
     return  [
                    [
                        [0, 0], [0, 1], [0, 2]
                    ],
                    [
                        [1, 0], [1, 1], [1, 2]
                    ],
                    [
                        [2, 0], [2, 1], [2, 2]
                    ]
                 ];
}

var empty_cells = newArray ();                                           

// Random number from range function
function randomNumber (low_limit, high_limit) {
    return Math.round(Math.random()*(high_limit - low_limit)) + low_limit;
}

$(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";

    };
   
    function AIplayer () {

        var random_row, random_cell, row, cell;
       
        function checkCell () {
            random_row = randomNumber (0, 2);
            random_cell = randomNumber (0, 2); console.log("[" + random_row + "," + random_cell + "]");
            if (empty_cells[random_row][random_cell] == undefined) {           
                for (var i=0; i < 3; i++) {
                    for (var j=0; j < 3; j++) {console.log("i: " + i + ", j: " + j);
                        if (empty_cells[i][j] != undefined) {
                            row = i;
                            cell = j;   
                            break;
                        }
                    }                   
                }
            } else {
                row = random_row;
                cell = random_cell;
            }
        }
       
        checkCell ();
       
        $("table#play_field tr:eq(" + empty_cells[row][cell][0]  + ") td:eq(" + empty_cells[row][cell][1] + ")").text("O").addClass("checked");
        delete empty_cells[row][cell];
        current_player = "PlayerX";
       
    }
   
    $("table#play_field tr td").click(function(){

        if (!$(this).hasClass("checked")) {
       
            if (current_player == "PlayerX") {
           
                $(this).text("X").addClass("checked");
                delete empty_cells[$(this).parent().index()][$(this).index()];
                current_player = "PlayerO";
               
                checkWinConditions ();
               
                setTimeout (function() {
               
                    AIplayer ();
                   
                    checkWinConditions ();
                   
                }, 1000);
               
            }
           
        }

           
                function checkWinConditions () {
           
                    console.log(empty_cells);
                    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 ();
                            empty_cells = newArray ();
                            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 ();
                        empty_cells = newArray ();
                        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 ();
                        empty_cells = newArray ();
                        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 ();
                        empty_cells = newArray ();
                        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);
                    }
                   
                }
           

       
    });
   

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

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

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

function newArray () {
     return  [
                    [
                        [0, 0], [0, 1], [0, 2]
                    ],
                    [
                        [1, 0], [1, 1], [1, 2]
                    ],
                    [
                        [2, 0], [2, 1], [2, 2]
                    ]
                 ];
}

var empty_cells = newArray ();                                           

// Random number from range function
function randomNumber (low_limit, high_limit) {
    return Math.round(Math.random()*(high_limit - low_limit)) + low_limit;
}

$(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";

    };
   
    function AIplayer () {

        var random_row, random_cell, row, cell;
       
        function checkCell () {
            random_row = randomNumber (0, 2);
            random_cell = randomNumber (0, 2); console.log("[" + random_row + "," + random_cell + "]");
            if (empty_cells[random_row][random_cell] == undefined) {           
                for (var i=0; i < 3; i++) {
                    for (var j=0; j < 3; j++) {console.log("i: " + i + ", j: " + j);
                        if (empty_cells[i][j] != undefined) {
                            row = i;
                            cell = j;   
                            break;
                        }
                    }                   
                }
            } else {
                row = random_row;
                cell = random_cell;
            }
        }
       
        checkCell ();
       
        $("table#play_field tr:eq(" + empty_cells[row][cell][0]  + ") td:eq(" + empty_cells[row][cell][1] + ")").text("O").addClass("checked");
        delete empty_cells[row][cell];
        current_player = "PlayerX";
       
    }
   
    $("table#play_field tr td").click(function(){

        if (!$(this).hasClass("checked")) {
       
            if (current_player == "PlayerX") {
           
                $(this).text("X").addClass("checked");
                delete empty_cells[$(this).parent().index()][$(this).index()];
                current_player = "PlayerO";
               
               
            } else if (current_player == "PlayerO") {
           
                AIplayer ();
               
            }
            console.log(empty_cells);
            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 ();
                    empty_cells = newArray ();
                    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 ();
                empty_cells = newArray ();
                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 ();
                empty_cells = newArray ();
                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 ();
                empty_cells = newArray ();
                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);
            }
           
        }
       
    });
   

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

четверг, 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>

среда, 14 ноября 2012 г.

DNA Mutate

function in_array (item, array){
    for (var i = 0; i < array.length; i++) {
        if (array[i] === item) {
            return true;
        }
    }
    return false;
}

function getRandomInt(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var Cell = function(){};
    Cell.prototype = {
        DNA: [],
        init: function(){
            var dna_letters = ["A", "T", "G", "C"];
            for (var i = 0; i < 100; i++) {
                this.DNA[i] = dna_letters[getRandomInt(0, 3)];
            }
        },
        hammingDistance: function(cell_object) {
            var distance = 0;
            for (var i = 0; i < 100; i++) {
                if (this.DNA[i] != cell_object.DNA[i]) {
                    distance++;
                }
            }
            return distance;
        },
        mutate: function(x){
            var mutated_cells = [];
            var dna_position;
            var number_of_mutations = x;
            var dna_letters = ["A", "T", "G", "C"];
            while (number_of_mutations > 0) {
                dna_position = getRandomInt(0, 99);
                if (in_array(dna_position, mutated_cells)) {
                    continue;
                } else {
                    this.DNA[dna_position] = dna_letters[getRandomInt(0, 3)];
                    mutated_cells.push(dna_position);
                    number_of_mutations--;
                }
            }
        }
    }

var FirstCell = new Cell();
    FirstCell.init();
  
var SecondCell = new Cell();
    SecondCell.init();

console.log(FirstCell.hammingDistance(SecondCell));

FirstCell.mutate(10);
SecondCell.mutate(20);

console.log(FirstCell.hammingDistance(SecondCell));

Vanilla JS Наследование классов

function ExtendClass (ChildClass, ParentClass)
{
    var BaseParentClass = function(){};
        BaseParentClass.prototype = ParentClass.prototype;
    var TemporaryParentClass = new BaseParentClass();
   
    for (var property in ChildClass.prototype) {
        TemporaryParentClass[property] = ChildClass.prototype[property];
    }
    ChildClass.prototype = TemporaryParentClass;
    ChildClass.prototype.super = ParentClass.prototype;
}

понедельник, 3 сентября 2012 г.

Vanilla JS framework

Vanilla JSVanillin

Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.

Introduction

The Vanilla JS team maintains every byte of code in the framework and works hard each day to make it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few:
  • Facebook
  • Google
  • YouTube
  • Yahoo
  • Wikipedia
  • Windows Live
  • Twitter
  • Amazon
  • LinkedIn
  • MSN
  • eBay
  • Microsoft
  • Tumblr
  • Apple
  • Pinterest
  • PayPal
  • Reddit
  • Netflix
  • Stack Overflow
In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined.

Download

Ready to try Vanilla JS? Choose exactly what you need!

Options

Final size: 0 bytes uncompressed, 25 bytes gzipped.

Testimonials

Vanilla JS makes everything an object, which is very convenient for OO JS applications.

Getting Started

The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will have Vanilla JS loaded into memory before it even requests your site.
To use Vanilla JS, just put the following code anywhere in your application's HTML:
  1. <script src="path/to/vanilla.js"></script>
When you're ready to move your application to a production deployment, switch to the much faster method:
  1.  
That's right - no code at all. Vanilla JS is so popular that browsers have been automatically loading it for over a decade.

Speed Comparison

Here are a few examples of just how fast Vanilla JS really is:

Retrieve DOM element by ID


Codeops / sec
Vanilla JSdocument.getElementById('test-table');
12,137,211
 
Dojodojo.byId('test-table');
5,443,343
 
Prototype JS$('test-table')
2,940,734
 
Ext JSdelete Ext.elCache['test-table']; Ext.get('test-table');
997,562
 
jQuery$jq('#test-table');
350,557
 
YUIYAHOO.util.Dom.get('test-table');
326,534
 
MooToolsdocument.id('test-table');
78,802
 

Retrieve DOM elements by tag name


Codeops / sec
Vanilla JSdocument.getElementsByTagName("span");
8,280,893
 
Prototype JSPrototype.Selector.select('span', document);
62,872
 
YUIYAHOO.util.Dom.getElementsBy(function(){return true;},'span');
48,545
 
Ext JSExt.query('span');
46,915
 
jQuery$jq('span');
19,449
 
Dojodojo.query('span');
10,335
 
MooToolsSlick.search(document, 'span', new Elements);
5,457
 

Code Examples

Here are some examples of common tasks in Vanilla JS and other frameworks:

Fade an element out and then remove it

Vanilla JSvar s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none":setTimeout(arguments.callee,40)})();
jQuery<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script>

Make an AJAX call

Vanilla JSvar r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow");
jQuery<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script>

Further Reading

For more information about Vanilla JS:
When powering your applications with Vanilla JS, feel free to use this handy button!

Vanilla JS

Vanilla JS — очень мощный javascript-фреймворк.

Кто использует Vanilla JS?

Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow. Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.

На сайте вы можете скачать фреймворк, выбрав нужную вам функциональность:
- DOM (Манипуляции / Селекторы)
- Прототипная система объектов
- AJAX
- Анимации
- Система событий
- Регулярные выражения
- Функции как объекты
- Замыкания
- Библиотеку математических методов
- Библиотеку для работы с массивами
- Библиотеку для работы со строками

Плюс можете настроить вашу сборку:
- Сжать исходники
- В кодировке UTF8
- Использовать «CRLF» переносы строк (Windows)

При максимальной комплектации фреймворк будет весить:
- несжатый: 0 байт
- сжатый: 25 байт

Установка Vanilla JS

Команда Vanilla JS гордится тем фактом, что это самый лёгкий фреймворк всех времён; используйте нашу стратегию выкладки на продакшн, и браузеры ваших пользователей загрузят Vanilla JS в память ещё даже до того, как начнут загружать ваш сайт.

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:

<script src="path/to/vanilla.js"></script>


Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:

Всё верно, совсем без кода. Vanilla JS настолько популярна, что браузеры автоматически загружают фреймворк уже лет десять.

Сравнение скорости работы VanillaJS с другими фреймворками

Поиск DOM-элемента по ID


Фреймворк Код Оп.\сек
Vanilla JS
document.getElementById('test-table');
12,137,211
Dojo
dojo.byId('test-table');
5,443,343
Prototype JS
$('test-table')
2,940,734
Ext JS
delete Ext.elCache['test-table']; Ext.get('test-table');
997,562
jQuery
$jq('#test-table');
350,557
YUI
YAHOO.util.Dom.get('test-table');
326,534
MooTools
document.id('test-table');
78,802

Поиск элементов по названию тэга

Фреймворк Код Оп.\сек
Vanilla JS
document.getElementsByTagName("span");
8,280,893
Prototype JS
Prototype.Selector.select('span', document);
62,872
YUI
YAHOO.util.Dom.getElementsBy(function(){return true;},'span');
48,545
Ext JS
Ext.query('span');
46,915
jQuery
$jq('span');
19,449
Dojo
dojo.query('span');
10,335
MooTools
Slick.search(document, 'span', new Elements);
5,457

Примеры кода

Плавно скрыть элемент

Vanilla JS
var s = document.getElementById('thing').style;
s.opacity = 1;
(function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> $('#thing').fadeOut();</script>

AJAX-вызов

Vanilla JS
var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $.ajax({
    type: 'POST',
    url: "path/to/api",
    data: "banana=yellow",
    success: function (data) {
      alert("Success: " + data);
    },
  });
</script>