Mokepones dinámicos en el mapa

A los errores en informática se les conoce como BUGS ya que en el siglo XIX se construían complicadas maquinas con muchas pequeñas partes movibles(Máquina analítica). A estas maquinas se les llegaban a meter bichos(BUGS) y estorbaban el movimiento de alguna de sus piezas haciendo que fallaran.

Se me rompió todo el código… que bello es programar😳😔😔

Esta clase tienen que volver a hacerla de nuevo. Se omiten muchas cosas. Enumero algunas:

1. En la funcion pintarCanvas() se debe eliminar o comentar el codigo donde mandamos a pintar variables que ya no existen mas tales como “HipodogeEnemigo”.
2. Idem anterior pero con la función de revisarColisión invocada en la función de pintarCanvas(). Se siguen enviando variables que ya no existen.
3. Quizas la mas importante omisión es que en la función de enviarPosicion() luego del enemigos.forEach() y de haber generado la variable mokeponEnemigo debemos validar si enemigo.mokepon está declarado o no con un if. Por ejemplo así:

if (enemigo.mokepon != undefined) {

El curso está muy bueno pero estos errores te hacen perder mucho tiempo. Aunque si tenés algo de experiencia programando te sirve para practicar la busqueda de bugs.

Muy mal explicación, hace todo como si ya supiéramos, debería ir mas despacio. Acabo de dañar todo mi código.

Lo que usa por el minuto 10:12 se llama spread operator.

Recomiendo que veáis el vídeo que mando, pero en síntesis toma una lista o un objeto y lo “desata”. Se ve claro con un ejemplo:

let a = [1, 2, 3]
let b = [4, 5, 6]
let c = [a, b]

¿Cuál es el valor de c? Pues bien, es [ [1, 2, 3], [4, 5, 6]].

Es decir, una lista que contiene dos listas: a y b.

Sin embargo, si usamos el spread operator (los 3 puntos), y hacemos esto:

let c = [...a, ...b]

Ahora c es igual a [ 1, 2, 3, 4, 5, 6]. Una sola lista, es como si hubieramos sacado cada elemento de a y b y lo hubieramos colocado en su lugar.

Creo que esta clase fue la que más me costó pero al menos aprendí una valiosa leccion.
res.JSON() no es lo mismo que res.json()
Media hora buscando el bug 🤦‍♂️

Hola gente, quiero compartir mi código por si a alguna persona le sucedió que al final de esta clase no aparecía el otro Mokepon y por el contrario solo aparecia el de esa misma pestaña, de preámbulo digo que no se explicar bien el por que de estos cambios ya que solo lo hice guiándome de otros comentarios de la comunidad, pero quería hacer el aporte con fotos para dejarlo mas explícito y claro. El primer cambio a realizar se encuentra en la funcion enviarPosicion(x, y) {
Agreguen esa linea de codigo subrayada en rojo y asegurense de cerrarla despues de mokeponEnemigo.pintarMokepon()

Adicionalmente hay otro cambio a realizar:

Borren la parte del circulo rojo ya que como recuerdan las variables hipodogeEnemigo, capipepoEnemigo y ratigueyaEnemigo ya no existen en el código debido a que las reemplazamos por la variable mokeponEnemigo que se encuentra en la función enviarPosicion(x, y), entonces practicamente esa parte en rojo de la foto no nos sirve de nada.

Espero que les sirva, no se den por vencidos y tengan paciencia, en caso de que esta solución no les haya servido lo más seguro sea que les faltó escribir algo en otra parte del código o que lo hayan escrito mal, mi recomendación es que repitan las clases que consideren necesario a velocidad 1,75 y vayan verificando que todo esté bien escrito y que no falte nada, y recuerden, el secreto del éxito está en la perseverancia.

Que felicidaddddddddddddddddddddd luego de 4 horas al fin consegui mi errorrrrrrrrrr xdd

Qué cambios tuve que hacer?:
-Yo no tengo funciones constructoras así que desde ahí ya había empezado mal. Lo que yo tenía de mi lógica pasada era una variable donde metia en un array los objetos de mis enemigos y desde hay los pintaba en pantalla.
-Tuve que crear una validación con el método some para que me dijera si ya existía mi enemigo en mi array. Esto debido a que antes de tener esa validacion me metia una y otra vez el objeto al array llegando a tener un array de enemigos de miles de elementos cuando solo tenia 2 enemigos en realidad.
-Ya con mi array de enemigos y sin saber cual de los enemigos estaría ejecutando la función de actualización de coordenadas, cree una constante que me diría el índice en mi array de enemigos del objeto al que estaba leyendo las coordenadas.
-Finalmente con mi array de enemigos ok y la información de index que necesitaba, podía continuar con el código normal actualizando coordenadas y pintando a mis enemigos en mi canva 😄

.then(function(res){
        if(res.ok){
            res.json()
                .then(function({enemies}){
                    enemies.forEach(function(enemy){
                        const invocacionNombre = enemy.invocacion.nombre || "asi no era"
                        
                        const exist = (element) => element.nombre === invocacionNombre;
                        if(!enemigos.some(exist)){

                            enemigos.unshift(invocaciones[invocaciones.findIndex((inv) => inv.nombre === invocacionNombre)])
                        }
                        const myIndex = enemigos.findIndex((enemigo) => enemigo.nombre === invocacionNombre)
                        
                        console.log(enemigos);
                            
                        enemigos[myIndex].x = enemy.x
                        enemigos[myIndex].y = enemy.y
                        	 
lienzo.drawImage(enemigos[myIndex].imgMin,enemigos[myIndex].x,enemigos[myIndex].y,invocaciones[1].ancho,invocaciones[1].alto);
                        
                    })
                })
        }
    })

La verdad me siento muy orgulloso de mi aprendizaje, creí que no sobreviviría a esta parte del backend por todas las diferencias que tenía en mi codigo pero lo logre :3. Al final si tuve que hacer cambios pero gracias a las base y la lógica que nos dan en el curso me logre adaptar mientras me rompía la cabeza en el proceso XD

Un aportesote, como yo acabo las clases y apago mi pc, al otro dia es dispendioso abrir codigo por codigo, en especial para que node tome la ruta, encontre una solucion rapida y facil
1 Nos ubicamos en la ruta de la carpeta, escribimos CMD y enter

En la pantalla negra escribimos code + . y enter lo que nos abrirá todos nuestros archivos en visual

Es bonito a este punto ir parando el video de la profe y completar tu mismo las cosas e ir viendo que lo estás haciendo bien, aunque solo sea copiar y pegar

Llevo 3 clases intentando hacer que muestre el mokepon pero no lo trae, igual sigo intentando, no me rendiré xD, he revisado las clases varias veces, en algún momento encontraré el fallo

Tuve un error que dure un buen rato en encontrar y solucionar. Me salia un error en el forEach y decia que no era capaz de identificar x. Al hacer un console.log(mokeponEnemigo) me salia en la consola que seguia siendo nulo, cuando ya deberia tener asignado un nombre despues de los condicionales. El error estaba en que cuando cambié el hipodogeEnemigo por mokeponEnemigo, no borre los let.

Es decir, se repitia un monton de veces “let mokeponEnemigo” y por eso el condicional no estaba funcionando.

El let solo debe estar una vez y es antes del if. Despues solo debe decir mokeponEnemigo = new Mokepon…

Me marca error pero funciona , si se mueven y se ven xDxDxD

Que espectáculo de clase; tuve algunos errores… mi código se rompió, sin embargo, trate de pararme a pensar que estaba mal, probe y probe y se logro solucionar para llegar al punto. Increíble los avances que se ven.

Esta clase me encantooooo!

Se rompió el código, solo me aparece un solo mokepon cuando duplico la ventana, los otros se fueron y no aparecen

Para quienes tengan el error de hipodogeEnemigo is not defined…en pintarCanvas() comenten todo lo que hace referencia a esa variable.

Y otro error que tuve es que no me deja llamar a dos propiedades subsecuentes de una variable…por lo que tuve que crear una variable adicional para que me funcionará

Llegar hasta aquí es como acercarse a las zonas del jefe final de Dark souls. Todo te mata el código.

Este curso es muy bueno, a este punto es algo abrumador lo rapido que va el nivel y a veces me siento un poco frustrado pero da un panorama muy bueno de lo que se puede hacer con programacion, espero que en cursos mas adelante los temas se manejen a un ritmo mas moderado. 😃

Aquí en esta clase se van a encontrar con dos errores que no se abordan en el video:

1. Las variables que anterior creamos para los enemigos dejaron de existir (ej: hipodogeEnemigo) y hay que hacer control sobre ellas quitándolas en todas partes donde se llamaron antes.

2. Todas las revisiones de colisión que usan las variables enemigas. por ejemplo: revisarColision(hipodogeEnemigo) de estas también hay que quitarlas.

Chicos no se si les funcione mi aporte, pero para los que tienen el problema de que no les sale el mokepon enemigo en la otra pestaña yo arregle ese problema fijandome en esto :

Deben de fijarse si en index.js en la parte subrayada es jugador.Id y no sea jugadorId ya que de esa manera no les funcionará.

Espero haber ayudado.

para reiniciar el servidor sin darle control + c
pueden escribir en la consola rs y le dan enter

Me salía el mismo error que la mayoría de q no podía establecer propiedades de null, por más que busque e intenté y comparé los archivos en caso de una letra, una coma, un punto, un espacio, nunca supe donde estaba el error, como ultimo recurso lo único que hice fue copiar del archivo del curso y pegar desde el forEach y voila corrió normal (también lo comparé renglón por renglón). Intenté seguir los consejos de los compañeros que muchas veces me han salvado de dolores de cabeza, pero ninguno me funcionó. A pesar de eso y en definitiva que este curso no es muy básico para los que tenemos cero conocimiento en el tema, no desisto y no me rindo, sin importar cuanto tiempo tarde en encontrar la solución.

Siento que esto se salió de control desde el maestro De Granda, todo se empezó a dar por sentado que ya sabiamos cosas que la verdad no sabemos y por ello, no se explican muchos detalles que son importantes, ya no entiendo nada!

Increíble que el curso comienza bien y al final se va dañando todo el código y para resolver los errores toca buscar en internet varias horas o esperar a que a alguna persona lo ponga en los comentarios

En lo que llevo de este curso he escrito muchas veces alguna pregunta o duda que tenga y nadie responde… deberían tenerlo en cuenta para uno avanzar con el curso y no quedarse.

No me funcionaba, aplique la de reiniciar el pc y magicamente funcionó 😂😂😂

Tengo que confesar que me siento un super hacker cuando debo manejar la terminal y prender o apagar el servidor, pero al mismo tiempo me siento super noob cuando en vez de escribr “json” escribo “jAson” como si fuera un nombre.

Deje de escribir codigo hace 4 clases. Ahora solo estoy dedicado a ir agarrando conceptos y entender lo mas que pueda del panorama. Luego avanzare con otros cursos de programacion que espero se tomen el tiempo de enseñar con otra metodologia. Pero un gran curso.

Estas clases de 23 minutos, para mi son de 4 horas o mas, repetir, revisar y entender.

Gracias a los compañeros que referencian a @ric.arellano92 ! ! !, ayudando al error undefined en array enemigos.mokepon cuando no existe

mi versión mejora la creación del mokepon, porque utiliza el array mokepones ya creado

        .then(function (res) {
            if (res.ok) {
                res.json()
                    .then(function (respuesta) {
                        attriEnemy = respuesta.enemies

                        attriEnemy.forEach(function (enemy) {

                            if (enemy.mokepon != undefined){

                                let newMokeponEnemy = null

                                mokepones.forEach((recordMokepon) => {
                                    if (recordMokepon.title === enemy.mokepon.name){

                                        newMokeponEnemy = recordMokepon
                                        newMokeponEnemy.x = enemy.x
                                        newMokeponEnemy.y = enemy.y
                                        newMokeponEnemy.paintMokepon()                                        
                                    }
                                })
                              
                            }

                        })
                    }
                    )
            }
        }

![](

23 minutos de clases que termine en aproximadamente 2 horas, con el código roto cada 3 minutos, pero finalmente quedo funcionando perfecto, y solucionando todos los errores es que se va aprendiendo

Ufff este video se me hizo muy dificil, tuve un par de erroros y encendi y apage el servidor muchas veces pero por fin se pudo!!
😄😄

Orgulloso los que llegamos hasta aquí, pero la verdad sólo porque este curso es gratuito no se puede criticar mucho, porque está muy mal explicado, asumen que se conocen mil cosas, pero bueno, que sea un abrebocas y una motivación para aprender y llegar a saber de donde salen tantas cosas que si bien funcionan, necesitamos ir a bases más profundas si queremos aprender a hacerlo por si mismos.

Lento pero seguro y con pocos errores al ejecutar.
https://github.com/FredyBarrantes/HtmlCssJavascript.git

Hasta aqui llegue, no me muestra el otro jugador y me salen nmil rerrores, por eejmplo variables como hipodogueEnemigo ya no estan definidas pero se siguen utilizando en el codigo…

Buenas a todos. A mi tambien me ocurrió que los mokepones enemigos estaban ubicados en “x=0” y en “y=0”. Tenía todo bien, excepto un caracter en el fetch. Tenía esto:

"Content-Type": "application-json"

Cuando en realidad era:

"Content-Type": "application/json"

También tuve que eliminar (o poner como comentario) todas las apariciones de los extintos hipodogeEnemigo, capipepoEnemigo, etc etc.

Además, yo les había agregado movimientos a los mokepones enemigos, con lo cuál tuve que eliminar esas líneas para que quede todo en condiciones. Recuerden que pueden utilizar “Ctrl + F” para utilizar el buscador en Visual Studio Code.

Saludos a todos. Ya falta poquito!

Buenas tardes saludos aparte que en la función enviarPosicion(x, y), se deben eliminar los métodos hipodogeEnemigo.pintarMokepon(), capipepoEnemigo.pintarMokepon() y ratigueyaEnemigo.pintarMokepon() de la función pintarCanvas(), debido a que van a generar errores porque ya no van a existir, al haber sido sustituidos por aquel.

OJOOO
yo tuve el error en mi codigo en mi caso es sobre digimon por eso todo se llama asi en fin digimonEnemigo.x = enemigo.x
digimonEnemigo.y = enemigo.y

                                digimonEnemigo.pintarDigimon() ----> en pintar.Digimon yo tenía la función pintarCanvas el cual eso me causaba un error en consola y no me mostraba el otro digimon en el mapa de mi juego verifiquen bien las funciones que declaran estos errores atrasaran nuestro aprendizaje dicho error me tomo una semana en verificarlo espero no tengan el mismo un abrazo

Esta clase se me complicó un poco. 23 minutos se convirtieron casi en todo el día jejeje ! Cosas que pasan. No fue simplemente mi dia para programar !

Rompi mi código muchas veces en estas lecciones, luego de una busqueda conseguí esta herramienta que me ayudó a encontrar los errores en comparación con el código de la profesora.

Solo copien y peguen el código descargable en los recursos, luego el suyo y los comparan acá https://text-compare.com/es/

Sería bueno que los profesores usaran pantallas con mayor resolución y no laptops, para que al momento de grabar el curso no sean tan pequeños los cuadros donde tenemos que ver los estudiantes, por ejemplo, la consola del navegador se vuelve muy pequeña

Me siento muy feliz porque después de un buen rato, pude hacer aparecer a mis “mokepones” siguiendo este proceso:

• Intenté resolverlo por mí mismo.
• Me frustré porque no pude resolverlo.
• Vi los comentarios y realicé los cambios.
• Me frustré porque aún así no me funcionó.
• Vi los videos varias veces a 1.75x, lo cual me ayudó a entender mejor cómo funcionaba mi código.
• Encontré la solución en la que la palabra “mokepon” no aplicaba a mi código, sino otra que yo asigné.

¡Dios mío, me sentí tan feliz de poder lograrlo y seguir avanzando!

En caso tal que a alguien no le haya funcionado el código, uno de los puntos a verificar es que luego de llamar al método mokeponEnemigo.pintarMokepon() en la función enviarPosicion(x, y), se deben eliminar los métodos hipodogeEnemigo.pintarMokepon(), capipepoEnemigo.pintarMokepon() y ratigueyaEnemigo.pintarMokepon() de la función pintarCanvas(), debido a que van a generar errores porque ya no van a existir, al haber sido sustituidos por aquel.

Hago esta pequeña acotación porque la profe Diana lo indica a los 17:39, pero no se observa cuando elimina los métodos sustituidos.

1
Debes quitar las variables ratigueyaEnemigo.pintarMokepon (ponla en comentarios) y también lo de revisarColision(ratigueyaEnemigo) recuerda que esto se repetía por cada enemigo. El segundo error es que te toca abrir al menos dos pestañas y en cada uno seleccionar un personaje para que te lleve al mapa, sólo entonces dejará de salir ese error.
2
Creo que esta clase fue la que más me costó pero al menos aprendí una valiosa leccion.
res.JSON() no es lo mismo que res.json()
Media hora buscando el bug 🤦‍♂️
3
En la funcion pintarCanvas() se debe eliminar o comentar el codigo donde mandamos a pintar variables que ya no existen mas tales como “HipodogeEnemigo”.
Idem anterior pero con la función de revisarColisión invocada en la función de pintarCanvas(). Se siguen enviando variables que ya no existen.
4
Quizas la mas importante omisión es que en la función de enviarPosicion() luego del enemigos.forEach() y de haber generado la variable mokeponEnemigo debemos validar si enemigo.mokepon está declarado o no con un if. Por ejemplo así:
if (enemigo.mokepon != undefined) {

5
Para quienes tengan el error de hipodogeEnemigo is not defined…en pintarCanvas() comenten todo lo que hace referencia a esa variable.

ufff para mi esto es un gran avance, wow, que buen curso, se que estas ultimas clases es mucha info nueva y se debe estudiar por aparte tdos estos temas, pero no se quejen, este es gratis y en un abrebocas de lo que se puede hacer!!!

saben porque cuando cargo otros personajes, estos me aparecen titilando, osea no es una imagen fija sino como parpadeante, solo pasa con los enemigos online de otras pestañas, el que elijo si aparece bien

Estaba por volverme loco, hasta que desde la terminal tratando de entender esos errores ví que me mandaba a una línea y el problema era que puse res.end en lugar de res.send

Al final me dio una pereza gigante buscar el error y simplemente copié el código de los recursos de la clase, lo pegué y eliminé

    hipodogeEnemigo.pintarMokepon()
    capipepoEnemigo.pintarMokepon()
    ratigueyaEnemigo.pintarMokepon()
    if (mascotaJugadorObjeto.velocidadX !== 0 || mascotaJugadorObjeto.velocidadY !== 0) {
        revisarColision(hipodogeEnemigo)
        revisarColision(capipepoEnemigo)
        revisarColision(ratigueyaEnemigo)
    }

Sé que no es lo mejor, pero para un principiante como yo es la salida más práctica de una parte del curso a la que llego bastante cansado y con ganas de terminar este proyecto, sin saber aún de debugging ni haber entendido la mitad de lo que se explicó, que espero entender más a detalle cuando empiece a ver los cursos en profundidad. Un buen abrebocas este curso, pero no quiero perder el tiempo en él.

Despues de repetir varias clases decenas de veces, leer mi codigo y compararlo con el del repo sin saber por que no podia enviar las coordenas, mi error era que en el fetch estaba apuntando a un puerto equivocado en el backend.

Detallitos

sufri

platzi es una pagina demasiado vulnerable me tomo solo 2 horas

Para esta ultima parte del curso solo tengo una cosa que decir, que duro es ser Backend 😓😓😂

no me puedo creer vida del amor hermoso, horas batallando por un error, y era solo que el chrome estaba buggeado, era solo reiniciar el server y abrir y cerrar el chrome

me rindo, no entiendo es nada.

algo frustrante esta parte, si no fuera por los demás comentarios seria mucho mas difícil darme cuneta de cual es el error.
me parece que deberían tener en cuenta que no todos sabemos programar

Cuando veo que empiezan a borrar y reescribir el código…
//Por suerte se pueden ver las clases en 0.5, porque si veo este tipo de clases en 0.85 me quedo atrás😅

el error que me sale es este y no me muestra el mokepon de la otra pestaña, ya comente las variables no existentes.

mokepon.js:451 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting ‘x’)
at mokepon.js:451:42
at Array.forEach (<anonymous>)
at mokepon.js:427:30

Me siguen apareciendo muchos errores

Ayuda por favor , como hago para que no hayan tantas solicitudes , se pone tremendamente lento supongo que para un juego basico como este eso no deberia pasar 😦

Recomiendo mucho hacer una función para crear mokepones:

function  creaMokepon(tipo)
 {
   let res = null;
   if( tipo === 'hipodoge' ){ res = new Mokepon('hipodoge','./Assets/mokepons_mokepon_hipodoge_attack.png',5,ataquesTipoAgua,'./Assets/hipodoge.png');}
   else if (tipo === 'capipepo' ){ res = new Mokepon('capipepo','./Assets/mokepons_mokepon_capipepo_attack.png',5,ataquesTipoTierra,'./Assets/capipepo.png');}
   else if(tipo === 'ratigueya') {res = new Mokepon('ratigueya','./Assets/mokepons_mokepon_ratigueya_attack.png',5,ataquesTipoFuego,'./Assets/ratigueya.png');}
   else if(tipo === 'langostelvis') { res = new Mokepon('langostelvis','./Assets/mokepons_mokepon_langostelvis_attack.png',5,ataquesTipoFuego,'./Assets/ratigueya.png'); } 
   else if(tipo ==='pydos') { res= new Mokepon('pydos','./Assets/mokepons_mokepon_pydos_attack.png',5,ataquesTipoAgua,'./Assets/ratigueya.png'); } 
   else if(tipo ==='tucapalma') { res = new Mokepon('tucapalma','./Assets/mokepons_mokepon_tucapalma_attack.png',5,ataquesTipoTierra,'./Assets/ratigueya.png'); } 
   return res;
}

Te ahorra bastantes lineas de codigo y hace que sea mas legible, pudiéndote concentrar en lo mas complejo.

Por ejemplo en la lista de mokepones podemos agregar directamente, usando la funcion y no necesitamos crear 1° cada objeto para agregarlo despues.

mokepones.push(creaMokepon('hipodoge'),creaMokepon('capipepo'),creaMokepon('ratigueya'),creaMokepon('langostelvis'),creaMokepon('pydos'),creaMokepon('tucapalma'));

y finalmente evitamos crear una nueva logica para crear enemigos, ya esta dentro de la funcion creaMokepon

function enviarPosicion(x,y)
{
   fetch(`http://localhost:8080/mokepon/${jugadorId}/posicion`, {
    method:"post" , headers:{ "Content-Type" : "application/json" }, body: JSON.stringify({x,y})
 })
 .then(function(res){
      if(res.ok)
      {
        res.json()  
        .then(function({enemigos}){
            console.log(enemigos);  
            enemigos.forEach( function(nodoEnemigo) {
              let mokeponEnemigo = creaMokepon(nodoEnemigo.mokepon.nombre);
                mokeponEnemigo.x= nodoEnemigo.x;
                mokeponEnemigo.y = nodoEnemigo.y;
                mokeponEnemigo.pintar();
            } )

He perdido la noción del tiempo, pero son iguales y sólo el de abajo funciona (el de Platzi). Al final haré copia y pega, porque será un fallo raro inexplicable. Lo tipico 🤡 https://postimg.cc/k62xMdN0

y otro aporte, y no se olviden de recargar de nuevo la pag. siempre que reinicien el servidor

En la programación el detalle va al extremo, tanto asi de que deben ejecutar en el mismo orden los llamados a las APIs, (abrir las pestañas) para que se ejecuten en ese orden los llamados y funcione bien

Otra forma de obtener la lista de los enemigos en el Backend es aprovechando que ya tenemos el index del jugador que manda el Post y usando el metodo splice() :

Chicos ya no sé como solucionar estos problemas que tengo.
En la terminal me marca esto en index.js

y en el inspector me salen estos 2 errores:

Gracias por la clase Diana! … la verdad no entiendo casi nada de lo que ocurre, creo que como dicen muchos de mis compañeros faltan explicaciones básicas, se perdió hace muchas clases la explicación de conceptos básicos y en verdad creo que para muchos esto se convirtió en un desafío de que no se rompa el código y tratar de sobrevivir y entender un poco aunque sea. Pero bueno una vez mas gracias , entiendo que es un curso gratis y como dicen por ahí a caballo regalado no se le miran los dientes 😉

Hola!!! A mi me pasaba igual, que no me salía el otro Mokepon y revisé todo el código y tenía un paréntesis de más. Lo borré y ya me funcionó y me salen los dos Mokepones. Prueben y me cuentan si les funciona, ojalá que si 😃.

Chicos animo con esta clase
Me costo 5 dias encontrar mi error, les recomiendo que revisen los aportes y preguntas de todos, de esa forma pude encontrar y descartar errores, y muy importante comparen el codigo del recurso de GitHub con el JavaScript y Backend de ustesdes

Normalmente el codigo funciona mal por una palabra mal escrita o una letra mal ubicada, mucha paciencia en estos casos

Les comparto mi error:

<code> 
function enviarPosicion(x, y){
   fetch(`http://localhost:8080/mokepon/${jugadorId}/posicion`, {
        method : "post",
        headers : {
            "Content-Type": "application/json"
        },
        body : JSON.stringify({
            x,
            y
        })
    }) 

En ves de “application/json” tenia ““applicacion/json””

Entonces animo ✌🙌

me tocó mucho usar el mantra “No apagues el cerebro” en estas últimas clases de Backend

Para que sea más fácil ubicarse en las diferentes funciones, en la barra debajo de las pestañas de Visual Studio Code muestra la ruta de ubicación en el archivo (lo marco en azul) ✌:
__

nombre.filter --> filtra elementos
res.send() --> devuelve elementos

Lo logre después de varias horas, sinceramente no me explico porque le funciona a la profe si no tiene el if de != undefined){.

Y aunque se soluciono no es claro el porque a ella le funciona sin el undefined. Me siento molesto jaja

Increible cinco hors y no poder aun SOLUCIONAR este detalle que pesimo video HACE QUE SE SIENTA LA PERSONA COMO YO FRUSTRADA gimon.js:435 Uncaught (in promise) TypeError: digimonEnemigo.pintarMokepon is not a function
at digimon.js:435:48
at Array.forEach (<anonymous>)
at digimon.js:419:30
(

Si tienen el error en la consola del navegador
Uncaught ReferenceError: hipodogeEnemigo is not defined.

Deben eliminar o comentar estas lineas en
function pintarCanvas()

hipodogeEnemigo.pintarMokepon()
capipepoEnemigo.pintarMokepon()
ratigueyaEnemigo.pintarMokepon()
if (mascotaJugadorObjeto.velocidadX !== 0 || mascotaJugadorObjeto.velocidadY !== 0){
revisarColision(hipodogeEnemigo)
revisarColision(capipepoEnemigo)
revisarColision(ratigueyaEnemigo)
}

No hay forma de no frustrarse, si tienes un problema con el codigo solo tienes dos opciones, o buscar en los comentarios si ya le paso a alguien y obtuvo respuesta o ver el video mil veces hasta que por fin das con el error (muchas veces ni siquieras logras identificar cual es o por que sucede). No importa cuantas preguntas se hagan en la plataforma, nadie responde.

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

He decidido Re subír 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!

Esta clase se me hizo muy larga ja, ja, ja pero bastante interesante. Backend es el némesis que no creí tener jamás.

Para aquellos que los mokepones se vean en diferentes posiciones en cada pestaña el error puede ser más sencillo de lo que parece.

En mi caso en la función enviarPosicion en la variable “y” había escrito “mascotaJugador.y” cuando el argumento correcto era “mascotaJugadorObjeto.y”

Hay que tener cuidado al redactar y seguir el ritmo de los profesores, pues por tartar de hacerlo a la misma velocidad que ellos podemos llegar a cometer errores que nos perjudican en el largo plazo.

Como recomendación: Sí tienen un BUG, lo recomendable es que miren en qué parte es el bus, en mi caso el Canvas, por lo cuál revisar toda esa sección detenidamente puede reducir el tiempo que pasamos buscando errores, ya que muchas veces miramos en partes dle código que no llegan a tener incidencia, solo porque la desesperación y el estrés de no hallar el error nos nubla la mente, cálmate, respira y busca cuidadosamente ese pequeño error 😃

function pintarCanvas() {
    mascotaJugadorObjeto.x = mascotaJugadorObjeto.x + mascotaJugadorObjeto.velocidadX
    mascotaJugadorObjeto.y = mascotaJugadorObjeto.y + mascotaJugadorObjeto.velocidadY

    lienzo.clearRect(0, 0, mapa.width, mapa.height)
    lienzo.drawImage(
        mapaBackground,
        0,
        0,
        mapa.width,
        mapa.height
    )
    mascotaJugadorObjeto.pintarMokepon()

    enviarPosicion(mascotaJugadorObjeto.x, mascotaJugadorObjeto.y)

    mokeponesEnemigos.forEach(function (mokepon) {
        if (mokepon != undefined) {
        mokepon.pintarMokepon()
        revisarColision(mokepon)
        }
    })
}```

(internal server error)

estoy teniendo muchos problemas en conectar mi frontend y mi backend… en todas las lineas de código donde tengo la palabra reservada “fetch” me muestra error

Hola en esta linea el “null” va en minuscula yo lo tenia en mayuscula y me generaba un error

enemigos.forEach(function (enemigo) {
let mokeponEnemigo = null
const mokeponNombre = enemigo.mokepon.nombre || ""
if (mokeponNombre === “Hipodoge”) {
mokeponEnemigo = new Mokepon('Hipodoge

quiero comentarles que estuve todo un día tratando de solucionar el problema
mi problema era que al conectar dos jugadores, este no era visible por el otro,
después de 4 horas, y leyendo el código una y otra y otra vez

mi error eran que había puesto
dos puntos donde no eran
:

.-. era una extraña sensación de felicidad porque funciona y enojo porque no me di cuenta de los dos puntos

acá mi error.

fetch(`http://localhost:8080/mokepon/:${jugadorId}/posicion`

y era de esta manera

fetch(`http://localhost:8080/mokepon/${jugadorId}/posicion`

otro error que tuve es que al corregir mi codigo ya no podia seleccionar los personajes sabia que el problema estaba la funciona seleccionar personajes

resulta que en la explicacion la etiqueta la etiqueta input se cerraba

mokepones.forEach((mokepon) => {

        opcionDeMokepones = `
        <input type="radio" name="mascota" id=${mokepon.nombre} />
        <label class="tarjeta-de-mokepon" for=${mokepon.nombre}>
            <p>${mokepon.nombre}</p>
            <img src=${mokepon.foto} alt=${mokepon.nombre}>
        </label> 
	`

  no me funciono de esa manera, solo no tenia que cerrar la etiqueta input

        opcionDeMokepones = `
        <input type="radio" name="mascota" id=${mokepon.nombre} >
        <label class="tarjeta-de-mokepon" for=${mokepon.nombre}>
            <p>${mokepon.nombre}</p>
            <img src=${mokepon.foto} alt=${mokepon.nombre}>
        </label> 
	`
        `

en conclusion pase todo un dia en arreglar los errores y solo era quitar : y /

genial!

He llegado hasta este punto, con un mundo de confusiones terribles , deberían tener claro que muchas personas que estamos tomado el curso somos muy nuevas en este tema , pero deseamos aprender y tener el conocimiento, pero hay momento que no explican solo dicen como se hace y esto es algo muy diferente, hay expresiones que son nulas al menos para mi y generan muchas más confusión que antes de ver el primer video, es muy bueno he aprendido y tambien despejado algunas dudas pero me queda un vacío muy grande , sin embargo continuaré porque realmente me gusta y deseo aprender .

Se que es facil decir esto cuando ya lograste arreglar tu codigo pero definitivamente “la clave del exito es la perseverancia” 😮‍💨😮‍💨 hasta hace 5 minutos yo ya me habia rendido, error tras error en mi codigo, la frustracion y la idea de dejar todo ya me habia consumido pero esa frase me rescato

estos 23 minutos se convirtieron en dos horas y media pero ya todo esta funcionando…por el momento

Ey en un mapa se ven los dos pero en la otra pestaña solo se ve 1, en fin, tocará resolverlo xd

Uff, las últimas clases estuvieron muy intensas, presentaba “error 404, not found” para el envío de posiciones (function sentPosition(x,y)).

Adémas incluí un “for” que busca en el nombre del array de mokepones y el nombre del mokepon rival, luego le asigna el objeto al mokepon rival, para no tener que poner un “if” por cada mokepon del juego.

Aquí el código:

function sentPosicion(x, y) {
    fetch(`https://localhost:8080/mokepon/${playerId}/position`, {
        method: "post",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            x,
            y
        })
    })
    .then(function (res) {
        if (res.ok) {
            res.json()
            .then(function ({rivals}){
                mokeponesRivals = rivals.map(function (rival){
                    let mokeponRival
                    const mokeponName = rival.mokepon.name || ""
			
// El ciclo "for" que mencioné en vez de los "if"
                    for (let i = 0; i < mokepones.length; i++) {
                        if (mokepones[i].name == mokeponName) {
                            mokeponRival = mokepones[i]
                        }
                    }
                    
                    mokeponRival.x = rival.x
                    mokeponRival.y = rival.y
                    
                    return mokeponRival
                    })
                })
        }
    })
}

Espero les sea útil !

Les sugiero que revisen el codigo que la profe subio a github (está en los recursos) y que esté IDENTICOO, yo por innovar un poco cambie una variable y eso era lo que me estaba fallando

Creo que algo anda fallando con mi código, seguiré revisando porque esta clase si estuvo bastante cargada. Por cada cosa que entiendo me salen 10 dudas mas pero ya casi llegamos al capítulo final de este PlatziDrama.

En express.js no podemos devolver listas directamente, para devolver esas listas usamos json

era tan bueno mi avance que no parecia verdad hasta que ya me vino mi error💎

Estuve mucho tiempo encontrando mi error pero no lo logro. Alguien me puede decir que esta pasando?
![](

Que profe tan tesa, se ve que es brillante

res.ok✅

Esta parte del curso esta genial!!