Optimización de Coordenadas en Videojuegos con JavaScript

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:

• No importa si usas Live Server en VSCODE siempre pero SIEMPRE actualiza de forma manual la pestaña para que te tome en cuenta los datos

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