5

Fiz um jogo da velha que verifica as condições de vitória do usuário com if, entretanto não achei uma solução elegante. Estou tentando desenvolver um método para verificar a condição de vitória com array, porém não estou tendo sucesso, segue o código:

// Variaveis Globais
var jogador = 'x';
var jogadas = 0;
//var vitoria = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];

// Inicia a jogada
function chkJogo(id) {
    var src = chkSrc(id);

    // Muda a imagem de acordo com o jogador
    if (src == "branco.png") {
        document.getElementById(id).src = "img/" + jogador + ".png";
        jogadas++;

        if (chkVitoria()) {
            alert("Fim do jogo! Vitória do " + jogador);
            return;
        }

        // Verifica se deu empate
        if (jogadas >= 9) {
            alert('Empate!');
            return;
        }

        if (jogador == 'x') {
            jogador = 'o';
        } else {
            jogador = 'x';
        }
    } else {
      //  alert('som erro, célula já usada');
    }

    // Verifica se é a vez do computador jogar, caso sim, o computador faz a jogada
    if (jogador == 'o') {
        chkJogo(compJogar());
    }
};

// Selecionando elemento da célula
function chkSrc(id) {
    var src = document.getElementById(id).src;
    return src.substring(src.length - 10, src.length);
};

// Computador realiza a sua jogada
function compJogar() {
    return Math.floor(Math.random() * 8);
}


// Condições de vitória
function chkVitoria() {
    if ((chkSrc('0') == chkSrc('1')) && (chkSrc('0') == chkSrc('2')) && chkSrc('0') != 'branco.png') {
        return true;
    }
    if ((chkSrc('3') == chkSrc('4')) && (chkSrc('3') == chkSrc('5')) && chkSrc('3') != 'branco.png') {
        return true;
    }
    if ((chkSrc('6') == chkSrc('7')) && (chkSrc('6') == chkSrc('8')) && chkSrc('6') != 'branco.png') {
        return true;
    }
    if ((chkSrc('0') == chkSrc('3')) && (chkSrc('0') == chkSrc('6')) && chkSrc('0') != 'branco.png') {
        return true;
    }
    if ((chkSrc('1') == chkSrc('4')) && (chkSrc('1') == chkSrc('7')) && chkSrc('1') != 'branco.png') {
        return true;
    }
    if ((chkSrc('2') == chkSrc('5')) && (chkSrc('2') == chkSrc('8')) && chkSrc('2') != 'branco.png') {
        return true;
    }
    if ((chkSrc('0') == chkSrc('4')) && (chkSrc('0') == chkSrc('8')) && chkSrc('0') != 'branco.png') {
        return true;
    }
    if ((chkSrc('2') == chkSrc('4')) && (chkSrc('2') == chkSrc('6')) && chkSrc('2') != 'branco.png') {
        return true;
    }
};
#tabela {
    border: 1px solid dodgerblue;
    align="center";
}

body {
    background-color: beige;
}
<!DOCTYPE html>
<html>

<head lang="pt-br">
    <meta charset="utf-8">
    <title>Jogo da Velha</title>
    <script type="text/javascript" src="js/jogoDaVelha.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jogoDaVelha.css">
</head>

<body>

    <table id="tabela">
        <tr>
            <td><img src="img/branco.png" id="0" onclick="chkJogo(this.id)"></td>
            <td><img src="img/branco.png" id="1" onclick="chkJogo(this.id)"></td>
            <td><img src="img/branco.png" id="2" onclick="chkJogo(this.id)"></td>
        </tr>
        <tr>
            <td><img src="img/branco.png" id="3" onclick="chkJogo(this.id)"></td>
            <td><img src="img/branco.png" id="4" onclick="chkJogo(this.id)"></td>
            <td><img src="img/branco.png" id="5" onclick="chkJogo(this.id)"></td>
        </tr>
        <tr>
            <td><img src="img/branco.png" id="6" onclick="chkJogo(this.id)"></td>
            <td><img src="img/branco.png" id="7" onclick="chkJogo(this.id)"></td>
            <td><img src="img/branco.png" id="8" onclick="chkJogo(this.id)"></td>
        </tr>
    </table>

</body>

</html>

Como pode ser verificado, com inúmeras funções if funciona, porém como já disse está repetindo muito o código. Como reduzir essa repetição (principalmente em condição de vitória).

1
  • Veja: Verificar ganhador de Jogo da Velha. Tem um if de validação e um único if e um loop na lógica de verificar o ganhador. Está em Java mas não creio que seja problema pra você.
    – Caffé
    Commented 18/11/2016 às 16:04

2 Respostas 2

6

Encontrei o método abaixo nesse tutorial de jogo da velha e adaptei na sua função, como não testei, é possível que seja necessário converter o calculo para string para funcionar corretamente.

