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

Batalla entre jugadores

81/84
Recursos

Te encuentras muy cerca de finalizar tu primer backend y tu primera aplicaci贸n completa. 隆Solo un esfuerzo m谩s!

El 煤ltimo esfuerzo

Si tu proyecto a煤n no funciona como debe, te recomiendo realizar una comparaci贸n con el c贸digo de los profesores que lo crearon originalmente. Tambi茅n puedes compartir y buscar ayuda en la secci贸n de comentarios.

Notar谩s que el c贸digo fuente se encuentra alojado en una plataforma llamada GitHub que utiliza un software llamado Git. Git ser谩 uno de tus pr贸ximos pasos en el mundo de la programaci贸n y GitHub es una 鈥渞ed social para programadores鈥. La misma te permite llevar un control de versiones del c贸digo fuente y es la herramienta perfecta para guardar tu c贸digo.

Te tocar谩 aprender Git en el futuro. De momento, concentra tu energ铆a en finalizar tu primera aplicaci贸n. Solo falta desarrollar unos endpoints m谩s para completar el videojuego.


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

Aportes 49

Preguntas 29

Ordenar por:

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

o inicia sesi贸n.

Ya casi amigos!!

Hahaha yo cada que me tengo que devolver a lo que escrib铆 hace una semana XD

ya tengo un peque帽o trauma mirando esta imagen

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

Decid铆 subir 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!

Haciendo todo este proceso de juego 鈥渙nline鈥 me doy cuenta de lo absurdamente detallado que debe ser la l贸gica de un juego, cada peque帽a validaci贸n importa en el proceso, si alguna validaci贸n est谩 mal hecha se rompe la l贸gica.
He Sufrido como no tienen idea en esta parte del juego por habermelas dado de 鈥渃reativo鈥 y haber puesto rondas y contadores de choques y otras cosas XD鈥 no se si lo lograre con lo poco que s茅 pero seguro llegar茅 hasta donde me llegue el conocimiento.

Yo creo que a este punto pr谩cticamente nadie entiende, solo copian porque sixdd.
Los primeros profesores lo hac铆an bien, y explicando, el resto ya solo comenz贸 a escribir como si nada

Ac谩 queda rot铆simo鈥
隆Hasta la pr贸xima amigos!

Un curso espectacular 馃敟

Bueno鈥 creo que me devuelvo a fundamentos de la programaci贸n, o quiz谩 me haga unas clasesitas de diagramas de flujo jajaja

Para mi desde la clase 79 no funci贸n el c贸digo hice todas las correcciones , copie el Cod. desde el Github y nada, y por lo que leo en los comentarios varias personas presentan el mismo error, y al estar empezando es dif铆cil poder detectar fallos en el c贸d鈥 f谩cilmente.
lo dejare pendiente y cuando este mas capacitado y vea donde est谩n los fallos regresare y compartir茅 la soluci贸n.
Por ac谩 menci贸no algunas de las correcciones que hice y que igual no funcionaron:

  1. Comillas (``) en algunas casos no funciona as铆 que ocupe estas (" ") acompa帽ado de + , en la parte del cod. : fetch(鈥渉ttp:/ /localhost:8080/mokepon/鈥 + 鈥渰jugadorId}/鈥 + 鈥減osici贸n鈥, intente de todas formas el jugadorid y nada.
  2. Los else: en esa misma funci贸n se menciona if, else if, y nuevamente else if, siendo lo habitual seg煤n le铆 en varios comentarios que la ultima debe de ser else, bueno igual realice esa modificaci贸n y nada .
  3. ahora tengo un error de que indica: Cannot read properties of undefined (reading 鈥榥ombre鈥)

Bueno finalizare el programa pero una pena que al final luego de casi 80 clases este roto en las ultimas.

TIP: Para que no tengan que cortar y pegar pueden mover lineas de c贸digo arriba y abajo usando ALT y la teclas de arriba o abajo.

Hola, Alguien mas le sale este error, la cariable nombre esta con el mismo nombre que la variable de los nombres de los ataques, pense que erra erros mio pero mire con el codigo de la clase y sale el mismo.

No se c贸mo sigue funcionado mi c贸digo pero ah铆 vamos馃槀

Viendo los comentarios y como va mi proyecto, dudo en si fue buena decisi贸n pagar platzi鈥 realmente los profesores no ayudan, nadie ha contestado el problema que la mayor铆a tiene y por lo visto el c贸digo de la profesora est谩 roto por ende el nuestro tambi茅n鈥
Tambi茅n me doy cuenta que normalmente contestan los mensajes de hace meses, eso me hace pensar m谩s en que fue mala decisi贸n, ya que si son mensajes recientes no te contestan ni ponen atenci贸n

Nunca me hab铆a sentido tan frustrado y perdido !

Yo despues de Terminar el curso de Programacion B谩sica, 1 mes despues鈥 NUEVO CURSO Gratis de Programacion basica鈥 ok otro reto, ventra el otro nuevo curso grati鈥?

Quiero hacer esto en unity, est谩 muy genial!

