Introducción al curso

1

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

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Generando una secuencia de números

42/55
Recursos

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

Aportes 109

Preguntas 37

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Muy clave Platzi en cuarentena no?

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

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
        }

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

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()
}

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)

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)
        }
      }```

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))```

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?

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.

No entiendo por qué usó Window 😦

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

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

Que forma hay de hacer esto con foreach?

Muy buena informacion

Directo al grano así es fácil de aprender

Excelente clase

codigo clase

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()
        }
        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))
        }
       
      }
      function empezarJuego() {
        window.juego = new Juego()
      
    }

Duda de novatos: ¿Por qué se decidió usar un constructor como base del código?

Muy bien explicada la clase

Alguien me ayuda a comprender que significa el ‘n’ en el .map(n => …) no entiendo bien porque n vale cero.

Jajajaja no se si reír o llorar…

Lo que vimos de que el objeto asigna el valor con el mismo nombre es nuevo igual y parte de EcmaScript, sin duda es algo muy util:D!

IDEAS CLAVES

=> Me encanta como se transfiere informaciòn, funciones entre js y html
=> Puedes crear valores al azar de la forma que quieras usando bien Math.random
=> Tambien puedes crear un Array como un objeto

var cosas = new Array(5 /*esa es la cantidad de elementos */)

Aqui dejo mi codigo

Mi codigo HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />

		<link rel="icon" type="image/jpg" href="sources/daniel-paez-fondo-blanco.jpg" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
		
		<title id="title"> <!-- Titulo definido en index.js --> </title>
	</head>

	<body>

		<div class="header"> 
			<div class="col-1-header">
				<h2 >Clase de Platzi</h2>
			
				<img  src="sources/daniel-paez-fondo-blanco.jpg" id="foto-estudiante">

			</div>

			<div class="col-2-header">	
				<h1 class="titulo-clave">Simon Dice</h1>
			</div>

			<div class="col-3-header">
				<!-- VAcio-->
			</div>

		</div>
<!--
		<div class="content"> 
			<h1 class="titulo-clave">Mis apuntes</h1>
			<p id="apuntes"> 
			</p>
			<p id="output"></p>
-->
			<div class="gameboard">

		      <div id="celeste" class="color celeste left" data-color="celeste"></div>
		      <div id="violeta" class="color violeta right" data-color="violeta"></div>
		      <div id="naranja" class="color naranja left" data-color="naranja"></div>
		      <div id="verde" class="color verde right" data-color="verde"></div>

		      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">¡Empieza a jugar!</button>

	    	</div>

		</div>

		<script src="index.js">  </script>
	</body>
</html>

Mi codigo javascript


/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");



/*DECLARACIÓN DE VARIABLES
==================================*/

	
			/*VARIABLE CONSTANTE CON ELEMENTOS OBTENIDOS POR ID
			=====================================================*/
			const btnEmpezar = document.getElementById('btnEmpezar')
			const celeste = document.getElementById("celeste")
			const violeta = document.getElementById("violeta")
			const verde = document.getElementById("verde")
			const naranja = document.getElementById("naranja")



/*DECLARACIÓN DE CLASES
==================================*/


			class Juego {
				constructor() {

					/*Declarando mis metodos*/
					this.inicializar()
					this.generarSecuencia()

				}


				//Creando el cuerpo de mis metodos
				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.round(Math.random() * 4 ))
					//Creamos un nuevo objeto Array con 10 casillas
					//rellenamos cada casilla con 0
					// Math random * 4 entrega un valor entre 0 y 4

					//map() solo funciona si el elemento del array tiene un valor asi sea 0

				}
			}


/*DECLARACIÓN DE FUNCIONES
========================================================*/


      function empezarJuego() {
      //	alert("El juego va a comenzar pueblo de bolivar")
        window.primerJuego = new Juego()
      }

Excelente

Me gusto mucho la forma de crear arrays

