Tengo un juego de Triqui, el problema es cuando alguno de los dos gana, el juego sigue. Necesito que apenas uno gane, se detenga hasta que le den al botón reiniciar. Aquí el código:
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TRIQUI</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="tictactoe.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row ">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h3>TRIQUI</h3>
<div id="tictactoe"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<script src="tictactoe.js">
</script>
</body>
</html>
JS
var turno="o";
var cantidadOpciones=3;
var Juego="tictactoe";
CrearComponentesJuego();
$( ".pieza" ).click(function() {
$(this).val(turno);
cotejar();
turno=(turno=="o")?"x":"o";
$('#turnoDisplay').val(turno);
});
function cotejar(){
for(i=1;i<=cantidadOpciones;i++){
for(j=1;j<=cantidadOpciones;j++){
fila=i;columna=j;
contadorTotalFilas=1;
contadorTotalcolumnas=1;
contadorDiagonal=1;
contadorDiagonalInversa=1;
contadorTurnos=0;
$( ".pieza" ).each(function( index ) {
elid=$( this ).attr('id');
if((elid.charAt(0)==fila)&&($( this ).val()==turno)){
contadorTotalFilas++;
if(contadorTotalFilas==(cantidadOpciones+1)){campeon(); }
}
if((elid.charAt(1)==columna)&&($( this ).val()==turno)){
contadorTotalcolumnas++;
if(contadorTotalcolumnas==(cantidadOpciones+1)) {campeon();}
}
if((elid.charAt(1)==elid.charAt(0))&&($( this ).val()==turno)){
contadorDiagonal++;
if(contadorDiagonal==(cantidadOpciones+1)){campeon();}
}
valorTotaldiagonal= parseInt(elid.charAt(1))+parseInt(elid.charAt(0));
if(((valorTotaldiagonal)==(cantidadOpciones+1)) &&($( this
).val()==turno)){
contadorDiagonalInversa++;
if(contadorDiagonalInversa==(cantidadOpciones+1)){campeon();
}
}
if($(this).val()!="-"){contadorTurnos++;
if(contadorTurnos==(cantidadOpciones*cantidadOpciones))
{TerminarJuego();}
}
if(contadorTurnos==9){
Reiniciar();
}
});
}}
}
function TerminarJuego(){
$("#alertMensaje").html("Juego terminado");
$(".alert").show('slow');
$( "#iniciar" ).removeClass( "disabled" );
}
function Reiniciar(){
$(".alert").hide('slow');
contadorTotalFilas=1;
contadorTotalcolumnas=1;
contadorDiagonal=1;
contadorDiagonalInversa=1;
contadorTurnos=0;
$( ".pieza" ).each(function( index ) { $( this ).val('-');});
$( "#iniciar" ).addClass( "disabled" );
}
function campeon(){
$("#alertMensaje").html('Ganador <strong><input class="ganador btn btn-
primary btn-lg" type="button" value="'+turno+'"></strong>');
$(".alert").show('slow');
$( "#iniciar" ).removeClass( "disabled" );
}
function cerrarAlert(){
$(".alert").hide('slow');
$( "#iniciar" ).removeClass( "disabled" );
Reiniciar();
}
function CrearComponentesJuego(){
$("#"+Juego).append('<div class="alert alert-dismissible alert-warning
collapse"><button type="button" class="close"
onclick="cerrarAlert()">×</button><div id="alertMensaje"></div></div>');
for(i=1;i<=cantidadOpciones;i++){
for(j=1;j<=cantidadOpciones;j++){
$("#"+Juego).append( "<input class='pieza btn btn-primary btn-lg'
type='button' value='-' id='"+i+j+"'/>" );
}
$("#"+Juego).append( "<hr style=' margin: 7px;'/>" );
}$("#"+Juego).append('<br/>');
$("#"+Juego).append('<span class=" well"><strong>Turno:</strong> <input
class="btn btn-warning" id="turnoDisplay" type="button" value="o"></span>');
$("#"+Juego).append('<br/>');
$("#"+Juego).append('<br/>');
$("#"+Juego).append('<input type="button" id="iniciar"
onclick="Reiniciar()" value="Reiniciar" class="btn btn-danger btn-lg
disabled"/>');
}
CSS
.pieza{border: 1px solid #e0e0e0;width: 70px;height:70px;margin-left: 15px;margin-right: 15px;}
.pieza[value="x"]{color: #ffffff;background-color: #4caf50;}
.pieza[value="o"]{ color: #ffffff;background-color: #9c27b0;}
.ganador{border: 1px solid #e0e0e0;width: 70px;height:70px;margin-left: 15px;margin-right: 15px;}
.ganador[value="x"]{color: #ffffff;background-color: #4caf50;}
.ganador[value="o"]{ color: #ffffff;background-color: #9c27b0;}