Skip to main content
2 de 2
removeu 27 caracteres do conteúdo
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Verificação vencedor jogo da velha Jquery

Criei uma função para verificar linhas na horizonal, vertical e diagonal, pra ver qual é o vencedor, mas quando chamo a função ela mostra vencedor logo no primeiro clique. Alguem pode me ajudar no que alterar no codigo pra que a logica funcione?

Segue o codigo que ja tenho aqui:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .botao {
            width: 32%;
            height: 100px;
            font-size: 70px;
            font-weight: bold;
            border-radius: 0px;
        }
        
        #jogador {
            font-size: 38px;
        }

    </style>

</head>

<body>
    <div class="row">
        <div class="container col-sm-4 col-sm-offset-4 bloco">
            <button id="btn1" name="btn1" class="btn btn-default botao"></button>
            <button id="btn2" name="btn2" class="btn btn-default botao"></button>
            <button id="btn3" name="btn3" class="btn btn-default botao"></button>
            <button id="btn4" name="btn4" class="btn btn-default botao"></button>
            <button id="btn5" name="btn5" class="btn btn-default botao"></button>
            <button id="btn6" name="btn6" class="btn btn-default botao"></button>
            <button id="btn7" name="btn7" class="btn btn-default botao"></button>
            <button id="btn8" name="btn8" class="btn btn-default botao"></button>
            <button id="btn9" name="btn9" class="btn btn-default botao"></button>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-sm-offset-3">
            <label class="col-sm-offset-3 col-xs-offset-2" id="jogador">É a vez do jogador 1</label>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            var jogador = 1;

            $(".botao").click(function() {
                if (jogador == 1) {
                    $(this).text("X");
                    jogador = 2;

                } else {
                    $(this).text("O");
                    jogador = 1;

                }
                $("#jogador").text("É a vez do jogador " + jogador);
            });
        });

        function verificar() {
            if (
                //Verificação na horizontal
                $("btn1,btn2,btn3").text("X") || $("btn4,btn5,btn6").text("X") || $("btn7,btn8,btn9").text("X") ||
                //Verificação na vertical   
                $("btn1,btn4,btn7").text("X") || $("btn2,btn5,btn8").text("X") || $("btn3,btn6,btn9").text("X") ||
                //Verificação na diagonal   
                $("btn1,btn5,btn9").text("X") || $("btn3,btn5,btn7").text("X")) {

                alert("O jogador 1 venceu !");
            } else if (
                //Verificação na horizontal
                $("btn1,btn2,btn3").text("O") || $("btn4,btn5,btn6").text("O") || $("btn7,btn8,btn9").text("O") ||
                //Verificação na vertical   
                $("btn1,btn4,btn7").text("O") || $("btn2,btn5,btn8").text("O") || $("btn3,btn6,btn9").text("O") ||
                //Verificação na diagonal   
                $("btn1,btn5,btn9").text("O") || $("btn3,btn5,btn7").text("O")) {

                alert("O jogador 2 venceu!");
            }
        }

    </script>>

</body>