Elimina el parpadeo con map en JavaScript

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:17

Elimina el parpadeo con map en JavaScript

Curso Gratis de Programación Básica 2022

Clase 80 de 84

Clase 80 / 84

Comentarios (103)103 comentarios

Xiomara Alejandra Hernández Arzola

Hace 4 años

WWWWOOOOOOOOOOOOOO!!!! Amo amo estas utimas clases, me ando enamorando del backend, pero le tengo miedillo aun..

A SEGUIR APRENDIENDOOOOOO

Marcos Monteverde

Hace 4 años

Esa es la actitud!!

Irving Gz

Hace 4 años

me pasa lo mismo, me da miedo pero me gusta todo esto jaja

sergio perez

Hace 4 años

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.

Diego Alejandro Moreno Pedroza

Hace 4 años

No es fácil, pero hace parte de aprender

Luciano Estrella

Hace 4 años

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

Marcos Monteverde

Hace 4 años

que genial!!

Brayan Alexis Fajardo Ortiz

Hace 4 años

Nunca dejes de aprender!!

Carlos Leonardo Montoya

Hace 4 años

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!

Diego Alejandro Pinzon Hurtado

Hace 4 años

Hola, tengo el mismo problema pero haciendo lo que comentas no funciona, ¿sabes qué puede ser?. Comparto mi código:

Johan Rodriguez

Hace 4 años

Muchisimas gracias, me funcionó. También me molestaba que saliera eso por consola aunque no afectara el juego.

Angel David Velasco Bonifaz

Hace 4 años

Excelente clase, ya se pueden mover perfectamente bien los pokemones.

Eluizer Amadeus De León de Leon

Hace 4 años

jjajajajaja ya lo regaño el profe

Angel David Velasco Bonifaz

Hace 4 años

jaja SORRY, pokepones

Santiago Vázquez Rodríguez

Hace 4 años

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

Eduardo Peña Ramos

Hace 4 años

Son buenas sugerencias. Saludos.

Marcos Monteverde

Hace 4 años

te quedo genial!!

Damary Urbano

Hace 4 años

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

Krishna Das

Hace 3 años

Pero como lo eliminas, si lo elimino se rompe el codigo si cambio el método, sigue iguala

Jhon Freddy Paz Guzman

Hace 3 años

gracias, justamente eso era lo que me estaba sucediendo, se me hace mal que los profesores no expliquen esas partes del código, siento que desde hace 2 o 3 clases están haciendo cosas que no muestran o algo así porque hago todo al pie de la letra y da errores

Mariano Gobea Alcoba

Hace 4 años

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

Deybin jose Zepeda Varela

Hace 3 años

Gracias

Henry Agustín

Hace 4 años

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

Santiago Vázquez Rodríguez

Hace 4 años

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.

Chema F

Hace 4 años

A mi también me salía ese error y creo que es por causas de "else if" último, donde debería haber un "else" solamente. if (mokeponNombre === 'MACA') { mokeponEnemigo = new Mokepon("MACA", "./assets/mokepons_mokepon_MACA_attack.png", 5, './assets/MACA.png') } else if (mokeponNombre === 'PATATA') { mokeponEnemigo = new Mokepon("PATATA", "./assets/mokepons_mokepon_PATATA_attack.png", 5, './assets/PATATA.png') } else { mokeponEnemigo = new Mokepon("PEX", "./assets/mokepons_mokepon_PEX_attack.png", 5, './assets/PEX.png') } mokeponEnemigo.x = enemigo.x mokeponEnemigo.y = enemigo.y

                return mokeponEnemigo

Alexander Maverick

Hace 4 años

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.

Agustín Martínez

Hace 4 años

no debe haber peor cosa que arranque la clase y ver que introducieron códigos que JAMÁS se mostraron

Juan Castro

Profesor

Hace 4 años

¿Por qué lo dices? JAMÁS haríamos eso, mucho menos en este curso.

Agustín Martínez

Hace 4 años