Les recomiendo buscar comparador de textos en internet y comparar el c贸digo que hicieron con el que se descarga de la clase, es increible que un simple espacio en blanco puede alterar todo, hay muchos, yo estoy usando este

https://text-compare.com/es/

y no funciona con todos los mokepones, cuando chocan, quisas algun dia encuentre la solucion

Con mucho esfuerzo, lo voy logrando!!

Mi texto sobrevivi贸 a todo a duras penas, pero sigue funcionando! 馃槃

resistan spartanos ya falta poco.

Pdt: para finalizar la intro.

A mi hasta ahora me funciona perfecto pero hasta que ingreso una simple linea de codigo

revisarColision(mokepon) 

Las colisiones funcionan antes, no se porque con solo escribir esa linea, ya nisiquiera me aparecen todos los mokepones en pantalla al tiempo.

Segun como lo veo yo, este curso es simplemente para ver los diferentes aspectos del desarrollo web y en 15 horas no te van a explicar todo. Yo terminando este curso voy a tomar el de HTML y CSS y luego el de Javascritpt que son mas profundo. Este es un camino muy largo y por no entender al principio no significa que no es lo tuyo, todo se aprende con tiempo, esfuerzo y disciplina.

wow esto si se me puso dificil

Creo que en el examen de este modulo si me voy a pegar la rajada del siglo jejjejeje. Pero no entender aun no me destruye la moral.

CUANDO ESTAS APUNTO DE TERMINAR 鈥 !

Yo tengo el c贸digo un poquito diferente, porque yo evaluaba ataque por ataque y no esperaba a que se realicen los 5, pero a ver si resulta skldjaskdljsakldja

1+

ya casi siiiiiiiiiiiiiuuuuuuuuuuuuuuuuuu

Me he dado cuenta que la muchos errores que me pasaban era por iniciar mal el servidor y la actualizaci贸n de la p谩gina.
Como consejo, les recomiendo tener mucho cuidado al iniciar y cerrar el servidor. 馃槃

Seria bueno que para un futuro agregaran la posibilidad de poder cambiarle la calidad a los videos. Como no tengo un internet muy bueno, me ha costado, un poco mas de lo normal terminar el curso.

Yo me pregunto , 驴Qu茅 est谩 pasando? , jaja me lo pregunto cada 1 minuto aproximadamente.

Es un poco triste como es que est谩 terminando este curso, la verdad que tengo mucha m谩s frustraci贸n e entendimiento que sensaci贸n de 茅xito , definitivamente para aprender no creo que sea tan buena esa sensaci贸n . Una mezcla extra帽a entre aprender pero tambi茅n con mucho entendimiento.

En fin, vamos que ya queda poquito! los que llegamos hasta aqu铆, deber铆amos estar orgullosos porque esto ha sido todo un desaf铆o , en mi caso yo part铆 el 18 de abril 鈥 para ser mi primer curso en programaci贸n a la final me voy contento , un poco frustrado pero a la final orgulloso y contento

Buenas. Tengo un problema similar al resto que publica. Igualmente, es curioso lo que me paso, lo comento:

  1. Antes de iniciar con el backend, complet茅 los trabajos que hab铆a indicado el anterior profesor: met铆 a los otros tres mokepones (Tucapalma -me declaro fan de Tucapalma -, Langoselvis y Pydos), seg煤n la clase (agua, fuego y tierra) y a quien se enfrentaba se le suma un ataque o no, y cada enemigo ataca en funci贸n de su clase. Esto me llev贸 a modificar el c贸digo.
  2. Esa modificaci贸n del c贸digo me complic贸 el seguir cada paso de indicado por la profesora Diana, y tuve que ir adaptando lo explicado en clases con mi c贸digo. Me esta costando el mismo tiempo pr谩cticamente lo que se ense帽a de backend con todo lo anterior. Obviamente, de igual manera voy a seguir adelante.
  3. Finalmente, logr茅 adaptarlo. De igual manera, funcion贸 bastante bien las primeras veces. Ahora, no se que toqu茅 (o dej茅 de tocar) y resulta que al hacer colisi贸n entre personajes queda como 鈥渃olgado鈥 el juego. Al verificar en consola es como que repite en loop, cargando constantemente datos de mokepones. Lo que me llama la atenci贸n es que funcionaba bien las primeras veces, despues es que dejo de hacerlo. Resetee infinidad de veces el servidor, y puede funcionar bien un par de veces pero despues pasa lo mismo que indique anteriormente.
  4. Previo a esto, tambien me paso que es como que se satura de informaci贸n el servidor. Cuando hay mas de 4 ventanas abiertas del juego, es como que colapsa. Es problema mio o a alguien mas le pasa?
    Saludos! Muy buen curso!

A solo 3 clases y mi codigo esta roto ! Increible jejeje !

Esto puede ayudarlos! si por ah铆 les sale un error con un Undefined

const enemigos = jugadores.filter((jugador) => 
    jugador.id !== jugadorId && jugador.mokepon !== undefined)
    

