I created a function to check lines in horizonal, vertical and diagonal, to see which is the winner, but when I call the function it shows the winner on the first click. Can someone help me with what to change in the code for the 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><scriptsrc="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>