Jesus Enrique Esis Parra
Preguntame pasa que el codigo se me ejecuta dos veces al activar el evento y hace que el subnivel suba dos veces en un solo click
Patricio Villarroel Durán
¡Hola Jesús!
Si pudieras compartirnos una captura de pantalla o copiar y pegar tu código, de seguro te podremos ayudar.
¡Saludos!
Jesus Enrique Esis Parra
const blue = document.getElementById('blue'); const yellow = document.getElementById('yellow'); const pink = document.getElementById('pink'); const orange = document.getElementById('orange'); const start = document.getElementById('start') class Game { constructor(){ this.init() this.newSecuence() this.nextLevel() } init(){ start.classList.add('hide') this.level = 1 this.maxlevel = 10 this.sublevel = 0 this.colores = { blue, yellow, pink, orange } } newSecuence(){ this.secuence = new Array(this.maxlevel).fill(0).map(n => Math.floor(Math.random() * 4)) console.log(this.secuence); } colorsSecuence(number){ switch(number){ case 0: return 'blue' case 1: return 'yellow' case 2: return 'pink' case 3: return 'orange' } } lightColor(color){ this.colores[color].classList.add('light') setTimeout(()=> this.turnOff(color), 350) } turnOff(color){ this.colores[color].classList.remove('light') } nextLevel(){ this.sublevel = 0 this.lightSecuence() this.eventHandlers() } lightSecuence(){ for(let i = 0; i < this.level; i++){ let color = this.colorsSecuence(this.secuence[i]) setTimeout(() => this.lightColor(color), 1000 * i) } } eventHandlers(){ this.colores.blue.addEventListener('click', this.chooseColor.bind(this)) this.colores.yellow.addEventListener('click', this.chooseColor.bind(this)) this.colores.pink.addEventListener('click', this.chooseColor.bind(this)) this.colores.orange.addEventListener('click', this.chooseColor.bind(this)) } chooseColor(e){ const colorName = e.target.dataset.color const colorNumber = this.colorToNumber(colorName) this.lightColor(colorName) if(colorNumber === this.secuence[this.sublevel]){ this.sublevel++ if(this.sublevel === this.level){ this.levelUp() console.log('siguiente') }else if (this.level === this.maxlevel) { alert('ganaste!') } }else{ console.log('perdiste'); } } levelUp(){ this.level++ setTimeout(() => this.nextLevel(), 1500) this.blockEventHandlers() } colorToNumber(color){ switch(color){ case 'blue': return 0 case 'yellow': return 1 case 'pink': return 2 case 'orange': return 3 } } blockEventHandlers(){ this.colores.blue.removeEventListener('click', this.chooseColor.bind(this)) this.colores.yellow.removeEventListener('click', this.chooseColor.bind(this)) this.colores.pink.removeEventListener('click', this.chooseColor.bind(this)) this.colores.orange.removeEventListener('click', this.chooseColor.bind(this)) } playAgain(){ this.level = 1 this.sublevel = 0 this.secuence = [] start.classList.remove('hide') this.blockEventHandlers() } } function startGame(){ let game = new Game() }```
Juan David Vejarano Martinez
Me pasa igual se me ejecuta 2 veces el evento de click cuando pongo un puto de interrupcion me llevaba al algo llamado mutations.forEach(function(mutation) y repetia de nuevo el evento del click, me di cuenta que es por esto this.colores.orange.addEventListener('click', this.chooseColor.bind(this)) en el video el pone el this.elegirColor = this.elegirColor.bind(this); en el método inicializar y así funciona, no tengo la explicación de por que funciona asi
Jesus Enrique Esis Parra
gracias tenias razon ya lo solucione asi como dijiste
