Recuerden que nosotros los programadores contamos desde 0 🤣
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
Programación en Navegadores: Primeros Pasos
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Instalando tu primer editor de código
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién ganó el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿Y ahora qué curso tomar?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Diego De Granda
Seguro ya conoces los tipos de datos que puede tener una variable. Estos pueden ser cadenas de texto, números, booleanos, entre otros. Existe un tipo de dato llamado Array o arreglo que te permite agrupar N cantidad de valores, en una sola variable.
Los array son un tipo de dato que encontrarás en cualquier lenguaje de programación. Te permiten agrupar todos los valores que necesiten en una sola variable, agregar nuevos, quitarlos, reemplazarlos, entre otras acciones.
Para crear un arreglo en Javascript, utiliza los corchetes []
, como si fuese una caja que guarda datos. Es buena práctica que la variable del tipo arreglo tenga su nombre en plural para indicar que dentro habrá una determinada cantidad de valores.
let mokepones = [];
Para agregar un nuevo elemento al array, tienes que utilizar la función push()
que todos los arreglos poseen para “empujar” un nuevo valor dentro.
mokepones.push(hipodoge);
mokepones.push(capipepo);
mokepones.push(ratigueya);
O también puedes hacerlo en una sola línea de código.
mokepones.push(hipodoge, capipepo, ratigueya);
Los arrays también permiten extraer el último valor agregado al mismo con la función pop()
.
let mokepon = mokepones.pop();
Otra función también muy útil que tienes que conocer de los arreglos es length
que retorna la cantidad de valores dentro del mismo.
console.log(mokepones.length); // 3
Conocer la cantidad de datos dentro de un array te permitirá manipular la información y programar la lógica de tu aplicación con más precisión.
Los arrays son muy dinámicos, permiten hacer muchísimas cosas que explorarás poco a poco, como recorrer cada valor, filtrar datos, convertirlos, entre otras acciones. De momento ya conoces lo esencial para continuar con tu videojuego.
Contribución creada por: Kevin Fiorentino (Platzi Contributor)
Aportes 55
Preguntas 8
Recuerden que nosotros los programadores contamos desde 0 🤣
Les dejo un pequeño cheatsheet de los métodos que puede tener un array
Consejo:
Si recién estás comenzando y te está costando un poco, trata de evitar leer los comentarios, hay algunos que tratan de aconsejar o brindar información más completa que lo que muestra el profesor y puede que te abrume. Solo escucha y aplica lo que se ve en la clase, tendrás mucho tiempo para ir conociendo más sobre la práctica y otros cursos de Platzi.
Corchetes cuadrados = Alt + 91
El truco esta en ver los arreglos como cajitas y la matrices como bodegas. 😶🌫️
arrays = son un tipo variable donde se pueden guardar diferentes valores de forma ilimitada, sin importar que sean números, letras, objetos
[] = simboliza cada uno de los valores dentro de un arreglo
Ejemplo; let = mokepones [ ]
.push() es un método que inyecta ciertas propiedades a una variable o arreglo.
Ejemplo: mokepones.push (hipodoge, capipepo, ratigueya)
Daily reminder: Los arrays siempre empiezan por el 0
En JavaScript, los arrays son objetos incorporados que tienen una serie de métodos integrados que pueden ser utilizados para manipular y trabajar con los elementos del array. Algunos de los métodos más comunes en los arrays de JavaScript son:
.
Estos son algunos de los métodos más comunes que se pueden usar con los arrays en JavaScript, pero hay muchos más disponibles. La documentación de JavaScript es una buena fuente para conocer más métodos y sus usos.
Arrays o arreglos:
Es un tipo de variable donde se puede guardar varia información.
Debemos crear una variables para que se guarden nuestras variables donde esta la información, pero esta variable debe utilizar [ ] ya que es una variable de tipo arreglo
Ejemplo:
**let mokepones = []** //En esta variable lo que buscamos es que se guarden hay nuestras variables que tiene la información //
**mokepones.push(hipodoge,capipepo,ratigueya)** // Acá lo que estamos indicando es que con la función **push** nos empuje dentro de la variable tipo array **mokepones** nuestras variables que tiene la información.
Asi lo entendi yo al igual les dejo aca una documentación donde pueden entender mas.
Esto de los Arrays es muy util, que suerte que podemos almazenar varios valores!!
Array:
En programación, un array o arreglo es una estructura de datos que permite almacenar y acceder a un conjunto de elementos del mismo tipo en una ubicación de memoria contigua.
.
Cada elemento del array tiene una posición única en el mismo y se puede acceder a él utilizando su índice. El índice de un array comienza en 0 y va hasta el número de elementos menos uno. Por ejemplo, un array con 5 elementos tendría índices de 0 a 4.
.
Los arrays son muy útiles en programación porque permiten trabajar con grandes cantidades de datos de manera eficiente y organizada. También son muy flexibles, lo que significa que pueden ser utilizados para resolver una amplia variedad de problemas.
.
En muchos lenguajes de programación, los arrays pueden ser inicializados con un tamaño fijo en el momento de su creación o pueden crecer o reducir dinámicamente durante la ejecución del programa. Además, los elementos de un array pueden ser de cualquier tipo de datos, como números, cadenas de texto, objetos, etc.
great.
Los comentarios y la clase me hicieron recordar que desde hace muchos años yo cuento la edad desde 0 si dicen tengo 30 años, yo les digo realmente estas viviendo tus 31 😅 se ponen atónitos pero es real 😁
Consejo: no pongan al profe De Granda en velocidad 0.5x, si no quieren verlo hablar con unos tragos de más… jajajaja
Me encanta cómo explica la funcionalidad de cada palabra con su traducción del inglés. Por primera vez estoy comprendiendo mucho más a fondo cada nueva línea de código 😄 No es lo mismo tener que imaginarse uno mismo lo que hace cada palabra nueva que se usa, pensando su traducción, en comparación a que Diego la traduzca, explique y dé un ejemplo cuando la usa por primera vez. En serio, gracias.
array --> variable que contiene diferentes valores y tipos de datos
nombre.push --> arrega un elemento a un array
Me encanta como el profesor Diego De Granda hace super sencillo entender estos temas! felicitaciones por ello @degranda10
Que increíbles clases esta dando el Don Diego!! Que fácil hace ver todo. En su momento si que me costo entender este tema de clases. Me hubiera encantado tener estas clases de Diego en su momento. Realmente, son ORO!!
Que buen profesor, explica lento y con pausa. De por si en lo que llevo del curso, todos me han gustado.
Recuerden nunca parar de aprender.
Cuando usamos arrays o arreglos podemos mandar a llamar todas los objetos con una variable como el arrays y yo no será necesario llamar a objeto por objeto,
array es una variable simbolizado con corchetes. ejemplo:
let mokepones = [ ]
Ademas los arreglos pueden guardar diferentes combinaciones de letras, objetos y diferentes tipos de mokepones xD
tip: cuando estamos programando siempre contamos de el numero cero 0.
Gracias por la clase.
Un array es un conjunto de valores relacionados que se guardan en una sola variable
Me queda la pregunta de si ya el código estaba fucnionando, cual es el objeto de ingresarlos bichos en clases, mas como lo dice… ya veremos los beneficios
Arrays o Arreglos o Matrices o Vectores: es una forma de acumular la información de una manera organizada sin necesidad de tener extendernos mucho con variables y/o constantes.
Luego esa información, esos datos los podemos llamar cuando sea necesario.
Otro ejemplo:
Dios que buen profe, si bien lo había visto antes no me quedaba claro Class y el console.log es muy útil para ir de a poquito viendo que no se rompa todo, al ver ese ‘push’ solo pienso en GitHub y lo recuerdos de Vietnam vienen a mi!
Arreglos y luego aprender matrices 😛
Un arreglo o array es capaz de almacenar datos de muchos tipos como texto, numéricos, objetos, etc.
Definitivamente un arreglo nos arregla las cosas 😅
Un método de un arreglo es push(), que indica agregar un elemento al final de un arreglo.
📌 Los arrays nos permiten guardar varios valores/objetos en una misma variable
Por fin le entendí a los arrays 😃
Los array son un tipo de dato que encontrarás en cualquier lenguaje de programación. Te permiten agrupar todos los valores que necesiten en una sola variable, agregar nuevos, quitarlos, reemplazarlos, entre otras acciones.
Para crear un arreglo en Javascript, utiliza los corchetes [], como si fuese una caja que guarda datos. Es buena práctica que la variable del tipo arreglo tenga su nombre en plural para indicar que dentro habrá una determinada cantidad de valores.
let mokepones = [ ];
Los arreglos nos permiten dentro de una sola variable guardar diferentes tipos de valores (texto, números) para luego poder llamarlos y ejecutarlos.
.
Cada valor dentro del array va a tener un número asociado, recordemos que se comienza a contar desde el valor 0. Ejemplo:
.
.
Información para complementar: https://developer.mozilla.org/es/docs/Glossary/array
Es interesante la forma en que se usa los listados para llamar objetos, es increible.
muy buena explicación.
Si directamente tipeamos por consola el nombre del array ya nos muestra que valores tiene, sin usar console.log
Arrays[✅]
El objeto Array de JavaScript es un objeto global que es usado en la construcción de arrays, que son objetos tipo lista de alto nivel.
hola, excelente expliacion del teme!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?