Casi que no doy con el chiste para que funcionar谩 la colisi贸n, pero es porque si al refrescar el enlace, no se escoje mokepon, igual se crea un nuevo enemigo que no tiene mokepon, por lo que este mokepon indefinido entra a la lista de mokepones enemigos y se paletea todo, para corregirlo agregu茅 un condicional en la funci贸n del servidor, en la cual solo agrego el jugador a la lista de enemigos en caso de que ya haya elegido un mokepon

Estuve hasta ac谩 pensando como hacian los profes para no perder la secuencia del c贸digo, los nombres de las variables, funciones y m茅todos. Observ茅 entonces c贸mo de manera muy sutil miraba al lado izquierdo cada vez que iba a escribir alguno de ellos. Definitivamente se requiere un mapa o diagrama previo para programar. Les agradezco si me recomiendan la mejor forma de aprenderlo

Lo que me pasa es que se me duplican los botones de ataques pero no me aparece error, me tocara mirar como podr茅 encontrar una soluci贸n 馃槂

Tengo una duda, porque se quita la condicional del si el personaje se mueve para verificar las colisiones?

Funcionando ya merito coronamos.
Viendo la clase y pausando a 0.85x (porque vuelvan esos profes) y con el vsCode con su autocompletar y aun as铆 errores de typing 馃槄

Estamos a un solo paso de terminar este viaje. Vamooooooos.

En el c贸digo , en la funci贸n enviarAtaques ()
En este c贸digo pudimos ver como nos falto el puerto 8080 y el http : / / localhost .
Que quedar铆a as铆:

necesito fortalecer mi html

  • En mi proyecto, ya llevo varias docenas de juegos y subjuegos a partir de puro trabajo con idiomas, es decir no he usado mu帽ecos sino palabras de ciertos idiomas.

  • He aprendido MUCHO elevado a la Platzi, en este curso, maravilloso, y lo bueno es que he aprendido muchas instancias de disciplina de programador.

  • Ahora ya paso a hacer juegos con movimientos鈥

  • Me esperan unos dos meses de trabajo intenso, dado el caso que estoy en plena producci贸n pagada del a帽o 2023 y debo ajustarme al horario de mi empleador.

  • Esto va bien.

He encontrado la soluci贸n gracias a usar CHAT GPT PLUS - GPT4 le he pasado el todo el c贸digo de mokepon.js y despu茅s de analizarlo me ha dicho que exist铆a algunos problemas, y le he dicho:

Yo: Puedes solucionar los problemas que consideras que se tiene que ajustar?

Y la IA me dice: S铆, puedo hacer ajustes en el c贸digo para resolver algunos de los problemas mencionados. A continuaci贸n, se presenta el c贸digo modificado, en el que he reorganizado la estructura de algunas funciones para asegurar que todos los elementos est茅n definidos antes de ser utilizados:

// C贸digo ajustado

const sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque');
const sectionReiniciar = document.getElementById('reiniciar');
const botonMascotaJugador = document.getElementById('boton-mascota');
const botonReiniciar = document.getElementById('boton-reiniciar');
sectionReiniciar.style.display = 'none';

const sectionSeleccionarMascota = document.getElementById('seleccionar-mascota');
const spanMascotaJugador = document.getElementById('mascota-jugador');
const spanMascotaEnemigo = document.getElementById('mascota-enemigo');
const spanVidasJugador = document.getElementById('vidas-jugador');
const spanVidasEnemigo = document.getElementById('vidas-enemigo');
const sectionMensajes = document.getElementById('resultado');
const ataquesDelJugador = document.getElementById('ataques-del-jugador');
const ataquesDelEnemigo = document.getElementById('ataques-del-enemigo');
const contenedorTarjetas = document.getElementById('contenedorTarjetas');
const contenedorAtaques = document.getElementById('contenedorAtaques');
const sectionVerMapa = document.getElementById('ver-mapa');
const mapa = document.getElementById('mapa');

// Resto del c贸digo...

function iniciarJuego() {
    
    sectionSeleccionarAtaque.style.display = 'none';
    sectionVerMapa.style.display = 'none';

    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>
        `;
        contenedorTarjetas.innerHTML += opcionDeMokepones;
    });
    
    inputHipodoge = document.getElementById('Hipodoge');
    inputCapipepo = document.getElementById('Capipepo');
    inputRatigueya = document.getElementById('Ratigueya');

    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador);
    botonReiniciar.addEventListener('click', reiniciarJuego);

    unirseAlJuego();
}

// Resto del c贸digo...

En este ajuste, he reorganizado el c贸digo para asegurar que los elementos del DOM se definan antes de ser utilizados. Tambi茅n he corregido la falta de puntos y comas al final de algunas l铆neas, para mantener una sintaxis consistente y evitar posibles problemas en la ejecuci贸n del c贸digo.

A mi se me rompio todo el codigo :C, no entienndo que hice mal aun, estoy esperando terminar el curso y asi poder revisarlo

Quede impresionado de como funciona el metodo de de mover el mapa e interactuar con una colision. Tuve mushos problemas para que este metodo funcionara, pero con paciencia y tiempo puede salir. La cosa es no darse por vencido.