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>