Esta genial la clase, aunque el concepto de fill he tenido que buscar su documentación para entender mejor. Vamos poco a poco!

¿la funcion fill les da un valor por defecto a los array? en este caso se le dijo que el valor es 0 , ¿Estoy en lo correcto ?

Codigo Script Avanzado

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()
    } 
    
    inicializar(){     
        btnEmpezar.classList.add('hide')
        this.nivel = 1 
        this.colores = {
            celeste, 
            voileta,
            naranja,
            verde,
        }    
    }  

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

muy buena la clase

Tengan en cuenta que si ponen el script antes de la definición de los botones en HTML, como se venía haciendo, van a tener errores del tipo

Uncaught TypeError: Cannot read property 'classList' of null
    at Juego.inicializar (scripts.js:14)
    at new Juego (scripts.js:9)
    at empezarJuego (scripts.js:27)
    at HTMLButtonElement.onclick ((index):94)```

Sucede porque el código en JS hace referencia a objetos que no se han creado cuando se renderiza el DOM, es decir, JS hace referencia al objeto btnEmpezar antes de que el objeto exista. Por eso, en éste caso se debe definir el JS al final de la creación de los objetos HTML

Me desespera mucho que aun haciéndolo a la par del profe, no me sale y me marca error 🥴😫

Con ejemplos este código se hace tan claro 😅❤

<!DOCTYPE html>
<html>

<head>
<meta charset=“utf-8”>
<title>Simon Dice</title>
<style>
body {
margin: 0;
background: #dedede;
display: flex;
align-items: center;
height: 100vh;
}

.gameboard {
  height: 100vh;
  width: 100vh;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  max-height: 60vh;
  max-width: 60vh;
}

.color {
  width: 50%;
  height: 50%;
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: left;
}

.celeste {
  background: #22a6b3;
}

.celeste.light {
  background: #7ed6df;
}

.violeta {
  background: #be2edd;
}

.violeta.light {
  background: #e056fd;
}

.naranja {
  background: #f0932b;
}

.naranja.light {
  background: #ffbe76;
}

.verde {
  background: #6ab04c;
}

.verde.light {
  background: #badc58;
}

.btn-start {
  width: 400px;
  height: 100px;
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 2.5rem;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 200px);
}

.hide {
  display: none;
}

</style>
</head>

<body>
<div class=“gameboard”>
<div id=“celeste” class=“color celeste left” data-color=“celeste”></div>
<div id=“violeta” class=“color violeta right” data-color=“violeta”></div>
<div id=“naranja” class=“color naranja left” data-color=“naranja”></div>
<div id=“verde” class=“color verde right” data-color=“verde”></div>
<button id=“btnEmpezar” class=“btn-start” onclick=“empezarJuego()”>Empezar a jugar!</button>
</div>
<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’)
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()

  }
  iluminarSecuencia()
}
function empezarJuego() {
  window.juego = new Juego()
}

</script>
</body>

</html>
me pueden decir que tengo mal

Cool

Buena clase

¿Por qué

var juego = new Juego()

no me muestra el objeto en la consola
y…

window.juego = new Juego()

Si lo hace ?

Simple y sencillo!

Excelente clase al principio tenia un error me salían puros NaN pero era por que en Math.random lo puse sin ()

buena clase, practicando y aprendiendo cosas nuevas

Buen uso de las propiedades en conjunto

Quiero hacer una corrección a mi aporte anterior. .fill() tiene por defecto 0 y array.length como ÍNDICES es decir de donde empieza a dónde termina el recorrido; por lo que puedes no ponerlos pero el valor estatico en este caso 0 debe estar puesto.

mi consulta es porque se creo el nuevo objeto = new Juego, este que función o que razón precisamente tiene de estar creado si ahora vemos que no se necesita aún o si?

Muy buen video.

Muy buena clase Sacha 📓

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.generar_secuencia();
	}
	inicializar() {
		btnEmpezar.classList.add("hide");
		this.nivel = 1;
		this.colores = {
			celeste,
			violeta,
			naranja,
			verde
		};
	}

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

function empezarJuego() {
	window.juego = new Juego();
}

porque no me aparece en el centro?

Excelente …

literalmente copio el codigo de otras personas y el del video y siempre me da el error
Uncaught ReferenceError: empezarJuego is not defined
at HTMLButtonElement.onclick (index.html:94)
onclick @ index.html:94

excelente clase, y gracias por los tips

Está entretenido esto de llevar a cabo toda la teoría aprendida a un caso real, como un mini juego, espero en un futuro programar así de bien como él. 😃

class Game {
    constructor() {
        this.inicializar()
        this.generateSequence()
    }
    inicializar() {
        btnEmpezar.addClass('hide');
        this.level = 1
        this.colors = {
            celeste,
            violeta,
            naranja,
            verde
        }
    }

    generateSequence() {
        //new Array se declara un nuevo arreglo de 10 posiciones
        //fill se llenaran todos los valores del arreglo con 0 
        // ya que sno se especifica desde que indice comenzar
        // map recorre cada valor del arreglo, y el callback retorna 
        // un valor aleatorio entre 0 y 4
        // floor redondea el valor hacia abajo 
        this.sequence = new Array(10).fill(0)
            .map(n => Math.floor(Math.random() * 4))
    }
}```

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));
}

