Me sale este error al inicializar el juego is not defined at HTMLButtonElement.onclick,

Karen Gómez

Karen Gómez

Pregunta
studenthace 5 años

Me sale este error al inicializar el juego is not defined at HTMLButtonElement.onclick,

2 respuestas
para escribir tu comentario
    Francisco Antonio Cruz Julio

    Francisco Antonio Cruz Julio

    studenthace 5 años

    Lo que pasa es que tenias a las funciones ganoElJuego y perdioElJuego dentro del curly bracket de: elegiColor(ev), entonces es solo sacarlas de alli, mira:

    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) { this.ganoElJuego(); } else { setTimeout(this.siguienteNivel, 1500); } } } else { this.perdioElJuego(); } } ganoElJuego() { swal("Felicidades, ganaste el juego", "success").then(() => { this.inicializar(); }); } perdioElJuego() { swal("Lastima", "Intentalo denuevo", "error").then(() => { this.eliminarEventosClick(); this.inicializar(); }); } }
    Karen Gómez

    Karen Gómez

    studenthace 5 años
    </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> <script> const celeste = document.getElementById('celeste') const violeta = document.getElementById('violeta') const naranja = document.getElementById('naranja') const verde = document.getElementById('verde') const btnEmpezar = document.getElementById('btnEmpezar') const ULTIMO_NIVEL = 10 class Juego { constructor() { this.inicializar = this.inicializar.bind(this) this.inicializar() this.generarSecuencia() setTimeout(this.siguienteNivel, 500) } inicializar() { this.siguienteNivel = this.siguienteNivel.bind(this) this.elegirColor = this.elegirColor.bind(this) this.toggleBtnEmpezar() this.nivel = 1 this.colores = { celeste, violeta, naranja, verde } } toggleBtnEmpezar() { if (btnEmpezar.classList.contains('hide')) { btnEmpezar.classList.remove('hide') } else { btnEmpezar.classList.add('hide') } } generarSecuencia() { this.secuencia = new Array(10).fill(0).map(n => Math.floor (Math.random() * 4)) } siguienteNivel() { this.subnivel = 0 this.iluminarSecuencia() this.agregarEventosClick() } transformarNumeroAColor(numero) { switch (numero) { case 0: return 'celeste' case 1: return 'violeta' case 2: return 'naranja' case 3: return 'verde' } } transformarColorANumero(color) { switch (color) { case 'celeste': return 0 case 'violeta': return 1 case 'naranja': return 2 case 'verde': return 3 } } 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.celeste.addEventListener('click', this.elegirColor) this.colores.violeta.addEventListener('click', this.elegirColor) this.colores.naranja.addEventListener('click', this.elegirColor) this.colores.verde.addEventListener('click', this.elegirColor) } eliminarEventosClick () { this.colores.celeste.removeEventListener('click', this.elegirColor) this.colores.violeta.removeEventListener('click', this.elegirColor) this.colores.naranja.removeEventListener('click', this.elegirColor) this.colores.verde.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)) { this.ganoElJuego() } else { setTimeout(this.siguienteNivel, 1500) } } } else { this.perdioElJuego() } ganoElJuego() { swal('Platzi', 'Felicitaciones, ganaste el juego!!!', 'success') .then(this.inicializar) } perdioElJuego() { swal('Platzi', 'Lo lamentamos, perdiste :(', 'error') .then(()=> { this.eliminarEventosClick() this.inicializar() }) } } function empezarJuego() { window.juego = new Juego() } </script>```
Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

JavaScript es un lenguaje de programación que se trabaja desde el navegador. Construye programas, conoce el entorno, los condicionales y las estructuras repetitivas. Aprende cuáles son y cómo se declaran las variables y las funciones de JS.

Fundamentos de JavaScript 2018
Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

JavaScript es un lenguaje de programación que se trabaja desde el navegador. Construye programas, conoce el entorno, los condicionales y las estructuras repetitivas. Aprende cuáles son y cómo se declaran las variables y las funciones de JS.