Check Old Jquery’s Winning Game

Asked

Viewed 258 times

3

I created a function to check lines on the horizon, vertical and diagonal, to see which is the winner, but when I call the function it shows winner right at the first click. Can someone help me what to change in the code for logic to work?

Follow the code I already have here:

<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>

jquery

1 answer

5


var vez = 1;
var vencedor = "";


$(document).ready(function() {

  function casasIguais(a, b, c) {
    var casaA = $("#btn" + a);
    var casaB = $("#btn" + b);
    var casaC = $("#btn" + c);
    var bgA = $("#btn" + a).text();
    var bgB = $("#btn" + b).text();
    var bgC = $("#btn" + c).text();
    if ((bgA == bgB) && (bgB == bgC) && (bgA != "none" && bgA != "")) {
      if (bgA.indexOf("X") >= 0)
        vencedor = "1";
      else
        vencedor = "2";
      return true;
    } else {
      return false;
    }
  }

  function verificarFimDeJogo() {
    if (casasIguais(1, 2, 3) || casasIguais(4, 5, 6) || casasIguais(7, 8, 9) ||
      casasIguais(1, 4, 7) || casasIguais(2, 5, 8) || casasIguais(3, 6, 9) ||
      casasIguais(1, 5, 9) || casasIguais(3, 5, 7)
    ) {
      $("#resultado").html("<h1>O jogador " + vencedor + " venceu! </h1>");
      $(".casa").off("click");
    }
  }

  $(".btn").click(function() {
    var bg = $(this).text();
    if (bg == "none" || bg == "") {
      var fig = vez.toString();
      if (vez == 1) {
        $(this).text("X");
        jogador = 2;

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

      }
      $("#jogador").text("É a vez do jogador " + jogador);
      vez = (vez == 1 ? 2 : 1);
      verificarFimDeJogo();
    }

  });

});
.botao {
  width: 32%;
  height: 100px;
  font-size: 70px;
  font-weight: bold;
  border-radius: 0px;
}
#jogador {
  font-size: 38px;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<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 id="resultado"></div>
    </div>
  </div>
</body>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.