function chkVitoria() {

// checar linhas
   for(var i = 0; i <= 6; i = i + 3) {
        if(chkSrc(i) !== "branco.png" && chkSrc(i) == chkSrc(i + 1) && chkSrc(i + 1) == chkSrc(i + 2)) {
            return true;
        }
    }


// checar colunas
   for(var i = 0; i <= 2 ; i++) {
        if(chkSrc(i) !== "branco.png" && chkSrc(i) == chkSrc(i + 3) && chkSrc(i + 3) == chkSrc(i + 6)) {
            return true;
        }
    }


//checar diagonais
    for(var i = 0, j = 4; i <= 2 ; i = i + 2, j = j - 2) {
        if(chkSrc(i) !== "branco.png" && chkSrc(i) == chkSrc(i + j) && chkSrc(i + j) == chkSrc(i + 2*j)) {
            return true;
        }
    }

};
1
  • 2
    A idéia eu acho legal, vale mencionar dá pra simplificar um bocado reaproveitando o(s) mesmo(s) loops (usar os de linha e de coluna com as coordenadas invertidas, por exemplo). Um loop e 4 linhas de teste é uma das variações possíveis. 2 loops encadeados é outra.
    – Largato
    Commented 17/11/2016 às 1:04
6

Se o problema é ter um monte de if, pode fazer com zero if:

function chkVitoria() {
    return ((chkSrc('0') == chkSrc('1')) && (chkSrc('0') == chkSrc('2')) && chkSrc('0') != 'branco.png') ||
           ((chkSrc('3') == chkSrc('4')) && (chkSrc('3') == chkSrc('5')) && chkSrc('3') != 'branco.png') ||
           ((chkSrc('6') == chkSrc('7')) && (chkSrc('6') == chkSrc('8')) && chkSrc('6') != 'branco.png') ||
           ((chkSrc('0') == chkSrc('3')) && (chkSrc('0') == chkSrc('6')) && chkSrc('0') != 'branco.png') ||
           ((chkSrc('1') == chkSrc('4')) && (chkSrc('1') == chkSrc('7')) && chkSrc('1') != 'branco.png') ||
           ((chkSrc('2') == chkSrc('5')) && (chkSrc('2') == chkSrc('8')) && chkSrc('2') != 'branco.png') ||
           ((chkSrc('0') == chkSrc('4')) && (chkSrc('0') == chkSrc('8')) && chkSrc('0') != 'branco.png') ||
           ((chkSrc('2') == chkSrc('4')) && (chkSrc('2') == chkSrc('6')) && chkSrc('2') != 'branco.png');
};

Coloquei no GitHub para referência futura.

Também tem como criar um array com os valores e fazer a verificação com for, mas não sei se compensa.

Não estou analisando se a condição de vitória está correta.

17
  • 2
    @Emoon isso é um jogo da velha.
    – Maniero
    Commented 17/11/2016 às 0:48
  • 2
    Quem negativou pode dizer o que tem de errado que eu corrijo.
    – Maniero
    Commented 17/11/2016 às 0:52
  • 2
    @bigown Provavelmente alguém que vai fazer um algoritmo "super elegante" de 15 ou 20 linhas, para eliminar 9 de comparação :P "ah, mas vai que no futuro o jogo da velha passa a ter 20 casas" kkk PS: antes que alguém diga alguma besteira, é evidente que sua resposta foi para o que foi perguntado, e para criar uma situação a se pensar, e não uma disputa de algoritmos genéricos, mas é uma conversa que aqui infelizmente não adianta muito.
    – Largato
    Commented 17/11/2016 às 0:54
  • 1
    @Emoon eu acho que código não se avalia só por número de caracteres, e provavelmente o Bigown teria um monte de alternativas para postar, mais curtas e mais longas (ao menos, eu teria). A questão é que a resposta foca no que o autor falou sobre diminuir numero de ifs, e foi mostrada uma solução sem if nenhum. Ambas as respostas resolvem, estão corretas (votei nas duas) e a dos loops é inclusive menos performática. Acho que quem deu -1 não sabe muito bem o que está avaliando, esse é meu ponto. Agora, pode ser que a pessoa tenha uma razão legítima, mas aí é só comentar o motivo.
    – Largato
    Commented 18/11/2016 às 0:36
  • 3
    @Emoon quanto ao seu direito de discordar, é realmente seu direito. Mas eu ironizar é uma maneira de me expressar também, em face de algo que eu discordo. Espero que tenha ficado clara a razão do comentário também. Mas de qq forma, se vc entende que é correto, é seu direito votar, apesar de eu entender que a finalidade do -1 é outra (apesar de usado como discordância no site Meta, especificamente). Obviamente que se tivesse tido uma manifestação aberta do negativo, eu em vez de "cutucar", já teria exposto diretamente a razão da discordância.
    – Largato
    Commented 18/11/2016 às 3:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .