Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
6H
55M
51S

Mokepones din谩micos en el mapa

79/84
Recursos

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 鈥渂ug鈥 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 鈥淒ebug鈥 o 鈥淒ebuging鈥.

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.

鈥淧uedes 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.

Aportes 97

Preguntas 68

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淗ipodogeEnemigo鈥.
  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 鈥渄esata鈥. 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 鈥渓et 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鈥n 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鈥or 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 鈥渏son鈥 escribo 鈥渏Ason鈥 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 鈥渪=0鈥 y en 鈥測=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 鈥淐trl + 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 鈥渕okepones鈥 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 鈥渕okepon鈥 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 鈥淗ipodogeEnemigo鈥.
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鈥n 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 馃槗馃槗馃槀

A mi me daba el error que a casi todo el mundo, buscando la soloci贸n debo de haber le铆do casi todos los comentarios o todos hasta la fecha de este mi comentario, vi a mucha gente criticando el c贸digo de los profes, ya que asum铆an que ellos hab铆an hecho c贸digo que no explicaron, empec茅 a asumir esa idea tambi茅n y luego andando y reandando una vez m谩s entre mi c贸digo, encontr茅 el error del "application-json" en vez del "application/json", pero con la particularidad de que era en el puerto de mas arriba en el c贸digo, en el 煤ltimo, donde siempre verificaba, ah铆 estaba bien!. El error era m铆o, no de los profes!

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 鈥榵鈥)
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 鈥渁pplication/json鈥 tenia 鈥溾渁pplicacion/json鈥濃

Entonces animo 鉁岎煓

me toc贸 mucho usar el mantra 鈥淣o 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 鈥渕okepon.js:448 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 鈥榥ombre鈥)鈥 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 鈥測鈥 hab铆a escrito 鈥渕ascotaJugador.y鈥 cuando el argumento correcto era 鈥渕ascotaJugadorObjeto.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 鈥渇etch鈥 me muestra error

Hola en esta linea el 鈥渘ull鈥 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 === 鈥淗ipodoge鈥) {
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 鈥渓a 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鈥or 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 鈥渆rror 404, not found鈥 para el env铆o de posiciones (function sentPosition(x,y)).

Ad茅mas inclu铆 un 鈥渇or鈥 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 鈥渋f鈥 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!!