Agregando la verificación del color elegido

Clase 45 de 55 • Fundamentos de JavaScript 2018

Resumen

Para agregar atributos al objeto principal en el que está nuestro código, basta con usar this, haciendo referencia al contexto de la clase, y agregar los atributos con un punto: this.atributo = valor

La verificación del color elegido la haremos creando y removiendo los eventos del click al pasar el juego a cada nuevo nivel.

Jorge Israel Lombardero Juarez

student•

Nota: es conveniente colocar desde el constructor del objeto la función bind, para evitar que en las futuras iteraciones la referencia this se dirija a Window en lugar de al objeto (en este caso el juego).

Daniel Páez

student•

Gracias por tu apunte, me lo tomo como idea clave 😃

Jose L. Figueroa

student•

Excelente nota!!!! También iba a agregarla!!! Gracias!!

Exal Rodríguez

student•

Soy el único que se está perdiendo?

Marlon Hugo Mejia Pantoja

student•

A mi me todo un dia esta clase para entender todo xD

Julián David Palacios Cárdenas

student•

Esta buena la idea de los marcadores, intenté entrar al tutorial de notion pero solo me abre una imagen.

Jeison Sneider Ruiz Zemanate

student•

código clase verificación del color elegido

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.generarSecuencia()

          setTimeout(this.siguienteNivel(),500)
          
        }
        inicializar() {
            this.elegirColor= this.elegirColor.bind(this)
            this.siguienteNivel = this.siguienteNivel.bind(this)
            btnEmpezar.classList.add('hide')
          this.nivel= 1
          this.colores= {
            celeste,
            violeta,
            naranja,
            verde
          }
        }

        generarSecuencia(){
        this.secuencia= new Array(ULTIMO_NIVEL).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++)
        {
            let color =this.transformarNumeroAColor(this.secuencia[i])
            
           setTimeout(() => {
            console.log(color)
            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.verde.addEventListener('click',this.elegirColor)
           this.colores.violeta.addEventListener('click',this.elegirColor)
           this.colores.naranja.addEventListener('click',this.elegirColor)
        }

        eliminarEventosClick(){
            this.colores.celeste.removeEventListener('click',this.elegirColor)
           this.colores.verde.removeEventListener('click',this.elegirColor)
           this.colores.violeta.removeEventListener('click',this.elegirColor)
           this.colores.naranja.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)){
                    //GANO
                }else{
                    setTimeout(this.siguienteNivel,1500)
                }
            }

           }else{
               //perdio
           }
        }
    
    }
      function empezarJuego() {
        window.juego = new Juego()
      
    }

Miguel Angel Reyes Moreno

student•

Gracias, hiciste que viera dónde tenía un error :)

Miguel Angel Escobar Melo

student•

Thankssss

Saul Escala

student•

se hacen algo complicadas las clases del proyecto porque damos demasidas cosas en una sola clase y no se aprecia muy bien la logica

Andrés Argote

student•

Podemos reportarlo para que pongan más cuidado, personalmente pienso que el curso iba de manera excelente, hasta que toco los temas de poo y asincronismo, al igual que hacer un proyecto con el paradigma de poo, sabiendo que el curso de programación basica es programación estructurada y la mayoria de este curso fue en programación estructurada, según yo no puedes pasar de un paradigma sin antes haberlo enseñado bien, y con bien no me refiero a la teoria(no vale de nada la teoria sino entiendes como aplicarla en la practica) además deberían de por cada clase poner un ejercicio como lo hicieron en alguna clases, y antes que me digan de que si no entiendes algo buscalo por internet, no tiene sentido ya que si pago Platzi quiero que mi estudio o la mayor parte de mi estudio se lleve a cabo dentro de Platzi, no que tenga que investigar fuera de Platzi para entender algo, sino simplemente me voy al temario de los cursos e investigo por mi parte todo. (Esa es mi opinión por lo menos en este curso).

Javier Romero

student•

yo estoy frustrado con todo este código y pienso que para un "curso básico" y entre comillas lo pongo, como el de fundamentos no debe tener cosas muy complejas en todas las clases.

Octavio Rodriguez

student•

En el 14:26 hace varias maromas para hacer lo del this pero con solo llamar a una arrow function no pasa eso

setTimeout(()=&gt;this.siguienteNivel(),2000 )

Miguel Bonifaz

student•

Buen punto !

Luis Ricardo Moran Chozo

student•

Después de repetir 10 veces el vídeo logré entender muchísimo más.

Mayra Yelitza Navas Carrascal

student•

Excelente! Espero algún día poder programar a este y mucho más nivel, se ve genial hasta ahora el juego. Soy nueva en esto y la verdad me causa intriga si podré hacer todo esto por mi cuenta :)

José Carlos Vielman Mallada

student•

que tal?

Luis Xavier Perez Miramontes

student•

Creo que la variable "subnivel" podría entenderse mejor como "número de aciertos"

Bernardo Aguayo Ortega

student•

concuerdo

Juan Carlos Ortiz Huamán

student•

No entendi bien la diferencia entre llamar a un metodo con () y sin (). Cuando llamo a this.siguienteNivel() con parentesis NO espera los 700 milisegundos y brilla de inmediato el juego, si lo pongo sin parentesis this.siguienteNivel SI espera los 700 milisegundos y luego de eso brilla el juego.

constructor() {
    this.inicializar()
    this.generarSecuencia()
    setTimeout(this.siguienteNivel,700)

  }```

Juan Castro

teacher•

Los callbacks son funciones que pasas como parámetro a otras funciones.

Imagina el siguiente código:

function ejecutarPatito(callback) {
	/* bla bla bla */
	calback();
	/* bla bla bla */
}

function patito() {
	console.log("PATITO!!")
}

ejecuarPatito(patito); // PATITO!!

La función ejecutarPatito se encarga de ponerle los paréntesis (osea, ejecutar) la función callback (en este caso, la función patito).

Si en cambio utilizas los paréntesis (ejecutarPatito(patito())) puedes estas llamando a la función callback antes de tiempo y tu código puede no funcionar.

Juan Carlos Ortiz Huamán

student•

Graciass, eso me ayudo XD

Diego Alejandro Correa Quecán

student•

Un pequeño cambio para no permitir que se haga click mientras se muestra la secuencia, primero quito la llamada a agregarEventosClick del método siguienteNivel.

    siguienteNivel() {
        this.subNivel = 0;
        this.iluminarSecuencia();
    }

Luego desde el método iluminarSecuencia envío el contador al método iluminarColor

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

Desde el método iluminarColor también envío ese contador al método apagarColor.

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

Finalmente en el método apagarColor valido si se esta apagando el último color de la secuencia para agregar los eventos de click con el método agregarEventosClick

    apagarColor(color, i) {
        this.colores[color].classList.remove('light');
        if ((i+1) === this.nivel) {
            this.agregarEventosClick();
        }
    }

Elisa Zamarron Muñoz

student•

¡Gracias! Justo algo así estaba buscando, supongo que eso sucede por los callbacks de los setTimeout ¿Verdad?

Juan Jaramillo

student•

Un pequeño detalle para la usabilidad del juego, la función 'agregarEventosClick' que se encuentra en la función 'siguienteNivel' debería de llamarse una vez se ilumine toda la secuencia completa y deje de iluminar el ultimó color, puesto que sino, podríamos hacer _click _ en un color mientras se esta iluminando la secuencia...

Facundo Nicolás García Martoni

teacher•

Totalmente

Gonzalo Mansilla

student•

De todas formas creo que se podra hacer click en los colores, debido a los callbacks que se utilizan para iluminar la secuencia, es decir, que mientras se ilumina la secuencia JS agregara los eventListener a los colores, debido a los setTimeOut

Oscar Stevens Cuartas Bejarano

student•

no se usan los parentesis en una funcion si esta dentro de un SETTIMEOUT() debido a que es un llamado a la referencia no una invocacion, minuto 11:45

Jorge Andres Muñoz Becerra

student•

Por que en algunas ocaciones cuando se usa el setTimeOut se usa una arrow function y en otras no?

Camilo Vega

student•

Para cambiar el contexto del this, recuerda que con una arrow function el this se va al objeto directo superior que sería la clase juego en este sentido, si pones la funcion normal entonces se iría al contexto global que es window!.

Sacha para solucionar el problema puso bind, yo solo cambié a una arrow y el contexto fue el que yo quería!

Ginnio Sarabia

student•

Excelente.

A mi hijo de 2 años le encanta ver los colores del juego.

Mauricio Gualteros

student•

pucha, siento que solo copeo lo que hace sacha, soy el único ? no se si estoy aprendiendo, siento que necesito practicar para poder asimilar tantos conceptos, tanta información. alguien sabe donde puedo obtener ejercicios de cada tema para practicar la lógica y todo ?

Andres Felipe Garcia Echeverria

student•

Se están manipulando objetos del DOM (Los elementos html's) Eso es algo que no explicaron en este curso y quizá te sientas perdido por eso. Trata de entender lo que mas puedas y practica. No te preocupes que todos pasamos por eso

Douglas San Anton Bianchi

student•

Me siento exactamente igual pero bueno hago los resúmenes y se que después de terminar mis cursos en platzi, para poder trabajar voy a tener que dedicar muchos días de practica para asimilar bien tanta información, al principio parece desesperante pero se que si entiendo los conceptos una vez se que con practica me voy a familiarizar.. Tranquilo y mucha suerte!!

Gabriel Ospina

student•

Es dificil comprender cuando invocas a la función y cuando solo hacer referencia a ella. Ejem: this.siguienteNivel vs this.siguienteNivel() Como dicen, en algún momento todo hará click y entenderemos. Sigan practicando

Sebastian Duran

student•

Eso pasa en estas nuevas versiones de js donde puedes utilizar las dos formas de llamar la función si no tienen argumentos, creo

Arturo Mauricio Terceros Beltrán

student•

Esto tiene que ver mucho con los callback. Ese es el motivo.

Carlos Junior Guzman Rodriguez

student•

Clase de hoy

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.generarSecuencia()
        setTimeout(this.siguienteNivel, 500)
    } 
    inicializar(){  
        this.siguienteNivel = this.siguienteNivel.bind(this )   
        this.elegirColor = this.elegirColor.bind(this) 
        
        btnEmpezar.classList.add('hide')
        this.nivel = 1 
        this.colores = {
            celeste, 
            violeta,
            naranja,
            verde
        }    
    }  

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

    siguienteNivel(){
        //inicializando el subnivel
        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(numero){
        switch (numero){
            case 'celeste': 
                return 0;
            case 'violeta':
                return 1;
            case 'naranja':
                return 2;
            case 'verde':
                return 3;
        }
    }

    iluminarSecuencia(){
        /*aplicamos i < this.nivel porque el numero del nivel 
		corresponde al numero de elementos que le usuario 
        modificara y tendra que seguir */
        
        for (let i = 0; i < this.nivel; i++){
            const color = this.transformarNumeroAColor(this.secuencia[i]) 
            // Ej: const color = "verde"

            setTimeout(() => this.iluminarColor(color), 1000*i)
			//colocar x * i nos permite acumular tiempo en función del for

        }
    }

    iluminarColor(color){
		//Colocando la clase que ilumina el color
        this.colores[color].classList.add('light')
        setTimeout(() => this.apagarColor(color), 350)
    }

    apagarColor(color){
		//Quitando la clase que ilumina el color
        this.colores[color].classList.remove('light')
    }

    agregarEventosClick(){
		//para obtener el input agregando un manejador de eventos (click)
        this.colores.celeste.addEventListener('click', this.elegirColor)
        this.colores.verde.addEventListener('click', this.elegirColor)
        this.colores.violeta.addEventListener('click', this.elegirColor)
        this.colores.naranja.addEventListener('click', this.elegirColor)
    }

    eliminarEventosClick(){
        //para remover el input agregado al manejador de eventos (click)
        this.colores.celeste.removeEventListener('click', this.elegirColor)
        this.colores.verde.removeEventListener('click', this.elegirColor)
        this.colores.violeta.removeEventListener('click', this.elegirColor)
        this.colores.naranja.removeEventListener('click', this.elegirColor)
    }
    
    //los metodos que se llaman en el event listener suelen tener en la funcion un parametro ev
    
    elegirColor(ev){ //le asignamos su target dataset // un evento (ev)
        const nombreColor = ev.target.dataset.color
        // daset almacena valores 

        const numeroColor = this.transformarColorANumero(nombreColor)
        this.iluminarColor(nombreColor)
        // algoritmo d la funcion del juego
        if (numeroColor === this.secuencia[this.subnivel]){
            this.subnivel++
            if (this.subnivel === this.nivel){
                this.nivel++
                this.eliminarEventosClick()
                if(this.nivel === (ULTIMO_NIVEL + 1)){
                    //gano
                } else {
                    setTimeout(this.siguienteNivel, 1500)
                }
            }
        } else {
            //perdio
        }
    }
}    
function empezarJuego(){    
    window.juego = new Juego()
}

Fernando Cordero

student•

Gracias!

Stalin Badillo

student•

Gracias :)

Javier Romero

student•

de verdad sean sinceros y no se mientan ustedes entienden todo este código de sacha ? ojo se lo pregunto a los principiantes como yo, pues a los que saben no comenten porque es algo lógico que saben mas que uno... 😠 de verdad no se como hace todo eso, el profe solamente escribe y escribe código y yo sigo sin aprender bien esta vaina estoy muy frustrado y enojado no trato de entender nada de lo que hace.

Andres Ignacio Romo Moena

student•

Hola! La verdad yo sí se programar de antes. El curso me parece perfecto porque avanza rápido y se salta conceptos teóricos ya conocidos. Para alguien que este aprendiendo a programar lo más probable es que no entienda mucho que está pasando :/ Creo que el curso está pensado para personas más como yo así que entiendo tu frustración y me parece muy razonable.

Tal vez te estas adelantando un poco. Yo por ejemplo en la universidad tuve 1 semestre de programación básica, 1 de estructuras de datos y algoritmos y otro de programación orientada a objetos (ademas de otros cursos donde la programación es la base del curso, como procesamiento de imágenes, microcontroladores o redes de computadores).

Mi punto es que como vez ya llevo varios años poniendo en practica conceptos más avanzados de programación. Por eso puedo llenar los vacíos que deja Sacha.

Te recomiendo tal vez darte una vuelta por cursos más de base como fundamentos de la programación, programación orientada a objetos o estructuras de datos. Me parece que Platzi tiene cursos de ese tipo (no los he revisado pero supongo que son buenos). Me parece normal que no entiendas muchas cosas, ya que te estas saltando todas las bases teóricas de la programación. Es como dar calculo sin saber álgebra :p

Alfredo Martínez García

student•

Me eche toda la maña buscando un error y resulta que llame a subnivel en lugar de llamar a subNivel!

Está cabrón un error así jajaajajajja porque no entiendes porque la lógica no funciona si está bien pero al final fue error de dedo

Arturo Mauricio Terceros Beltrán

student•

Utiliza el debugger y los breakpoints. Te ayudaran a encontrar el error mas rapido

Sergio Baltanás Montes

student•

excelente clase, tengo que verla otra vez ya que son demasiados pasos seguidos.

Bernardo Aguayo Ortega

student•

también me pasa

Agregando la verificación del color elegido

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?