Integración de Coordenadas de Jugadores en Mokepon Multijugador

Clase 79 de 84 • Curso Gratis de Programación Básica

Resumen

A medida que tu aplicación crezca y tengas más y más código, habrá errores, es inevitable tenerlos. Los errores en un software se denominan BUG y el proceso de identificarlos y solucionarlo lo conocemos como DEBUGGING.

Errores en una aplicación

Te habrás dado cuenta de que la palabra BUG significa Insecto o bicho en inglés. Este término se originó en el siglo XIX cuando se construían complicadas y enormes máquinas. A estas máquinas se les llegaban a meter bichos (BUGS) y estorbaban el movimiento de alguna de sus piezas haciendo que fallaran.

El término Bug comenzó a popularizarse en los años '40 cuando operadores de una gran máquina encontraron una polilla atascada en el interior de la misma.

Primer BUG de la historia de la computación
Pegaron el bicho a un reporte explicando los motivos de los fallos de la máquina y desde entonces decimos “bug” cuando nuestra aplicación tiene un error.

Proceso de solución de bugs

Hay diversos tipos de bugs dependiendo la gravedad del error que esté causando en un sistema. El proceso de identificar los mismos y solucionarlos es conocido como “Debug” o “Debuging”.

Las herramientas para desarrolladores de los navegadores serán tu mejor aliado y te darán mucha información para localizar un fallo y solucionarlo.

Conclusión

Bug y Debug, dos términos del cual oirás mucho al respecto a medida que te sumerjas en el mundo del desarrollo de software.

“Puedes demostrar la presencia de bugs en una aplicación, pero no puedes demostrar la ausencia de los mismos.” (Vuelve a leer esta frase). No es posible demostrar que un sistema funciona bien al 100%. Puede haber bugs en donde sea y por este motivo también existen profesionales expertos en encontrarlos denominados Testers.

Te toparás con bugs toda tu vida como programador. Aprender a debuguear de acuerdo al lenguaje o a la tecnología que estés utilizando te permitirá solucionar los mismos.

Contribución creada por Kevin Fiorentino (Platzi Contributor) con aportes de la comunidad de Platzi.

al mn

student•

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.

Beto Ln

student•

Interesante

Karol Granados

student•

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.

Andres Felipe Ramirez

student•

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

MARIA ISABEL MANZANELLI

student•

contanos que paso ?? ojo --- yo pense lo mismo del mio y era una pavada

Jorge A. Torres

student•

me paso igual jaj

Mariano Gobea Alcoba

student•

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

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.
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.

Diego Gallardo Sanchez

student•

Hola!!, mi código está así, me podrías ayudar a corregirlo?

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 (enemigo) {
                        let mokeponEnemigo = null
                        
                        const mokeponNombre = enemigo.mokepon.nombre || ""
                        
                        if (mokeponNombre === "Hipodoge") {
                            mokeponEnemigo = new Mokepon('Hipodoge', './assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png')
                        } else if (mokeponNombre === "Capipepo") {
                            mokeponEnemigo = new Mokepon('Capipepo', './assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png')
                        } else if (mokeponNombre === "Ratigueya") {
                            mokeponEnemigo = new Mokepon('Ratigueya', './assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png')
                        }
                        
                    
                        mokeponEnemigo.x = enemigo.x
                        mokeponEnemigo.y = enemigo.y
                    
                        mokeponEnemigo.pintarMokepon()
                    })
                    
                })
        }
    })
}

Estoy teniendo un error tras otro con respecto a las funciones que indicas, me podrías compartir un zipeado para ver como te quedó?

Mariano Gobea Alcoba

student•

Claro que si Diego. Debajo del enemigos.forEach agrega la linea de codigo de mi punto 3 levantado arriba y luego cierra la llave abierta debajo de la linea que dice: mokeponEnemigo.pintarMokepon() }) Y con eso debería dejar de arrojar error de "nombre"

Felipe Romo

student•

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

Oscar Requena Casqui

student•

si, creo que la profe va un poco rapido PERO! hay que avanzar pausando el video a cada momento, es normal demorarse media hora en acabar un video de 10 o 15 minutos vamos que ya estamos cerca!💪

Gustavo Arias

student•

Muchos conceptos no explicados, pero al final esto es un curso gratuito de progra basica, es basicamente una muestra del panorama de forma rapida sobre temas comunes, ya los demás cursos, son más detallados.

Santiago Camacho

student•

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.

Bryan Taborda

student•

Vieras que hice los ajustes tal como comentas y no me funciona, sigue solo saliendo un mokepon por pestaña

