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 鈥渕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)
            }
        })

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 鈥榥ombre鈥)

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 鈥渪鈥 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 鈥榥ombre鈥)
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 鈥榥ombre鈥)

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鈥e 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鈥 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 鈥減unkkemonesEnemigos鈥

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