Generando una secuencia de números

Clase 42 de 55 • Fundamentos de JavaScript 2018

Resumen

Para generar la secuencia del juego usaremos un array con números aleatorios, que representarán el color del botón que se iluminará cada vez. Usamos new Array() para crear el arreglo de manera dinámica, y llamamos al método fill para rellenar ese array con ceros y poder luego iterar sobre éste con map()

Ivan Santiago

student•

Me gusta mucho que los videos sean tan cortos y que todo quede tan claro 😄

Juan Fernando Ramírez Vélez

student•

Estamos de acuerdo

Jesus Ricardo Moreira Cedeño

student•

Exacto 😃

Maximiliano Sancari

student•

Muy clave Platzi en cuarentena no?

Sara Galván Ortega

student•

es genial de verdad!!

Johnnatan Reyes Garcia

student•

que seria de mi cuarentena sin ellos

Wandy Rafael Santana Evangelista

student•

Poco a poco voy comprendiendo todo lo aprendido de una manera brutal. :)

Manuel Alejandro Muñoz Mendivil

student•

Me incluyo.

ANGEL DAVID SULBARAN CALDERON

student•

GENERANDO UNA SECUENCIA DE NUMEROS En esta clase lo que hacemos es crear la secuencia aleatoria del juego de la siguiente manera;