Nooo no se me enoje Juan :( (usted es un gran profe) pero me pareció ver códigos que jamás se enseñaron o se implementaron, como en la función enviarPosicion, nunca ví esa implementación del forEach en cada enemigo, aún así, debe ser el único error que percaté, un gran curso para quiénes somos novatos y queremos aprender

Niko Dos Santos Mendoza Soto

Hace 4 años

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

Andres Felipe Romero Rondon

Hace 4 años

te go el mismo problema.. apenas pongo el 2do jugador entra a combate de una... y revise mil veces no encuentro el error

Jose David Calonge Cuervo

Hace 4 años

Muchas gracias funciono perfecto, yo estaba teniendo ese mismo error y no habia pensado en las posiciones iniciales.

Julián Guacaneme

Hace 4 años

Hola, no logro hacer que se vean los dos mokepones, es decir al abrir las dos ventanas en el navegador en cada una se ve un mokepon, pero no aparecen juntos, he revisado el js, y el index y no doy con el error

Johan Rodriguez

Hace 4 años

¿Puedes compartir tu código por favor? a ver si puedo ayudarte

Christian Nahuel Galeano

Hace 4 años

me pasa lo mismo

Joshua Herrera

Hace 4 años

De verderdad que aun no comprendo cual es la funciones de la url en el get y el post de la constante app que almacena a express. La url en mi barra superior no cambia.

Juan Castro

Profesor

Hace 4 años

Recuerda que por una parte tenemos al frontend y por otra parte tenemos al backend. Con fetch estamos haciendo solicitudes GET o POST a nuestro backend, NO navegando a esas URLs. Esta solicitud JS la hace sin cambiar la barra de búsqueda y sin que los usuarios se den cuenta. Lo hace "detrás de cámaras" para traer o enviar la información que necesitemos al backend.

Esta clase creo que te puede ayudar: https://platzi.com/clases/2985-api/48426-flujo-de-comunicacion-entre-usuarios-frontend-y-ba/

Kevin Daniel Hincapie Lumbaque

Hace 4 años

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

Alejandro Ramírez

Hace 4 años

Super, me encanto esta clase.

Platzi Team

Hace 3 años

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.

VICTOR MANUEL VILLA RADA

Hace 2 años

Muchas gracias :) estuve a punto de dejar el curso tirado

Juan Camilo Rivera Bayona

Hace 2 años

crack!

Alejandro Nieto

Hace 3 años

Yo buscando colisionar los Mokepones🤣

Eduardo Cruz

Hace 4 años

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.

Carlo Julio Castillo Vivas

Hace 10 meses

En un proyecto de muchos programadores, cada programador levanta su modulo o sub-modulo, que varios programadores trabaje un mismo archivo al mismo tiempo pienso que no es correcto hacerlo.

Kenneth Angulo L

Hace 3 meses

En la practica para solucionar esto se usa una herramienta de control de versiones. Esta permite solucionar colisiones si se llegan a presentar.

Recursos

Cuando construyes un videojuego multijugador con frontend y backend, el retardo en la comunicación genera un parpadeo visible en los jugadores enemigos. Para evitarlo, puedes optimizar el renderizado en JavaScript usando una variable auxiliar y la función map, manteniendo el dibujo fluido aunque los datos del servidor lleguen con delay.

¿Por qué aparece el parpadeo en un videojuego multijugador?

El parpadeo ocurre porque cada vez que el cliente solicita las coordenadas actualizadas de los enemigos al servidor, existe un pequeño retardo en esa respuesta. Durante ese intervalo, si dibujas directamente lo que llega del backend, el personaje se oculta y se muestra repetidamente, generando un efecto visual molesto.

¿Qué causa el parpadeo de un sprite en un juego online? El delay entre frontend y backend. Si dibujas solo cuando llegan datos nuevos, hay frames vacíos entre respuestas. La solución es dibujar siempre desde una variable local que se actualice cuando llegue nueva información.