gracias

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

  inicializar() {
   //hide tiene display: none; -> por eso desaparece el btn.
    btnEmpezar.classList.add('hide')
    this.nivel=1
    this.colores = {
      /*celeste: 'celeste' -> JS si la var y el atributo tienen el mismo nombre,
      entonces lo identifica solo con poner el nombre de la var*/
      celeste,
      violeta,
      naranja,
      verde
    }
  }

  generarSecuencia(){
    //generamos un array automático random
  this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4))
  }
}

function empezarJuego() {
  //variable puesta en window(objeto global), para poder debuggearla.
  window.juego = new Juego()
}

I share my notes

/*====================================== */ //
const celeste = document.getElementById(‘celeste’)
const violeta = document.getElementById(‘violeta’)
const naranja = document.getElementById(‘naranja’)
const verde = document.getElementById(‘verde’)

/*====================================== */ // Boton empezar

const btnEmpezar = document.getElementById(‘btnEmpezar’)

/*====================================== */ //

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

inicializar() {                                                //Con este parametro quitamos el boton de empezar
    btnEmpezar.classList.add('hide')
    this.nivel = 1
    this.colores = {
      //celeste:celeste, 
        celeste,
      //violeta:violeta,
        violeta,
      //naranja:naranja,
        naranja,
      //verde:verde  
        verde
    }
}

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

}

/*====================================== */ //

function empezarJuego() { //Realizamos nuevo juego y saludamos al usuario
var juego = new Juego()
alert(‘El juevo va comenzar’)
}

//Math.random()*4 = Numero randon de 0 a 3,9
//Math.floor = deja un numero entero asia abajo

Creamos un metodo en el prototipo:
Este Prototipo va a primero crear una secuencia, en un array
con "new Array(n de elementos)" junto con ".fill()" para que
sos
elementos creados no sean undefined, ahora ".map()" y dentro
de map, haremos que cree este nuevo elemnto y lo ponga en
un array nuevo de tal manera:
-Math.floor()-->redondea el numero hacia abajo "4.9->3"
-Math.random()-->crea numero aleatorio 0-1
-multiplica ese numero de 0-1 por cuatro
Asi obtenemos un array de 10 elementos, cada uno entre1-3

Finalmente indicamos las propiedades dentro de secuencia de
-nivel
-Colores

😃

_si cuando termine la cuarentena, seguimos iguales cognocitivamente, la verdad es que perdimos el tiempo. _
vamos aprovechar **Platzi **

si cuando termine la cuarentena, seguimos iguales cognocitivamente, la verdad es que perdimos el tiempo.
vamos aprovechar Platzi

Clases cortas y practicas! (y)

Estructura de métodos en clases de Javascript

class Clase() {
    function constructor() {
        this.metodo()
    }

    metodo() {}
}   

Al definir los atributos de un objeto, si queremos definir uno con el valor de una variable, en vez de escribir esto:

const nombre = document.getElementById('nombre')

const Persona() {
    nombre: nombre
}      

Podemos hacer esto

const nombre = document.getElementById('nombre')

const Persona() {
    nombre
}

Para definir arrays de longitud fija:

const array = new Array(longitud)

Para llenar este array:

const array = new Array(longitud).fill(valor) //El valor por defecto en fill es 0. También se puede pasar un indice como parámetro.

//Inicializar con valores random
const array = new Array(longitud).fill().map(n => Math.Floor(Math.Random * 4))

Muy buena clase!

Math.random() retorna un punto flotante, un número pseudo-aleatorio dentro del rango [0, 1]. Esto es, desde el 0 (Incluido) hasta el 1 pero sin incluirlo (excluido)

<code>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()
  }

  inicializar() {
    btnEmpezar.classList.add('hide')
    this.nivel = 1
    this.colores = {
      celeste, // Significa que el atributo celeste es igual a la varaible celeste
      violeta, // === violeta: violeta
      naranja,
      verde
    }
  }
  generarSecuencia(){
    this.secuencia = new Array(10).fill(0).map(n=>Math.floor(Math.random()*4))
// Nos dice que el atributo 'secuencia' es igual a un nuevo array cuya 
// longitud es igual a '10' y que sera llenado('fill') con puros ceros
// y con sera transformado('map()') cada cero y sera retornado un numero 
// random por  4 y redondeano para abajo.
  }
}

function empezarJuego() {
  var juego = new Juego()
  console.log(juego)
}
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();
    }
    
    inicializar() {
        btnEmpezar.classList.add('hide');
        this.level = 1;
        this.colores = {
            celeste,
            violeta,
            naranja,
            verde
        }
    }

    generarSecuencia (){
        this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random()*4));
    }
}
   
const empezarJuego =() => window.juego = new Juego();```

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

Muy curiosa la forma de generar arrays.

Muy buena clase!! ya le voy agarrando la mano a JavaScript

Genrando la secuencia de colores que el usuario va a repetir

  • Crearemos una función que permitirá generar la secuencia en un array de una nueva forma así
generarSecuencia() {
    this.secuencia = new Array(10)
      .fill(0)
      .map((n) => Math.floor(Math.random() * 4));
  }
  • Además debemos inicializar el nivel en 1
this.nivel=1;
  • También agrupamos los colores en un objeto de la siguiente manera
this.colores = {
      celeste,
      violeta,
      naranja,
      verde,
    };

Con esto nos ahorramos los dos puntos y el nombre de las varialbes si tienen el mismo, Ej:

naranja:naranja

Con programacion Orientada a Objetos en JS

Mi apuntes:

Lo primero que se agregó en esta clase fue la función generar secuencia, la cual nos entrega un valor entre 0 y 3, con la función random obtenemos un valor entre 0 y 1 y lo multiplicamos por cuatro para obtener un valor decimal entre 0 y 3.9, con la función floor redondeamos hacia abajo el resultado.

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

La segunda parte es que vamos a agregar un valor secuencial a los colores, con esta instrucción combinada con la variable secuencia sabremos que el 0 corresponde a celeste el 1 a violeta, etc.:

  this.colores={
                celeste,
                violeta,
                naranja,
                verde
    };
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()
  }
  inicializar(){
    btnEmpezar.classList.add('hide')
    this.nivel = 1
    this.colores = {
      celeste,
      violeta,
      naranja,
      verde
    }
  }
  generarSecuencia(){
    //Una forma de generar Arrays de numeros aleatorios entre 0 y 3
    this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() *4))
  }
}

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

No entendi el funcionamiento de window.juego, porque no funciona llamandolo como una variable tipo var y mostrandola en la consola?

Entendido

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

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

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

Seguimos bien. Aún no me pierdo.

me gusta, mucho lo bien explicado

Bien explicado

Me falta una forma de filtrar estos “Aportes”, o si se pudiera separar en: Apuntes de clase, Mi codigo(para que vean como quedo), Referencias (enlaces), y “verdaderos” aportes referentes a la clase o el tema. Recuerden que preguntas ya tiene otra seccion. 😉

Interesante, muchas gracias!!

Tambien podemos crear un array con el ciclo for:

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

yo no se ustedes pero lo argentino se me esta pegando 😛

No entendí nada de esta clase, aiuda?

No logro ver en cosola la construcción del new array

const btnEmpezar = document.getElementById (`btnEmpezar`)  
const verde = document.getElementById (`verde`)  
const celeste = document.getElementById (`celeste`)  
const violeta = document.getElementById (`violeta`)  
const naranja = document.getElementById (`naranja`)  



class juego {
    constructor () {
        this.inicializar () 
        this.generarSecuencia()
    }
    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))
    }
}



function empezarJuego (){
    window.juego = new juego() 
}```


