tic_toc/app.js at master · ammasum/tic_toc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var game_roll = document.querySelectorAll(".game_roll"); //Select all square box
var game_dice = "X"; // X or 0
var game_position = "process";
var player_num = document.querySelector("#player"); //which player trun
var count_click = 0; //cound how many box select
for(var i = 0; i<game_roll.length; i++){ //loop through all box
    game_roll[i].addEventListener("click", function(){
        if(this.querySelector("p").innerHTML == ""){ //check is box empty
            var player = player_num.innerText; //get present player num
            player = player.replace(/\s/g, '');  //remove all white char
            this.querySelector("p").innerHTML = game_dice; // changing dice
            if(game_dice == "X"){
                this.querySelector("p").style.color = "#EC19D6";
            }
            else{
                this.querySelector("p").style.color = "#50FB00";
            }
            /// below calling function to check game condition, is it win click or draw
            left_to_right(this.getAttribute("id"), game_dice, player_num.innerText);
            top_to_down(this.getAttribute("id"), game_dice, player_num.innerText);
            angle(game_dice, player_num.innerText);
            if(player == "1"){ //changing player trun
                player_num.innerHTML = "2";
            }
            else{
                player_num.innerHTML = "1";
            }
            if(game_dice == "0"){
                game_dice = "X";
            }
            else{
                game_dice = "0";
            }
            count_click++; // increase counting
            if(count_click === 9 && game_position == "process"){ //if all box is select then over
                var won = document.querySelector("#won_text");
                won.innerHTML = "Draw";
            }
        }

    });
}

function left_to_right(id, val, player){
    var col_num = id[4];
    var a = document.querySelector("#col_" + col_num + "_row_1").innerText;
    var b = document.querySelector("#col_" + col_num + "_row_2").innerText;
    var c = document.querySelector("#col_" + col_num + "_row_3").innerText;
    a = a.replace(/\s/g, '');
    b = b.replace(/\s/g, '');
    c = c.replace(/\s/g, '');
    player = player.replace(/\s/g, '');
    if(a == val && b == val && c == val){
        var won = document.querySelector("#won_text");
        won.innerHTML = "Player " + player + " won";
        game_position = "won";
        won_game();
    }
}

function top_to_down(id, val, player){
    var row_num = id[10];
    var a = document.querySelector("#col_1" + "_row_" + row_num).innerText;
    var b = document.querySelector("#col_2" + "_row_" + row_num).innerText;
    var c = document.querySelector("#col_3" + "_row_" + row_num).innerText;
    a = a.replace(/\s/g, '');
    b = b.replace(/\s/g, '');
    c = c.replace(/\s/g, '');
    player = player.replace(/\s/g, '');
    if(a == val && b == val && c == val){
        var won = document.querySelector("#won_text");
        won.innerHTML = "Player " + player + " won";
        game_position = "won"
    }
}
function angle(val, player){
    var a = document.querySelector("#col_1_row_1").innerText;
    var b = document.querySelector("#col_2_row_2").innerText;
    var c = document.querySelector("#col_3_row_3").innerText;
    a = a.replace(/\s/g, '');
    b = b.replace(/\s/g, '');
    c = c.replace(/\s/g, '');
    player = player.replace(/\s/g, '');
    if(a == val && b == val && c == val){
        var won = document.querySelector("#won_text");
        won.innerHTML = "Player " + player + " won";
        game_position = "won";
    }
    var a = document.querySelector("#col_1_row_3").innerText;
    var c = document.querySelector("#col_3_row_1").innerText;
    a = a.replace(/\s/g, '');
    c = c.replace(/\s/g, '');

    if(a == val && b == val && c == val){
        var won = document.querySelector("#won_text");
        won.innerHTML = "Player " + player + " won";
        game_position = "won";
    }
}

function won_game(){
    var won = document.querySelector("#won_text");
    won.style.animation = "animate 3s";
}