JogoDaVelhaJavaScript/script.js at main · Lallindo/JogoDaVelhaJavaScript · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
var jogadas = 1;
var classeBotoes = document.getElementsByClassName('bot');
var resultado = 'empate'

function marcar(value) // Marca o lugar clicado com X ou O
{
    if (value.innerHTML != 'x' && value.innerHTML != 'o') {
        if (((jogadas % 2) == 1))
        {
            value.innerHTML = 'x'
            value.style = 'color: red; font-size: 20px'
        } else {
            value.innerHTML = 'o'
            value.style = 'color: blue; font-size: 20px'
        }
        jogadas++;
        condicaoVitoria();
    }
}

function encherArrays() // Arrays com os valores das caixas
{
    let arrayLi1 = [
        document.getElementById('b1').innerHTML,
        document.getElementById('b2').innerHTML,
        document.getElementById('b3').innerHTML
    ];

    let arrayLi2 = [
        document.getElementById('b4').innerHTML,
        document.getElementById('b5').innerHTML,
        document.getElementById('b6').innerHTML
    ];

    let arrayLi3 = [
        document.getElementById('b7').innerHTML,
        document.getElementById('b8').innerHTML,
        document.getElementById('b9').innerHTML
    ];

    let arrayCaixas // Array com todos os valores, acesso: [linha-1][coluna-1];
    =  [
        arrayLi1, arrayLi2, arrayLi3
    ]

    /*
         0  1  2
         -------
    0 | [1, 2, 3],
    1 | [4, 5, 6],
    2 | [7, 8, 9]
    */
    return arrayCaixas;
}

function condicaoVitoria() // Condições de vitória e empate
{
    let arrayCaixas = encherArrays();

    for (i = 0; i < 3; i++) // Verificação para vitórias horizontais
    {
        if ((arrayCaixas[i].join('') === 'xxx') || (arrayCaixas[i].join('') === 'ooo'))
        {
            console.log('vitória');
            resultado = 'vitoria'
            desabilitarBots(resultado);
        }
    }

    for (i = 0; i < 3; i++) // Verificação para vitórias verticais
    {
        let charCaixa = '';
        for (j = 0; j < 3; j++)
        {
            charCaixa += arrayCaixas[j][i];
        }
        if (charCaixa == 'xxx' || charCaixa == 'ooo'){
            console.log('vitória');
            resultado = 'vitoria'
            desabilitarBots(resultado);
        }
    }

    // Verificação para vitórias diagonais
    let diagEsq = arrayCaixas[0][0] + arrayCaixas[1][1] + arrayCaixas[2][2];
    let diagDir = arrayCaixas[0][2] + arrayCaixas[1][1] + arrayCaixas[2][0];

    if (diagEsq === 'xxx' || diagEsq === 'ooo') // Diagonal Esquerda
    {
        console.log('vitória');
        resultado = 'vitoria'
        desabilitarBots(resultado);
    }

    if (diagDir === 'xxx' || diagDir === 'ooo') // Diagonal Direita
    {
        console.log('vitória');
        resultado = 'vitoria';
        desabilitarBots(resultado);
    }

    if (jogadas == 10){ // Condição de empate, caso a função 'desabilitarBots' não for chamada anteriormente, ela irá ser chamada com a variável resultado como 'empate'
        desabilitarBots(resultado);
    }
}

function desabilitarBots(resultado) // Desabilita os botões
{
    for (i = 0; i < 9; i++)
    {
        classeBotoes[i].disabled = true;
    }
    mensVit(resultado)
}

function mensVit(resultado) // Dá a mensagem de vitória ou empate
{
    document.getElementById('mensVit').style.border = '1px solid black';
    if (resultado == 'vitoria'){
        let sinalVenc = '';

        if ((jogadas%2 == 0))
        {
            sinalVenc = 'X';
            document.getElementById('mensVit').style.color = 'red'
        } else {
            sinalVenc = 'O';
            document.getElementById('mensVit').style.color = 'blue'
        }

        document.getElementById('mensVit').innerHTML = 'O sinal vencedor foi o ' + sinalVenc;
    } else if (resultado == 'empate'){
        document.getElementById('mensVit').innerHTML = 'Empate';
    }
}