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

Visual Studio Code

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

Express.js y fetch: API REST con JavaScript

76/84
Recursos

Aportes 12

Preguntas 13

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Por si les causan dudas los .then

  1. fetch(url) hace un GET (una petici贸n para obtener algo) a la URL que se le especifique
  2. Esta funci贸n nos retornar谩 algo (lo que sea que se haya definido en el c贸digo del servidor).
  3. No podemos trabajar con lo que nos retorne directamente, ya que el servidor se tomar谩 un tiempo en responder.
  4. Para eso utilizaremos el .then(func), que ejecutar谩 el c贸digo de la funci贸n que le demos (en este caso, func), pas谩ndole la respuesta del servidor como par谩metro.
  5. El .then suele ir por debajo de la funci贸n que hayamos llamado (fetch en este caso) e indentado, por pura est茅tica nada m谩s. N贸tese que se puede hacer fetch(url).then(func) sin dejar ning煤n espacio.

As铆, un ejemplo de c贸digo podr铆a ser:

function decirHola(res) {
	if (res.ok) {
		console.log("隆Todo bien!");
	}
}

fetch("https://google.com")
	.then(decirHola)

Este c贸digo enviar铆a un request a https://google.com y, una vez tuviera una respuesta del servidor, har铆a decirHola(respuesta), siendo respuesta la respuesta que haya dado el servidor de esa URL.

Lo que pasa es que muchas veces la funci贸n que usamos (en este caso decirHola) no se define aparte, sino que se crea al instante. Este concepto es conocido como funci贸n an贸nima y se ve as铆:

fetch("https://google.com")
	.then(function(res) { // abrimos la funci贸n an贸nima
		// aqu铆 el c贸digo de la funci贸n
		if (res.ok) {
			console.log("隆Todo bien!");
		}
	}) // el corchete cierra la funci贸n, el par茅ntesis cierra al .then

Este concepto es oro en polvo, son las promesas de JavaScript, as铆 que les invito a investigar sobre ello.

Wooooooooooooooowww!!! Me toy enamorando :3

Si no os sale el console.log() en la pagina del html aseguraos que cuando llam谩is la funci贸n unirseAlJuego() teng谩is puestos los par茅ntesis ()

Que tengan un buen d铆a 馃巿

No sab铆a que el res.text y res.json tambi茅n eran promesas, lol

Me paso que habia cerrado todo al terminar la clase pasada, al abrirlo de nuevo quice seguir con el contro + c del sgundo 50 y continuar a la par, no lo logre por que debia ubicarme de nuevo en la carpeta donde tengo mis archivos, tal cual como el inicio del video pasado, dejo el aportesito por si a alguien mas le pasa, casi no doy con el chiste

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

Re sub铆 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.

Funcionando鉁

media hora viendo que significa 鈥榝unction random() { [native code] }鈥 para darme centa que no le coloque los parentesis a Math.random 馃槀

Esto esta muy divertido 馃槄

Para detener el Servidor Crtl + C鈥

Para posibles futuros errores:
Acordaros de tener el servidor funcionando. Si no lo est谩, os dar谩 error y no os dar谩 el n煤mero de jugador. (30鈥 intentando ver porque no me sal铆a)