La idea central es separar el flujo de datos del flujo de renderizado. Tu frontend debe pintar continuamente desde una fuente local, y solo refrescar esa fuente cuando el backend entregue datos frescos.

¿Cómo se usa una variable auxiliar para suavizar el render?

La estrategia consiste en declarar una lista global llamada moqueponesEnemigos, inicialmente vacía, que vivirá en el frontend y servirá como fuente única para dibujar [02:00].

Esta variable se coloca arriba del archivo, junto a las otras declaraciones globales como la lista moquepones. Así queda accesible desde cualquier parte del código del cliente.

javascript let moqueponesEnemigos = [];

Con esa lista en su lugar, el dibujo de enemigos ya no depende del momento exacto en que responde el servidor. Tú decides cuándo pintar y desde dónde leer.

¿Cuál es la diferencia entre forEach y map en este caso?

Antes, el código usaba un forEach sobre la respuesta del servidor para pintar a cada enemigo en cada ciclo. forEach itera y ejecuta una función por elemento, pero no devuelve nada [02:30].

La función map, en cambio, recorre la lista y retorna una nueva lista con el mismo número de elementos transformados. Eso es justo lo que necesitas: convertir la respuesta cruda del backend en objetos listos para dibujar y guardarlos en tu variable auxiliar.

¿Qué hace map en JavaScript? Recorre un array y retorna uno nuevo con cada elemento transformado por la función que le pases. A diferencia de forEach, map sí devuelve un valor por cada iteración.

El reemplazo se ve así en la lógica:

Antes con forEach: por cada enemigo recibido, llamar inmediatamente a pintarMoquepon.
Ahora con map: por cada enemigo recibido, retornar el objeto y guardarlo en moqueponesEnemigos.
Resultado: la lista local queda actualizada sin pintar nada todavía.

javascript moqueponesEnemigos = enemigos.map(enemigo => { // construir el moquepón enemigo return moqueponEnemigo; });

Fíjate en el cambio clave: dentro del map ya no se llama a pintarMoquepon. Esa línea se reemplaza por un return que devuelve el moquepón generado.

¿Dónde se ejecuta ahora el dibujo de los enemigos?

El pintado se mueve fuera de la petición de enviar posición y queda en el flujo continuo de renderizado, justo debajo de enviarPosicion [03:30].

Ahí sí usas un forEach sobre moqueponesEnemigos, porque en este punto solo necesitas ejecutar el método de dibujo, no transformar datos.

javascript moqueponesEnemigos.forEach(moquepon => { moquepon.pintarMoquepon(); });

Con esta separación, el navegador dibuja a los enemigos en cada frame desde la lista local. Cuando llega una respuesta nueva del backend, map refresca esa lista, pero el render nunca se queda sin datos que mostrar.

¿Cómo se comprueba que el bug desapareció?

Después de guardar los cambios, reinicias el servidor y abres dos ventanas del navegador. En una eliges a Ratiguella y en la otra a Hipodosh.

Al mover un personaje hacia el pasto o las flores, la otra ventana refleja el movimiento sin parpadeos. El sprite ya no se oculta entre frames, y la experiencia se siente continua [04:30].

Esta optimización aprovecha tres ideas que conviene tener claras:

Separación de responsabilidades: el backend entrega datos, el frontend decide cuándo y cómo dibujarlos.
Estado local como buffer: la variable moqueponesEnemigos actúa como caché entre cada respuesta del servidor.
map para transformar, forEach para ejecutar: usa cada uno según retornes valor o solo ejecutes acción.

Con esto cierras la segunda parte del videojuego: el mapa multijugador con jugadores conectados, movimiento sincronizado y render fluido. La siguiente etapa es la mecánica de combate, donde dos jugadores chocan, intercambian ataques y se resuelve el ganador.

¿Aplicarías esta misma técnica de variable auxiliar en otros proyectos en tiempo real? Cuéntame en los comentarios qué bug visual resolverías con map.

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero