Tic-tac-toe/script.js at main · Tchoow/Tic-tac-toe · 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
105
// ❌, ⭕

// Variables
var cases         = document.querySelectorAll(".case");
var tour          = true;
var isWin         = false;
var joueur1Elem   = '❌';
var joueur2Elem   = '⭕';
var txtInfo       = document.querySelector("#info");
txtInfo.innerHTML = "Tour du joueur : 1";

function revealCase(c) {
    if (c.innerHTML == "" && ! isWin)
    {
        if(tour) c.innerHTML = joueur1Elem;
        else c.innerHTML     = joueur2Elem;

        tour = !tour;

        if (tour) txtInfo.innerHTML = "Tour du joueur : 1";
        else      txtInfo.innerHTML = "Tour du joueur : 2";
        checkWin();
    }
}

function checkWin()
{
    isWin = false;
    // Detect win
    //ligne
    if (cases[0].innerHTML == cases[1].innerHTML &&
        cases[1].innerHTML == cases[2].innerHTML &&
        cases[2].innerHTML != "" )
        isWin = true;

    //ligne
    if (cases[3].innerHTML == cases[4].innerHTML &&
        cases[4].innerHTML == cases[5].innerHTML &&
        cases[5].innerHTML != "" )
        isWin = true;

    //ligne
    if (cases[6].innerHTML == cases[7].innerHTML &&
        cases[7].innerHTML == cases[8].innerHTML &&
        cases[8].innerHTML != "" )
        isWin = true;


    // Col
    if (cases[0].innerHTML == cases[3].innerHTML &&
        cases[3].innerHTML == cases[6].innerHTML &&
        cases[6].innerHTML != "" )
        isWin = true;

    // Col
    if (cases[1].innerHTML == cases[4].innerHTML &&
        cases[4].innerHTML == cases[7].innerHTML &&
        cases[7].innerHTML != "" )
        isWin = true;

    // Col
    if (cases[2].innerHTML == cases[5].innerHTML &&
        cases[5].innerHTML == cases[8].innerHTML &&
        cases[8].innerHTML != "" )
        isWin = true;

    // diag
    if (cases[0].innerHTML == cases[4].innerHTML &&
        cases[4].innerHTML == cases[8].innerHTML &&
        cases[8].innerHTML != "" )
        isWin = true;

    // diag
    if (cases[2].innerHTML == cases[4].innerHTML &&
        cases[4].innerHTML == cases[6].innerHTML &&
        cases[6].innerHTML != "" )
        isWin = true;

    // diag
    if (isWin)
    {
        if (!tour) txtInfo.innerHTML     = "Victoire du joueur 1";
        else      txtInfo.innerHTML      = "Victoire du joueur 2";
    }

}

// Events
for ( const c of cases) {
    c.addEventListener('click', event => {
        revealCase(c);
    })
}

// Reset
function reset() {
    tour     = true;
    isWin    = false;
    for(var cpt  = 0; cpt < 9; cpt++) cases[cpt].innerHTML = "";
    txtInfo.innerHTML = "Tour du joueur : 1";
}

// Button Reset
document.querySelector("#reset").addEventListener('click', event => { reset(); })