Muy clave Platzi en cuarentena no?
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?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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
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!
=> 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
generarSecuencia() {
this.secuencia = new Array(10)
.fill(0)
.map((n) => Math.floor(Math.random() * 4));
}
this.nivel=1;
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 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 !
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?