WWWWOOOOOOOOOOOOOO!!! Amo amo estas utimas clases, me ando enamorando del backend, pero le tengo miedillo aun…
A SEGUIR APRENDIENDOOOOOO
Fundamentos de Programación
Programación Básica: Fundamentos y Creación de Proyectos en Línea
Programación Básica en Google Chrome: Variables y Funciones
Creación de una Página Web Básica con HTML
Estructura Básica de un Documento HTML
Estructura y funcionamiento básico de HTML y JavaScript
Instalación y uso básico de Visual Studio Code para programar
Declaración y Uso Básico de Variables en JavaScript
Programación de Piedra, Papel o Tijera en JavaScript
Programación de Piedra, Papel o Tijera en JavaScript
Generación de Números Aleatorios con JavaScript
Creación y uso de funciones en programación
Ciclos y Condiciones en Programación: Piedra, Papel o Tijera
Programación de un Juego de Piedra, Papel o Tijera en JavaScript
Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web
Manipulación del DOM y Eventos en JavaScript para Juegos Web
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación de Páginas Web para Videojuegos en HTML
Selección de Mascotas en HTML para Juegos Interactivos
Programar eventos de clic en botones HTML con JavaScript
Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota
Selección de Mascota en JavaScript: Implementación y Validación
Manipulación del DOM con JavaScript para mostrar mascota seleccionada
Selección Aleatoria de Mascota Enemiga en JavaScript
Eventos de clic y lógica de ataque en JavaScript
Ataques Aleatorios para Mascotas Enemigas en JavaScript
Creación de Mensajes Dinámicos en Combate HTML y JavaScript
Lógica de Combate en JavaScript para Juego Mokepon
Operadores Lógicos en Programación: AND, OR y NOT
Actualización de Vidas en Juego de Combate con JavaScript
Validación de Vidas y Mensajes Finales en Juegos
Funcionalidad de Reinicio y Desactivación de Botones en Juego
Mostrar y ocultar secciones en HTML con JavaScript
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Estilos CSS: Selectores, Propiedades y Valores
Tipos de Visualización en CSS: Display Block, Inline e Inline Block
Alineación de Elementos con Flexbox en CSS
Modelo de Caja en CSS: Espaciado y Bordes
Diseño y Estilo de Páginas Web con HTML y CSS
Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas
Estilos CSS para Mejorar la Interfaz de un Juego
Estilizado de Pantallas de Juego con CSS y Flexbox
Separación de mensajes y estilos en JavaScript y HTML
CSS Grid: Organiza Elementos en Rejillas Bidimensionales
Diseño Responsivo con CSS: Media Queries y Flexbox
Pseudoclases en CSS: Mejora la Interacción del Usuario
Quiz: Estilos con CSS
Optimización de código
Optimización de Código JavaScript con Clases y Objetos
Optimización de Código JavaScript: Variables y Funciones
Clases y Objetos: Fundamentos para Optimizar Juegos
Construcción de Clases y Objetos en JavaScript
Uso de Arreglos para Almacenar Objetos en JavaScript
Agregar ataques a objetos en JavaScript
Renderizado Dinámico de Objetos en HTML con JavaScript
Solución de errores en variables y elementos HTML en JavaScript
Uso de Objetos para Centralizar Información en JavaScript
Selección de Mascota Aleatoria en JavaScript
Iteración de Arreglos y Manipulación DOM en JavaScript
Crear Función "mostrarAtaques" en JavaScript para Juegos
Eventos de Clic en Botones con JavaScript
Secuencia de Ataques y Validación de Resultados en JavaScript
Implementación de lógica de combate en juegos JavaScript
Programación de Juegos: Lógica de Ataques y Victorias
Optimización y Corrección de Errores en Juegos Web con JavaScript
Quiz: Optimización de código
Mapa con canvas
Dibujo y manejo de gráficos en Canvas con JavaScript
Movimiento de Capipepo en Canvas con HTML y JavaScript
Movimiento Continuo de Personajes en Canvas con JavaScript
Eventos de Teclado para Controlar Personajes en Juegos
Pintar Fondos y Personajes en Canvas HTML
Métodos de Clases en JavaScript para Juegos Interactivos
Detección de Colisiones en Videojuegos con JavaScript
Programación de eventos y colisiones en un juego interactivo
Ajuste Responsivo de Mapas en Pantallas con JavaScript
Estilos Responsivos en HTML y CSS para Mapas Interactivos
Quiz: Mapa con canvas
Backend: videojuego multijugador
Desarrollo de Juegos Multijugador con Cliente-Servidor y API
Instalación de Node.js en Windows para desarrollo backend
Uso básico de la terminal de comandos y Node.js
Creación de un Servidor Básico con Express.js en Node.js
Conceptos Clave de URIs y Verbos HTTP en Node.js
Desarrollo de API con Node.js y Comunicación Frontend-Backend
Selección de Mokepon y Comunicación JSON en Express.js
Implementación de un Endpoint para Coordenadas de Jugadores en Node.js
Integración de Coordenadas de Jugadores en Mokepon Multijugador
Optimización de Coordenadas en Videojuegos con JavaScript
Batalla Final en Mokepon: Implementación de Colisiones y Back-End
Implementación de Ataques en Tiempo Real para Videojuego Mokepon
Quiz: Backend: videojuego multijugador
Próximos pasos
Corrección de errores en juego multijugador con Node.js
Desarrollo Colaborativo con Git y GitHub para Programadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Una aplicación utiliza datos de diversas fuentes y tipos y a medida que esta crece, utilizará cada vez más. Conocer diversas herramientas para manipular la información te servirá para tomar decisiones sobre cuál utilizar dependiendo la necesidad.
Ya sabes lo que es un array, un conjunto de datos que pueden o no ser del mismo tipo.
Los arrays permiten muchas operaciones como la obtención de su longitud con arr.length
o recorrer cada elemento con arr.foreach()
. Veamos una serie de otras funciones que te serán muy útiles de ahora en adelante.
Map: La función arr.map()
permite, además de recorrer cada elemento de un array, devolver otro array modificado a partir del original.
const arr = [1, 2, 3, 4, 5];
const new_arr = arr.map(e => {
// Sumamos 1 a los elementos pares
if (e % 2 == 0)
return e + 1;
else
return e;
});
console.log(new_arr); // [1, 3, 3, 5, 5]
Filter: La función arr.filter()
permite recorrer y filtrar elementos de un array para obtener un sub-array con menos cantidad de elementos a partir de una condición lógica.
const arr = [1, 2, 3, 4, 5];
const new_arr = arr.filter(e => {
// Devolvemos solo los elementos pares
if (e % 2 == 0)
return true;
});
console.log(new_arr); // [2, 4]
Map y Filter son solo las dos primeras funciones de Javascript para manipular arrays que tienes que conocer. Poco a poco irás conociendo otras. Hasta el momento, practica creando arrays de datos y comprendiendo cómo funcionan estas.
Estas funciones son propias de Javascript y puedes utilizarlas tanto en el backend como en el front-end. En el futuro, podrás descubir herramientas similares de manipulación de datos para otros lenguajes de programación.
Contribución creada por: Kevin Fiorentino (Platzi Contributor).
Aportes 60
Preguntas 36
WWWWOOOOOOOOOOOOOO!!! Amo amo estas utimas clases, me ando enamorando del backend, pero le tengo miedillo aun…
A SEGUIR APRENDIENDOOOOOO
Pensé que era el único que se estaba volviendo loco con las últimas clases, pero leer todos los comentarios me hace saber que no soy el único. Solo queda seguir con ánimos, y cada vez con más ganas de aprender. Vamos con todo.
me encanta todo como se esta desarrollando, pero sinceramente creo q me falta demasiado para poder lograr esto solo!.. gracias por acompañarme y mostrarme este camino
Créditos a @ric.arellano92 -!-!-!
Para evitar el error “mokepon.js:448 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘nombre’)” lo que hice fue agregar un if que evalué si el mokepon existe o no, esta validación también se aplica en la parte de pintar mokeponEnemigo:
//---------------------Al recuperar enemigos--------------------------
mokeponesEnemigos = enemigos.map(function (enemigo)
{
let mokeponEnmigo = null
if(enemigo.mokepon != undefined)
{
const mokeponNombre = enemigo.mokepon.nombre
switch (mokeponNombre)
{
case "Hipodoge":
mokeponEnmigo = newMokepon('Hipodoge', './assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png', enemigo.id)
break
case "Capipepo":
mokeponEnmigo = newMokepon('Capipepo', './assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png', enemigo.id)
break
case "Ratigueya":
mokeponEnmigo = newMokepon('Ratigueya', './assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png', enemigo.id)
break
default:
break
}
mokeponEnmigo.x = enemigo.x
mokeponEnmigo.y = enemigo.y
}
return mokeponEnmigo
})
//---------------------------------Al tratar de pintar enemigos----------------------------------------
mokeponesEnemigos.forEach(function (mokepon)
{
if(mokepon != undefined){
mokepon.pintarMokepon()
revisarColision(mokepon)
}
})
acabo de subir desde la clase 75 la respuesta de @ric.arellano92 porque estuve rompiéndome la cabeza durante una semana y quiero que otros lo puedan solucionar, ya que desde las carpetas del curso da error. saludos!
Excelente clase, ya se pueden mover perfectamente bien los pokemones.
He decidido poner el nombre de la mascota seleccionada en el título del mapa para poder distinguirla de las otras en cada pestaña de! navegador donde se abre el juego.
También he pensado en dibujarle un círculo o halo alrededor de la mascota seleccionada para facilitar la identificación en el mapa con el siguiente código:
![tucapalma con halo.JPG]
pintarHalo(){
// Círculo externo a mi mascota en el mapa
lienzo.strokeStyle = 'rgba(255, 0, 0, 5)'
lienzo.beginPath()
lienzo.arc(
this.x + this.ancho / 2,
this.y + this.alto / 2,
this.ancho / 2 + 10,
0,
Math.PI * 2,
true
)
lienzo.stroke()
}
Para los que les aparece un solo mokepon en la pantalla
deben eliminar el
if (res.ok)
esa validación es innecesaria y es la que genera el error.
espero les sirva
Otra vez se replica el error de consola por no tener un objeto mokepon en la lista de mokeponesEnemigos dentro de pintar canvas.
Se soluciona de la misma manera que antes.
Dewntro del ciclo forEach y antes de llamar al metodo pintarMokepon() debemos poner un condicional que revise si el mokepon está definido o viene vacio. Como el siguiente:
mokeponesEnemigos.forEach(function (mokepon) {
if (mokepon != undefined) {
mokepon.pintarMokepon()
}
En mi caso desde la clase anterior no me funciona el codigo a pesar de que lo segui paso a paso xd, aparece muchos errores y me ha dejado muchas dudas, por ejemplo me lanza error referente a las lineas de codigo siguientes, donde dice: TypeError: Cannot read properties of undefined (reading ‘nombre’)
const mokeponNombre = enemigo.mokepon.nombre
Otra gran duda fue en la parte de la funcion de pintarcanvas() en esa parte se llama a las variables hipodogeEnemigo.pintarMokepon y revisando el codigo del repo no aparecen declaradas arriba y enn mi codigo me lanza el error de que no estan definidas esas variables.
Otro error que me lanza es con lo de las coordenadas en “x” mokeponEnemigo.x = enemigo.x no se exactamente por que razón pero en fin si a alguien le ha pasado alguno de esos errores que mencioné y encontró la manera de solucionarlo, seria bueno que nos comparta su solucion porque aveces uno se entanca
La verdad estas clases estuvieron muy mal, se saltan mucho contenido y muchas cosas no se explican, entiendo que es importante investigar y todo, pero dejar llamadas de colisión sin los parametros correctos, llamadas de funciones que ya no se utilizan, validaciones innecesarias… me generó un montón de errores, ojalá que actualicen toda la sección de backend del curso.
no debe haber peor cosa que arranque la clase y ver que introducieron códigos que JAMÁS se mostraron
Gente, por alguna razon cuando simulaba le jeugo con 2 o mas jugadores, cuando seleccionaba el segundo mokepon (osea el del segundo jugador) el primero entraba en combate por alguna extraña razon, esto se daba a que la posicion de los enemigos.x y enemigos.y en la primera iteracion matcaba como indefinido (nunca encontre la solucion) opte por una solucion mas rapida:
con mokepon.x != null se saltara el problema de undefined que tenia
Hehe casi me da algo del susto cuando dijo que iba a cambiar más cosas XD pero al final me di cuenta que estaba haciendo algo similar a lo que yo hice en clases pasadas para adaptarme y al final solo tuve que pasar la parte de pintar personaje y el resto funcionaba tal cual lo tenía. El Dios de la programación es grande y creo que le caigo bien :p Gracias Platzi y profes love you all
Super, me encanto esta clase.
Las fallas para que no me aparecieran ambos pokemones fueron las siguientes
en primer lugar había omitido enemigos y había puesto mokeponesEnemigos.map al revisar lo corregí
lo segundo
olvide poner los parentesis (). al solucionar estas dos situaciones los pokemones me salieron ambos en la misma pantalla. espero les sirva.
Yo buscando colisionar los Mokepones🤣
A decir verdad, sentía que, conforme pasaban las clases, solo se volvía cada vez más complicado. Luego de comprender de mejor forma el código apoyándome de recursos de Internet como las documentaciones, videos de YouTube o lecturas para solucionar los bugs que me quedaron de la clase pasada, finalmente puedo entender mucho mejor estas clases y lo que aprendemos en ellas. Los aportes de la clase también son una gran fuente de información y motivación. No es fácil, pero, sin duda, cada esfuerzo produce sus frutos; en mi caso, poder comprender y hacer algo que de inicio me asustaba por creer que era casi imposible. Ánimo, si ya llegaron a este punto del curso, ya lograron muchísimo.
Tip:
se rompio mi codigo…
y veo que el codigo del recurso de platzi es diferente al mio, aplico los cambios y nada, sigue saliendo el mismo error:
mokepon.js:407 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘nombre’)
at mokepon.js:407:70
at Array.map (<anonymous>)
at mokepon.js:405:55
const mokeponNombre = enemigos.mokepon.nombre || ""
alli esta el error
Pense que como el titulo decía optimizando el mapa, íbamos a enviar solo el request cuando nos moviéramos y no cuando cargara el mapa, pues no tiene sentido hacer request por segundo si no se usa.
Me quedare con la intriga después espero encontrar solución.
De verás que recomiendo muchísimo verse primero el vídeo sin tocar nada en nuestros archivos y ya a la segunda intentar seguir la clase. En vídeos de 20 minutos podía parecer más sacrificado (lo recomiendo incluso más), pero con los de 5 minutos es genial 😌👌🏼.
Esto es un poco como manejar/conducir 🚙. Saber hacerlo pasa por haberlo hecho muchas veces, no existe una fórmula mágica por la que alguien que ya maneja/conduce te trasplanta sus habilidades enseñándotelo. ¡Pero saber dónde está el volante, los pedales y las marchas está más cerca de manejar/conducir que no saberlo! Lo básico no es tonto, lo básico es la base 🚀
La lógica es muy amplia para poder decir al finalizar el curso que comprendí al pie de la letra todo…se qué esto es como un calentamiento para saber a lo que debemos llegar a ser viendo próximos cursos especializados sobre cada punto que se ha visto en el curso…a darle con fe muchachos!!!
Estoy impresionado la forma en como se uso el nodejs para interactuar con el mapa entre dos jugadores de mokepon. Jamas imagine que me llegara a gustar este juego. Se aprende mucho la verdad. Ya quiero llegar a las ultimas partes.
No me funciona, cuando lo pongo a correr me salen N mil errorres, sigo son saber por que aun hay variables que no estan definidas pero se siguen utilizando en el codigo…
revisarColision(hipodogeEnemigo)
revisarColision(capipepoEnemigo)
revisarColision(ratigueyaEnemigo)
Solo indicar que ese cambio como lo hizo la profe no me funciono, el array mokeponesEnemigos, se llenaba de subarrays y no generaba bien, por lo cual no utilice el indicado por Diana.
No olviden ajustar la colision, que tambien cambio.
En mi version quedo asi:
.then(function (respuesta) {
mokeponesEnemies = []
let tmpMokeponEnemy = respuesta.enemies
tmpMokeponEnemy.map(function (enemy) {
let mokeponEnemigo = null
if (enemy.mokepon !== undefined) {
mokepones.forEach((recordMokepon) => {
if (recordMokepon.title === enemy.mokepon.name) {
newMokeponEnemy = recordMokepon
newMokeponEnemy.x = enemy.x
newMokeponEnemy.y = enemy.y
}
})
mokeponesEnemies.push(newMokeponEnemy)
// console.log(mokeponesEnemies)
return mokeponesEnemies
}
})
}
La colision:
sendPosition(attributePetGamer.x, attributePetGamer.y)
mokeponesEnemies.forEach(function (mokeponShowEnemy) {
if (mokeponShowEnemy !== undefined) {
mokeponShowEnemy.paintMokepon()
testCollition(mokeponShowEnemy)
}
})
🚀
casi esta terminando la clase creo que es un recorrido bastante larga al programar pero si estos maestros son buenos
Se me rompio todo el codigo, pero hay que aprender a debuggear :’)
Que hermoso cuando pruebo todo y corre perfecto 😃 pero llega a salir un error y me casi me desespera peo logro resolverlo.
A seguir aprendiendo!!!
wao muchas gracias Profe Diana aprendi mucho Con usted Todos los profes son muy buenos pero creo que me quedo con Diana y Freddy.
Excelente curso, abre paso a muchas ideas. ❤️
ok estas clases han sido muy intensas, pero ahi va
Todos los que tengan problemas con el código dejen su código fallido, captura de su error, etc. He visto muchas pregunta que no dejan ni el de error que les sale, ni el código ni nada, así es imposible ayudarlos
vamo que se puede 🤩🤩
En estas últimas clases todo se hace más complejo, es la hora de poner más entusiasmo
al mover al mokepon, en la consola me genera un error (por cada movimiento), a alguien le ha pasado esto? Cabe acotar que los mokepones se mueven normal, pero al inspeccionar noté ese error.
wow que sensación genial encontrar bugs cuando no corre. =}
Para los que les aparece el error:
TypeError: Cannot read properties of undefined (reading ‘nombre’)
La razón es que cuando hay un jugador enemigo que apenas se unió al juego pero que todavía no ha seleccionado su mokepón, entonces el objeto del enemigo que el servidor devuelve sólo tiene el campo id
; no tiene el campo mokepon
y, por consiguiente, mucho menos el campo mokepon.nombre
.
La solución a esto puede ser la que varios ya han comentado, de poner una verificación if(enemigo.mokepon != undefined)
o bien if(enemigo.mokepon != null)
en los lugares necesarios. Pero también se puede hacer que la clase Jugador del servidor siempre inicialice con un campo mokepón. Por ejemplo, en el constructor se podría poner:
this.mokepon = new Mokepon("")
.
Así, siempre hay un mokepón con el nombre igual a “”, y se cambia luego con la función asignarMokepon.
Me emociona llegar a este punto del curso, voy entre brincos y saltos, pero es parte del aprendizaje. Impresionante.
Gracias por la clase.
creditos a Santiago Vasques Rodrigues:
La profesora aconsejaba que tras realizar cambios en el código, se cerraran las pestañas del navegador y se parara (Ctrl + C) y volviera a ejecutar el servidor (node index.js).
Supuestamente al volver a abrir el juego en el navegador desaparecen muchos o todos los errores por conflictos previos.
Uhmmmmm esta parte me ha dado algunos errores en el código, ay, a ver que sale xd
Muy buenooo!!! cada tanto tengo error… y debo revisar mi código viendo cada clase, pero eso me ayuda a interpretar cada vez más cada una de las funciones. Muchas gracias profe!!!
array : conjunto de datos que pueden o no ser del mismo tipo, sean numéricas, de texto, etc.
array.map() : permite además de recorrer cada elemento del array puede devolver otro elemento del array modificado, sustituir el original.
array.filter() : se mueve y recorre por los elementos que contiene el array para obtener un sub-array con menos elementos, disminuyendo elementos, es decir mediante una condición actúa como filtro y solo los elementos que cumplan esa condición serán retornados.
Pues yo tambien me quede atorado aca, segun la consola del navegador mi error comienza con la variable “punkkemonesEnemigos”
la hipotesis que tenia para solucionar el fallo era que al momento de crear la viarble
let punkkemonesEnemigos = [] no se vincularon valores a ese array, pero luego de interntar suir los valores con un
punkemonesEnemeigos.push (hipodoge, capipepo, ratigueya) mi error no se va.
alguien tiene alguna observacion que me pueda aydar.
Mi juego no hace lo que se supone, estoy perdido, sin embargo sigo adelante, ya me atrasé mucho.
Wow increibleeeeeee
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?