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

Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/año

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
16H
10M
49S

Optimizando el mapa del juego

80/84
Recursos

Una aplicación utiliza datos de diversas fuentes y tipos y a medida que esta crece, utilizará cada vez más. Conocer diversas herramientas para manipular la información te servirá para tomar decisiones sobre cuál utilizar dependiendo la necesidad.

Manipulación de arrays en Javascript

Ya sabes lo que es un array, un conjunto de datos que pueden o no ser del mismo tipo.

Los arrays permiten muchas operaciones como la obtención de su longitud con arr.length o recorrer cada elemento con arr.foreach(). Veamos una serie de otras funciones que te serán muy útiles de ahora en adelante.

Map: La función arr.map() permite, además de recorrer cada elemento de un array, devolver otro array modificado a partir del original.

const arr = [1, 2, 3, 4, 5];
const new_arr = arr.map(e => {
    // Sumamos 1 a los elementos pares
    if (e % 2 == 0)
        return e + 1;
    else
        return e;
});
console.log(new_arr);    // [1, 3, 3, 5, 5]

Filter: La función arr.filter() permite recorrer y filtrar elementos de un array para obtener un sub-array con menos cantidad de elementos a partir de una condición lógica.

const arr = [1, 2, 3, 4, 5];
const new_arr = arr.filter(e => {
    // Devolvemos solo los elementos pares
    if (e % 2 == 0)
        return true;
});
console.log(new_arr);    // [2, 4]

Map y Filter son solo las dos primeras funciones de Javascript para manipular arrays que tienes que conocer. Poco a poco irás conociendo otras. Hasta el momento, practica creando arrays de datos y comprendiendo cómo funcionan estas.

Estas funciones son propias de Javascript y puedes utilizarlas tanto en el backend como en el front-end. En el futuro, podrás descubir herramientas similares de manipulación de datos para otros lenguajes de programación.


Contribución creada por: Kevin Fiorentino (Platzi Contributor).

Aportes 48

Preguntas 35

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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.

😯 Dijo la palabra prohibida en el minuto 2:46

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

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

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!

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

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.

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

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

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.

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

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.

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.

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

Yo buscando colisionar los Mokepones🤣

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.

Escribo con miedo desde que en la clase pasada se me jodio el código because yes. Literal estaba todo igual. 🤑

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

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

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