revise el código mil veces, pero no puedo encontrar el error.

Buen video!


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simón Dice</title>
    <style>
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }
    </style>
  <script async src='/cdn-cgi/bm/cv/669835187/api.js'></script></head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <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')

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

        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)))
        }
      }

      function empezarJuego() {
         window.juego = new Juego()
      }
    </script>
  <script type="text/javascript">(function(){window['__CF$cv$params']={r:'66e4b3365a95d982',m:'cef8f80050b141868d2c4f4b872dc41e9eebd07a-1626202259-1800-ASg0JUYRb3hSwYm5bx89S8iWF31q/iQ8IN2Hz3OeQc8hsxU10fbN0T6AS/Sp7vnbPtO16xVSKnwSMpWcc7nfu4fpTNEl1M+GFCa2irIRTi+Eakq28XgtUxiZuAnrrsA5nx8mD9HayJ0zdfQGpmmNxvnxp19U46u8nQ2AeDcxPJNw+3lGJqN3SofD5wmzCFwiLCF6SlXyeSjVcZPc0VOdtbUTR083kCEBLur1jvAlrLFzl48OfAXogdfu09JljoBaqoaWgB5huPUN4QWVFtRtWUjqgO+LFDHqFLnqvFK8+Cgordmy95dXzE0GoBSzbRLsxA==',s:[0xa6a3a8a143,0x0743183ae3],}})();</script></body>
</html>

Hasta el momento todo marcha sobre rieles. uwu

por si les paso igual que a mi (despistado lo se )
recuerden llamar las funciones en el constructor,no me generaba el array en la consola

constructor(){
this.start()
this.generateSequence()
}

Super!!

Interesante

Excelente clase, poco a poco comienza a agarrar forma.

Se crea un arrreglo con 10 elementos y se inicializan en cero con el comando fill, la funcion randow nosda un valor entre 0 y 1

excelente

creamos el método generar secuencia dentro de la clase juego donde se genera un array de números aleatorios entre 0-3 para esto se usa math.random que genera numeros entre 0-1 y math.floor para redondear para abajo.

**Sacha es demasiado explicito en sus clases! Gracias por ese nivel de profesores Platzi **

Estoy tratando de organizar mi código para que todo esté más claro, por ejemplo separar el css y el js del html y ya me quedó, pero aquí me surge una gran duda que no he podido aclarar y por eso quiero preguntarles: ¿cual es la mejor manera para hacer la llamada a los archivos js y css? unos me dicen que después de la etiqueta body y otros me dicen que es desde el head, le agradezco a quién me ayude con esto !