class Juego {
    constructor(){
        this.inicializar()
        this.generarSecuencia()
    }

Vamos a clases y cremos en el contructor “this.generarSecuencia” para llamar la función;

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

Como podemos observar en esta función vamoa a generar la secuencia y lo haremos creando un array, de una manera totalmente nueva cual no habíamos implementado antes, es muy importante aca usar la función “fill” para darle un valor a los arrays porque sino no va a funcionar nuestra función “map” para poder trabajar con los arrays y crear la secuencia, para ellos usamos una arrow function dentro de map, y usaremos el modulo de matemáticas universal de JavaScript y usaremos la función “floor” de este que lo que hará es redondearnos hacia abajo el numero que tengamos, esto lo haremos porque al usar math.random() como lo haremos a continuación, este crea un numero aleatorio entre 0 y 1 y debido a que lo multiplicamos x4 nos dará varios números entre 0 y 4 por lo que los queremos redondeados y para ello usamos esta función.

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

Por ultimo creamos el atributo “this.nivel = 1” que es para indicar que el usuario iniciara por el nivel 1 , ya que ira avanzando a medida que juegue, y otro de detalle es que agregaremos los colores a un atributo de esta función,(dato curioso de JavaScript es el hecho de que cuando llamamos una variable o constante que su valor sea igual a su nombre, no hace falta escribirlo de la siguiente manera por ejemplo;

this.colores = {
            celeste:celeste,
    
        }

Ya que hacerlo de esta manera es equivalente;

this.colores = {
            celeste,
            violeta,
            naranja,
            verde
        }

Britney Hadassa Ascencio Henriquez

student•

thanks

David Javier Alba Jaimes

student•

hey guys!! que alguien me corrija si lo que dice sacha a partir del minuto 1:05, y como lo interpreto: cuando se crea un propiedad dentro de un método que no se ha definido en el constructor de la clase, esta propiedad pasa a ser parte del objeto y no del método en la que se declaro, entonces si mas adelante quiero llamar a esta propiedad lo puedo hacer directamente y no llamar al método que la contiene por así decirlo, pues a modo de metáfora una función es hermética y solo ejecuta de manera interna

Daniel Páez

student•

Estas en lo correcto jaba.

Si la propiedad se creó dentro del contexto del objeto y fuera de un método en concreto en cualquier otro metodo o propiedad del objeto podrás usar esa propiedad creada.

rlopez

student•

al declarar la variable secuencia a nivel de la clase con el uso de la palabra reservada this esta pasa a formar parte de la clase Juego; si quitas this y colocas – var/let secuencia – esta variable es ahora local a la función o método.
prueba el código en la consola removiendo this de la variable secuencia y luego con var

jose zuñiga

student•

Dejo el código con anotaciones:

//Guardamos los elementos Html en variables
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')
//La clase juego sera la estructura basica para controlar
//los elementos dentro del html
class Juego {
  constructor() {
    //Inicializa llamando la funcion inicializar()
    //para el objeto creado. Apenas se crea, se ejecuta
    //esta función, por eso desaparece el boton
    this.inicializar()
    //Se debe iniciar de manera inmediata una secuencia de numeros
    //que se debe agregar al nuevo objeto
    this.generarSecuencia()
  }
  //Inicializar servira para darle los atributos basicos al objeto 
  inicializar() {
    //Agrega la clase hide que oculta el boton
    btnEmpezar.classList.add('hide')
    //Nivel en que se encuentra el juego
    this.nivel = 1
    this.colores = {
      //Forma corta para definir un objero. Con repetir el nombre 
      //de una variable global ya declarada basta. Se deben separa por comas
      celeste,
      violeta,
      naranja,
      verde
      /*forma clasica
      celeste: celeste,
      violeta : violeta,
      naranja : naranja,
      verde : verde
      */
    }
  }
  //Funcion que genera una nueva secuencia para cada objetpo
  generarSecuencia() {
    //Esta secuencia se liga al objeto por eso usamos this
    //Array(n) define un array vacio con un numero n fijo de posiciones
    //fill(x) llena un array o una matriz con valores x en todas sus posiciones
    //.map() remplaza los valores de un array según la logica que se defina en su función
    //Math.floor() redondea un numero a su valor entero mas bajo P.e. 3.9 sera 3
    //Math.random() genera valores de dos cifras decimales entre 0 y 1
    this.secuencia = new Array(10).fill(0).map(() => Math.floor((Math.random() * 4)))
  }
}
//La función empezarJuego() crea un nuevo elemento de clase Juego
function empezarJuego() {
  window.juego = new Juego()
}

Bernardo Aguayo Ortega

student•

gracias maestro

Jose Barboza

student•

buen aporte bro

DAMIÁN NICOLAS PINEDO

student•

No entendí nada de esta clase aiuda?

Kevin J. Zea Alvarado

student•

¿Cuáles son tus dudas, exactamente?

DAMIÁN NICOLAS PINEDO

student•

basicamente porque usa el classlist que es lo que hace? porque utiliza un array de numeros? porque fill?

Grace Nikole Avarado

student•

Nueva manera de crear un Array:

// Dentro de los paréntesis va la cantidad de elementos que tendrá tu Array
new Array(10)

// Si quieres inicialzar los valores de los elementos de tu Array, lo puedes hacer usando el método: fill()
new Array(10).fill(0)

Albert K. Camargo Barreda

student•

Otra forma de generar los números "aleatorios"

 generarSecuencia(){
          this.secuencia = new Array(10)
         
          for (var i=0; i<10 ;i++){ 
          this.secuencia[i]=Math.floor(Math.random()*4)
        }
      }```

Manuel Mendoza

student•

estoy siguiendo todos los pasos que indica, incluso copié y pegue su código y aun asi no me corre en el min 4:04 dice que al llamar la variable "juego" te muestra el array. a mi me dice que juego no esta definido, y obviamente lo tengo a que se debe dicho problema?

Ian Szejer

student•

Me pasa exactamente lo mismo no encuentro el error si alguien sabe seria muy util

Erik Elyager

student•

Asegúrate que se ejecuta la función empezarJuego() que es donde se hace esa asignación. Sé que dices que copiaste el código tal cual pero si nos lo compartes te podemos ayudar mejor.

Juan David González Rodríguez

student•

it is incredible the class , the learning is great ,

.fill es el espacio de largo que se usa en el array en esta caso 10
.map crea un nuevo array colocando un numero random menor a 4 generado en cada espacio del array de 10

this.sequence = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4))```

Martin Paez

student•

Hi. Solo como observacion. Fill le asiga un valor al array. En este caso, le asigna el valor de cero a todo el length.

Bernardo Aguayo Ortega

student•

great

David Quintana

student•

No me quedo claro el propósito de la n en el .map

Cual es su función ahí??

Y si pongo en el .fill(5) ejemplo, que esta sucediendo ahi??

Me altera algo?

Eduardo Hidalgo Díaz Rugama

student•

Para entender lo que está pasando debes entender la sintaxis de la función map.

según developer.mozilla.org:

var nuevo_array = arr.map(function callback(currentValue, index, array) {
    // Elemento devuelto de nuevo_array
}[, thisArg])

te lo explico mejor aqui:

primero a saber que la función map solo la puedes usar como método de un array que ya tengas. Lo que hace map es iterar cada elemento del arreglo, y transformarlo en otro arreglo. Por ende debes almacenar el resultado de map en un arreglo diferente.

var array = otroarray.map();

dentro de map se espera una función de tipo callback, que se va a encargar de ejecutar el trabajo. Para no liartela, te introduciré directamente a las dos mejores maneras de escribirlo:

1)
// le metes un arrow function anónimo con return
// () => { ... }

var array = otroarray.map( () => {
 //... code here
return (...) 
});

2)
// le metes un arrow function sin brackets, anunciando que el
// resultado de esa linea de código es tu retorno
// () =>  ... 

var array = otroarray.map( () => ... );

https://stackoverflow.com/questions/38282997/rendering-an-array-map-in-react

ahora viene la respuesta a tu pregunta… map es un iterador muy parecido a for, o a un while. ¿Como sabe “map” el elemento que está iterando?

