Triqui game [closed]

Question

Triqui game [closed]

Navigation

#1 by (2 votes)

1

I have a Triqui game, the problem is when one of the two wins, the game continues. I need that as soon as one wins, it stops until the reset button is given. Here the code:

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

javascript html css

asked by FOX 11.10.2018 в 05:09

source

1 answer

How can I print with a list from 2018 to 1920? Firebase Hosting with Vue.js

score 2 · Accepted Answer

To achieve what you want, you only need some changes in your js.

When the number of turns is exhausted you should call the game end ()
When someone is a winner, you must block all buttons using the .attr ('disabled', false) function with a forEach, which you have already implemented
And also in your function restart () you will have to re-activate the buttons with the same property that I indicated:

$ (".pieza") .each (function (index) {$ (this) .val ('-'); $ (this) .attr ('disabled', false)});

I leave the script for you to see:

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) {
          TerminarJuego();
        }

      });
    }
  }
}

function TerminarJuego() {
  $("#alertMensaje").html("Juego terminado");
  $(".alert").show('slow');
  $("#iniciar").removeClass("disabled");
  $(".pieza").each(function(index) {
    $(this).attr('disabled', true);
  }); //
}

function Reiniciar() {
  $(".alert").hide('slow');
  contadorTotalFilas = 1;
  contadorTotalcolumnas = 1;
  contadorDiagonal = 1;
  contadorDiagonalInversa = 1;
  contadorTurnos = 0;
  $(".pieza").each(function(index) {
    $(this).val('-');
    $(this).attr('disabled', false)
  }); //
  $("#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");
  $(".pieza").each(function(index) {
    $(this).attr('disabled', true);
  });
}

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"/>');
}