0

No se si es un problema basico, trate de hacer un juego de memoria cuyo codigo estaba contenido en una sola clase, en una primera version saque el codigo de la clase e hize que las funciones se llamaran directamente, ahora en una segunda version tomo la clase entera del codigo que use de base solo para modificar el como se pierde y gana (todo lo que esta bajo la funcion elegir color es lo agregado), pero solo llama a la primera funcion (elegir color esta destinada a decidir cuando el usuario perdio y gano) dispara estas funciones ya sea si ganaste o perdiste pero ninguna de esas funciones esta disparando sus funciones anidadas ambas con set time outs, no se si es mi desconocimiento de las clases u otra cosa, quizas etnga que ver con hacer un bind con this, pero que funciones y porque requerirían eso

el html para evitar poner tanto codigo https://github.com/moorooba/simon/blob/master/simon3.html

  const boton = document.getElementById("btnEmpezar");

  const verde = document.getElementById("verde");
  const amarillo = document.getElementById("amarillo");
  const azul = document.getElementById("azul");
  const rojo = document.getElementById("rojo");
  const blanco = document.getElementById("blanco");
  const ULTIMO_NIVEL = 3;

  const marino = document.getElementById("marino");
  const sapo = document.getElementById("sapo");
  const mostaza = document.getElementById("mostaza");
  const tinto = document.getElementById("tinto");

  const loser = document.getElementById("loser");
  const winner = document.getElementById("winner");

  class Juego {
    constructor() {
      this.inicializar = this.inicializar.bind(this);
      this.inicializar();
      this.generarSecuencia();
      setTimeout(this.siguienteNivel, 500);
      this.startos = this.startos.bind(this);
    }

    inicializar() {
      this.siguienteNivel = this.siguienteNivel.bind(this);
      this.elegirColor = this.elegirColor.bind(this);
      this.toggleBtnEmpezar();
      this.nivel = 1;
      this.colores = {
        azul,
        amarillo,
        rojo,
        verde,
        blanco,
        marino,
        mostaza,
        tinto,
        sapo,
      };
    }

    toggleBtnEmpezar() {
      if (boton.classList.contains("hide")) {
        boton.classList.remove("hide");
      } else {
        boton.classList.add("hide");
      }
    }

    generarSecuencia() {
      this.secuencia = new Array(ULTIMO_NIVEL)
        .fill(0)
        .map((n) => Math.floor(Math.random() * 5));
    }

    siguienteNivel() {
      this.subnivel = 0;
      this.iluminarSecuencia();
      this.agregarEventosClick();
    }

    transformarNumeroAColor(numero) {
      switch (numero) {
        case 0:
          return "azul";
        case 1:
          return "amarillo";
        case 2:
          return "rojo";
        case 3:
          return "verde";
        case 4:
          return "blanco";
      }
    }

    transformarColorANumero(color) {
      switch (color) {
        case "azul":
          return 0;
        case "amarillo":
          return 1;
        case "rojo":
          return 2;
        case "verde":
          return 3;
        case "blanco":
          return 4;
      }
    }

    iluminarSecuencia() {
      for (let i = 0; i < this.nivel; i++) {
        const color = this.transformarNumeroAColor(this.secuencia[i]);
        setTimeout(() => this.iluminarColor(color), 1000 * i);
      }
    }

    iluminarColor(color) {
      this.colores[color].classList.add("light");
      setTimeout(() => this.apagarColor(color), 350);
    }

    apagarColor(color) {
      this.colores[color].classList.remove("light");
    }

    agregarEventosClick() {
      this.colores.azul.addEventListener("click", this.elegirColor);
      this.colores.verde.addEventListener("click", this.elegirColor);
      this.colores.amarillo.addEventListener("click", this.elegirColor);
      this.colores.rojo.addEventListener("click", this.elegirColor);
      this.colores.blanco.addEventListener("click", this.elegirColor);
    }

    eliminarEventosClick() {
      this.colores.azul.removeEventListener("click", this.elegirColor);
      this.colores.verde.removeEventListener("click", this.elegirColor);
      this.colores.amarillo.removeEventListener("click", this.elegirColor);
      this.colores.rojo.removeEventListener("click", this.elegirColor);
      this.colores.blanco.removeEventListener("click", this.elegirColor);
    }

    elegirColor(ev) {
      const nombreColor = ev.target.dataset.color;
      const numeroColor = this.transformarColorANumero(nombreColor);
      this.iluminarColor(nombreColor);
      if (numeroColor === this.secuencia[this.subnivel]) {
        this.subnivel++;
        if (this.subnivel === this.nivel) {
          this.nivel++;
          this.eliminarEventosClick();
          if (this.nivel === ULTIMO_NIVEL + 1) {
            setTimeout(this.secuenciaFinal, 700);
          } else {
            setTimeout(this.siguienteNivel, 1500);
          }
        }
      } else {
        setTimeout(this.perdioJuego, 700);
      }
    }

    // ganoElJuego() {
    //   swal("Platzi", "Felicitaciones, ganaste el juego!", "success").then(
    //     this.inicializar
    //   );
    // }

    // perdioElJuego() {
    //   swal("Platzi", "Lo lamentamos, perdiste :(", "error").then(() => {
    //     this.eliminarEventosClick();
    //     this.inicializar();
    //   });
    // }

    ganoJuego() {
      winner.classList.remove("hide");

      setTimeout(this.start, 1000);
    }

    start() {
      winner.classList.add("hide");
      boton.classList.remove("hide");
      this.inicializar();
    }

    perdioJuego() {
      loser.classList.remove("hide");

      setTimeout(this.startos, 1000);
    }

    startos() {
      loser.classList.add("hide");
      boton.classList.remove("hide");

      this.generarSecuencia();
    }

    secuenciaFinal() {
      console.log("dispara");
      // this.eliminarEventosClick();
      for (let i = 0; i < 4; i++) {
        setTimeout(this.iluminarSecuenciaFinal, 1000 * i);
      }

      setTimeout(this.ganoJuego, 4000);
    }

    iluminarSecuenciaFinal() {
      this.colores.amarillo.classList.add("light");
      this.colores.verde.classList.add("light");
      this.colores.rojo.classList.add("light");
      this.colores.azul.classList.add("light");

      setTimeout(this.apagarSecuenciaFinal, 500);
    }

    apagarSecuenciaFinal() {
      this.colores.amarillo.classList.remove("light");
      this.colores.rojo.classList.remove("light");
      this.colores.verde.classList.remove("light");
      this.colores.azul.classList.remove("light");

      iluminarSecuenciaFinal2();
    }

    iluminarSecuenciaFinal2() {
      this.colores.marino.classList.add("light");
      this.colores.sapo.classList.add("light");
      this.colores.mostaza.classList.add("light");
      this.colores.tinto.classList.add("light");
      setTimeout(this.apagarSecuenciaFinal2, 500);
    }

    apagarSecuenciaFinal2() {
      this.colores.marino.classList.remove("light");
      this.colores.sapo.classList.remove("light");
      this.colores.mostaza.classList.remove("light");
      this.colores.tinto.classList.remove("light");
    }
  }

  function empezarJuego() {
    window.juego = new Juego();
  }
</script>
1
  • ¿Qué función no es llamada? No está claro.
    – Juan
    Commented el 26 jun. 2021 a las 9:13

1 respuesta 1

0

Lo ideal es que las llamadas a una función no esten primero que la declaración de las mismas. Debería ser así:

function llamarFunc(){...}
llamarFunc();

y no al revés. En especial si las llamas dentro de una función anidada, dado que al momento de inicializarse la función padre, dentro de ese scope, la función que intentas llamar no sabe que en el scope general hay una función que se inicializa después, así que no la reconoce. Ejemplo en tu código, apagarSecuenciaFinal2 a lo cual, también deberías agregar los paréntesis (linea 559) y quedar como setTimeout(apagarSecuenciaFinal2(), 500);.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.