
Juan Pablo Ferro Arroyo
PreguntaPor alguna razon me da un error que dice “TypeError: this.colores[color] is null”
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') class Juego { constructor() { this.inicializar() this.generarSecuencia() this.siguienteNivel() } inicializar() { btnEmpezar.classList.add('hide') this.nivel = 1 this.colores = { celeste, violeta, naranja, verde } } generarSecuencia(){ this.secuencia = new Array(10).fill(0).map( n => Math.floor(Math.random() * 4) ) } siguienteNivel(){ this.iluminarSecuencia() } transformarNumeroAColor(numero){ switch(numero){ case 0: return 'celeste' case 1: return 'violeta' case 2: return 'naranja' case 3: return 'verde' } } iluminarSecuencia(){ for (let i = 0; i < this.nivel; i++) { let 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') } } function empezarJuego() { window.juego = new Juego() }

Sebastián Riátiga
Hola, jpferroa96.
Según lo que vi en tu código, los errores que me aparecieron fueron debido a que te faltaron los espacios entre case y el número en el método de switch (ej: case 0). También, en la parte del array te faltó un espacio en new Array. Y, dentro del ciclo for, otro entre let color. Te dejo tu código corregido ;):
Pd: recuerda que, según la explicación de Sacha, es mejor, para este caso, el uso de const en lugar de let (const color).
class Juego { constructor() { this.inicializar() this.generarSecuencia() this.siguienteNivel() } inicializar() { btnEmpezar.classList.add('hide') this.nivel = 1 this.colores = { celeste, violeta, naranja, verde } } generarSecuencia(){ this.secuencia = new Array(10).fill(0).map( n => Math.floor(Math.random() * 4) ) } siguienteNivel(){ this.iluminarSecuencia() } transformarNumeroAColor(numero){ switch(numero){ case 0: return'celeste' case 1: return'violeta' case 2: return'naranja' case 3: return'verde' } } iluminarSecuencia(){ for (let i = 0; i < this.nivel; i++) { let 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') } } function empezarJuego(){ window.juego = new Juego();

Massimo Di Berardino
Hola jpferroa96, esto se debe a que cuando en el HTML estás llamando a iluminarColor o apagarColor el this en ese momento en window, dicho de otra manera this es la instancia de un objeto en un bloque de codigo, por eso cuando tú llamas a alguna de estas funciones el objeto instancia do en el DOM es window, si esto no te queda claro haz esto, dentro de alguna de estas funciones haz un consolé.log(this) y nada mas, luego corre tu programa y abre la consoló ahí verás que te vuelve this y entenderás mejor de lo que hablo, ahora te dejo la solución sólo debes atar a estar funciones el this o sea indicarles que su this va a ser esa clase esto lo haces en el método constructor
constructor() { this.inicializar() this.generarSecuencia() this.siguienteNivel() this.iluminarColor = this.iluminarColor.bind(this); this.apagarColor = this.apagarColor.bind(this); }