Daniela Valentina Amaya Rodriguez

student•

lo intente pero no me funciono, no se que mas hacer para solucionarlo :(

Erik Ucenik

student•

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.

Leonardo Véliz

student•

Además de eso también sirve para copiar arrays a nuevas variables y evitar que la variable se comporte como una referencia, por ejemplo si asignaras

let copiaAtaques = hipodoge.ataques

esto haría que cualquier modificación en la variable copiaAtaques también se verá reflejada en el array original (hipodoge.ataques), este dato me resulto tremendamente útil ya que estaba teniendo un problema de que estaba referenciando arrays y ocurrían modificaciones tanto en el array original como en la copia, cuando en realidad solo quería modificar la copia, esto es una de las cosas más importantes de Javascript que se debe saber sin embargo en todo este curso no se ha llegado a mencionar por si alguien llega a tener el problema la solución se encuentra en el minuto 7:49 del video, la forma correcta para copiar (asignar) un array como valor a una nueva variable en lugar de referenciarlo es:

let copiaAtaques = ...hipodoge.ataques

Rhenzo Alejandro Gómez Caballeros

student•

Que buen dato =}

Daniel Zuluaga

student•

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 🤦‍♂️

Sonia Silva Contreras

student•

Lo se jeje yo soy nueva en esto y tambien he aprendido de forma dura y pagado con tiempo que cada mayuscula, minuscula, cada coma y punto y coma cuenta, te entiendo total

Eduardo Peña Ramos

student•

Tuve ese mismo error por aceptar JSON del autocompletado de VSCode jeje :D

DANIELA PARDIÑAZ

student•

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!

Braily Mariana Salcedo Ortegano

student•

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

Diego Jurado

student•

Sera que ahora ChatGpt te ayuda a encontrarlo en menos tiempo?

Sonia Silva Contreras

student•

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

Oscar David Rodríguez manjarres

student•

gracias

Raimond José Vargas Hernández

student•

Podrías dar click derecho en la carpeta y seleccionar "abrir con vs code" o también podrías abrir la carpeta con vs code

Kevin Daniel Hincapie Lumbaque

student•

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 :D

.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

Marcos Monteverde

student•

gracias por compartir esto

Billy Torres

student•

Me podria ayudar con esto por favor, me aparece este error, y no se de que manera puedo resolverlo, investigue como resolver este tipo de problemas pero no entiendo del todo como puedo resolverlo

Miguel Ángel Corredor Ferrer

student•

me sale el mismo error

Billy Torres

student•

lograste resolverlo miguel?

Diego Eduardo Téllez Contreras

student•

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......

Alejandro S. Estrella

student•

gracias man este era mi error jaja

Leonardo Véliz

student•

Eso es por como funciona el ámbito de las variables, tu puedes tener y declarar la misma variable con el mismo nombre en bloques de código anidados, y no te va a saltar el error de que la variable ya está repetida porque dentro de cada anidación el código lee la variable como si fuera nueva puesto que se convierte en una variable privada, la mejor manera de evitar estos errores es que declares tus variables al principio y solo asigna o cambia los valores sin volver a redeclarar, si fuese variables globales let y const no te dejarían tener 2 variables repetidas con el mismo nombre dentro del mismo ámbito pero var sí y deben tener cuidado con eso

Angélica Palencia

student•

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

Rubén Parada

student•

seguramente sea un espacio una o palabra mal puesta XD

Angélica Palencia

student•

Estoy segura que debe ser así jejeje xD

Chema F

student•

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

Camilo Moreno

student•

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

Luilly Suarez Carbajal

student•

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

Marcos Monteverde

student•

Wow que raro

Maria Soledad Lanfranconi

student•

me paso lo mismo :/

LUIS RAMOS

student•

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

Diego Gallardo Sanchez

student•

Lo mismo me pasó y no encuentro el error DX

Damary Urbano

student•

me paso lo mismo después de 3 días intentando vi que en la terminal debía estar con node

Juan Zambrano

student•

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.

joseph gaitan

student•

hola amigo, podrías por favor decirme que estuvo mal?

Sonia Silva Contreras

student•

Es normal que mi pc se ponga muy lento cuando empiezo a enviar cordenadas?

Juan Castro

teacher•

Un poco, Sonia. Esto es un poco más exigente para el navegador que lo demás que hemos estado desarrollando. :(

Diego Alejandro Moreno Pedroza

student•

A mi incluso se me bloqueo el computador un rato jaja

Integración de Coordenadas de Jugadores en Mokepon Multijugador

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

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

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

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

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

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