con ese mágico “n” que viste (:

var array = elements.map( (element) => {
 // haces algo con "element"
return (return) // metes a array el element modificado
});

si te fijas, dentro del paréntesis de la función arrow es donde le mandas cada elemento de tu lista de elementos y puedes alterarlo.

hay más cosas que puedes hacer, pero eso ya te lo dejo de tarea investigarlo, como:

le puedes dar a tu arrow function otro parámetros llamado index, y saber la posición que estás iterando, por si quieres que el elemento 10 sea azul y no rojo.

Fill es muy facil, simplemente rellena todo tu arreglo con el mismo dato. si quieres que todo tu arreglo inicial antes de mapear tenga ceros, haces:

// dice, al nuevo arreglo de tamaño 10, llenalo de ceros, luego mapealo
new array(10).fill(0).map(...

si le pones un 5 como dice en tu pregunta, se llenará el arreglo nuevo de cincos.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

Jose L. Figueroa

student•

La función map no funciona cuando los elementos no están definidos en un array y no tienen un valor. Es por ello que necesitan un valor aunque sea 0.

Daniel Andres Rojas Paredes

student•

hola chicos tengo un Bug y es que me esta creando el objeto jueg pero como u objeto vacio, como si no entrara al constructor, no entiedo porque. aca una imagen de la consola y el codigo de la clase GAME.

class Game{
    costructor() {
        this.begin();
        this.secuenceGenerator();
    }
    begin(){
        
        btnStart.classList.add('hide')
    }
    secuenceGenerator(){
        console.log()
        this.secuence=new Array(10).fill(0).map(n=>Math.floor(Math.random()*4));
        console.log('arreglo creado')
        /**its important to call fill function
         * so when call map the type of the elements is
         * defined and it works
         */
    }
}
function gameOn (){
    alert('GAME IS ON BITCH')
   window.game =new Game();
}

Daniel Andres Rojas Paredes

student•

muchachos llevo 45 minutos y acabo de notar que escribí costructor en vez de constructor...... me rei supongo, que es buena señal :v

Isaias Chávez

student•

No entiendo por qué usó Window :(

Ruben Tabares Muñoz

student•

pata poder hacer un log en el navegador

Diego Forero

Team Platzi•

Muchos de los estudiantes que se inician en la programación tienen sistemas operativos windows, muy pocos tienen acceso a computadoras Mac y a otros les da miedo Linux, por eso para este curso se uso Windows.

Tomas Salina

student•

La mejor forma de aplicar lo aprendido es esta, sin dudas.

Andres Felipe Giraldo

student•

No explica casi nada. O mejor dicho nada. Solo hace.

Andrés Argote

student•

Si, eso ya no me está gustando, antes de manipular objetos de HTML tuvo que por lo menos dar una introducción del DOM y además usa el paradigma de POO y en el curso lo que mayor mente vimos fue programación estructurada, siento que el curso iba bien pero fue empeorando en las explicaciones.............

Alejandro Santa Lucia

student•

Pienso lo mismo. Leo muchos comentarios positivos, pero en mi caso particular este curso no me parece claro.

Angel David Castiblanco Sepulveda

student•

Que forma hay de hacer esto con foreach?

Jose Daniel Molina

student•

Hola, me di a la tarea de hacerlo con forEach y se obtiene el mismo resultado, pero creo que la mejor manera de generar un array partiendo de otro es con .map() , pero depende de qué tarea quieras realizar usas uno u otro. :)

Sebastian Duran

student•

Esta forma se esta conviertiendo en el estandar por lo que es la recomendable

Eduardo Gonzalez Garcia

student•

Muy buena informacion

sergio enrique sanhueza osorio

student•

holaa, me pueden explicar como inicia el array con los números aleatorios y se quita el botón empezar a jugar?, pensaba que para que la función empezarJuego cree la clase Juego debería inicializarla desde el entorno global, así:

empezarJuego()

y recién aquí se crea la clase juego (que quita el botón y tiene la función con los números), porfavor ayiuuda :(... ¿Porque cuando hacemos clic al botón es cuando este sale de la pantalla y se crea el array con los números aleatorios?

Luis Lira

student•

Lo que hace el array con los números aleatorios es crear la secuencia que se seguirá esa partida, la que se le mostrará al jugador y este tendrá que replicar dando clic en los colores :)

Jorge Cruz Perez

student•

La secuencia de ejecución es la siguiente el programa comienza con click que hace la llamada a empezar juego, esta a su vez llama a constructor de Juego que a su vez llama a inicializar (aquí se oculta el boton) y a generar secuencia, aquí la ejecucion es se crea un nuevo arreglo de 10 elementos, con fill se inicializan a cero y con map se les asigna un numero aleatorio. La funcion empezarjuego si esta en el entorno global, saludos :)

Generando una secuencia de números

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?