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

M茅todos en las clases

66/84
Recursos

Aportes 66

Preguntas 22

Ordenar por:

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

Cuando el valor de una propiedad de un objeto es una funci贸n se le llama: m茅todo.

El m茅todo, entonces, es una funci贸n que est谩 asociada a un objeto.

Viendo que varios compa帽eros preguntaban por la cabeza de los dem谩s mokepones porque en los archivos del curso no estaban, quise hacerlos por mi cuenta, aunque no son tan profesionales, espero les sirvan


si ponen la funcion aleatorio en el constructor de la clase mokepon, en las cordenadas X y Y, los mokepones salen aleatorios.

this.x= aleatorio(0,320)
this.y= aleatorio(0,240)

va tomando forma 馃榿

Aqu铆 les dejo las cabezas de nuestros Mokepones

Nadie tiene las cabezas de los otros 3 mokepones del reto anterior ???
Por ahora en mi caso deje para la cabeza y el cuerpo, la misma imagen (Me refiero a langostelvis, pydos y tucapalma鈥)

Dif铆cilmente se puede seguir el curso sin conocimientos anteriores. Se pasa por encima de muchas cosas, que se dan x conocidas.

Por personalizar a mis mascotas
![](

Me toc贸 improvisar cabezas jajaja.
![](

Mi mapa:

Bueno!!!
.
Hay vamos鈥
.

.

.
Que gran avance!!!

Wowow este curso b谩sico no esta tan b谩sico despu茅s de todo espero seguir mas adelante aprendiendo y no sentirme mas perdido con las dem谩s cursos de JS

As铆 va quedando :3

Quisiera compartirles un poco de como yo he ido haciendo este proyecto a mi manera con las bases del curso.

  • Yo puse todos mis objetos de personaje en un array, esto me permite usar los 铆ndices de cada personajes para toda la l贸gica del juego
let invocaciones = [sammy, amalthea, ashley];
  • Tambien tengo una funcion para crear otro array pero con los enemigos, esta funci贸n se activa luego de que nuestro usuario escoja personaje (no quiero tener que luchar contra mi propio personaje :p)
let enemigos
function IndiceEnemigos (){
    enemigos = invocaciones.filter(function(pj){
        return pj.nombre != invocaciones[indiceInvocacion_p1].nombre
    })
}

-Por 煤ltimo use nuestra funci贸n para crear n煤meros aleatorios en la posici贸n donde sale cada personaje, as铆 se evita que salgan siempre en el mismo sitio ( lo que s铆 hice fue limitar una zona para cada personaje porque aunque es aleatorio sal铆an muy cerca algunas veces)
PD: los rangos van seg煤n el tama帽o de nuestro canva teniendo en cuenta el tama帽o de las im谩genes tambi茅n.

invocaciones[1].x = aleatorio(200,500);
invocaciones[1].y = aleatorio(150,350);

Esta quedando chido 馃槂

vamos!!!

Aprovechando la funci贸n Aleatorio que ya tenemos, coloqu茅 cada Mokep贸n en un lugar al az谩r:
let hipodoge = new Mokepon(鈥楬ipodoge鈥,鈥./assets/Hipodoge.png鈥,0,鈥./assets/Hipodoge.png鈥,aleatorio(10,630), aleatorio(10,470))
/* Aqu铆 a煤n no se ha definido el Canvas, as铆 que use las dimensiones de pantalla (640x480) menos 10, para que todos est茅n en el mapa, pero esto se puede mejorar鈥

Luego, los pinto todos con un ciclo en la funci贸n correspondiente:
mokepones.forEach((moke) => {
moke.dibujar()
})

Yo le agregu茅 un poco de picante 馃敟 para que la posici贸n de los enemigos sea aleatoria.

let hipodoge = new Mokepon('Hipodoge','./assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png')
let capipepo = new Mokepon('Capipepo','./assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png')
let ratigueya = new Mokepon('Ratigueya','./assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png')
let hipodogeEnemigo = new Mokepon('Hipodoge','./assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png', Math.random()*mapa.width, Math.random()*mapa.height)
let capipepoEnemigo = new Mokepon('Capipepo','./assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png', Math.random()*mapa.width, Math.random()*mapa.height)
let ratigueyaEnemigo = new Mokepon('Ratigueya','./assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png', Math.random()*mapa.width, Math.random()*mapa.height)

El en reto de la ultima clase del anterior modulo, nos pidieron agregar los 3 mokepones restantes, pero aqui solo dan el rostro de los 3 iniciales

pens茅 que iba a dejar el curso, la clase pasada no pod铆a continuar, luego descubr铆 el error y pude seguir.馃榿馃榿

Bueno, realmente es como sigue:
Propiedad es una funci贸n del objeto que establece o devuelve un valor, como Color.
M茅todo es una funci贸n que puede no retornar un valor, pero que ejecuta una acci贸n, como MoverDerecha(espacios), o Dibujar.
Evento es una funci贸n que es llamada por el propio objeto y queda disponible para que el programador la aproveche si lo necesita, como CambioColor (colorAnterior), CambioPosici贸n(PosicionAnterior), SeAgregoUnAtaque(NuevoAtaque), Click, Drag鈥

  • M茅todo es el nombre que recibe una funci贸n que existe dentro de una clase.
    .
  • Se utilizan para englobar comportamientos o acciones que se pueden realizar con los objetos creados a partir de la clase.

Ami me quedo as铆

no pude seguir de esta clase, copio pego mis personames y le cambio el nombre agregandoles Enemigo pero no sucede nada, yo tengo 6 personajes, copie y pegue los ultimos 3 y les agrege enemigo y del resto hice todo igual y no funciona y en la consola no sale error. ayuda!

yo en vez de crear todos los personajes de nuevo, pero con el 鈥渆nemigo鈥, guarde la mascota aleatoria en una variable llamada mascotaDelEnemigo, luego pr谩cticamente copie el sistema creado para hacer aparecer a la mascota del jugador, y de esta forma hice que apareciera el enemigo en el mapa

Vamos bien.

Hola a todos! Me parece mas entretenido si hacemos que los mokepones enemigos tengan una posici贸n diferente cada vez que se inicia el juego. Para ello, us茅 la funci贸n aleatorio cuando creo los objestos enemigos:

<code> 
let hipodogeEnemigo = new Mokepon('Hipodoge','./assets/mokepons_mokepon_hipodoge_attack.png',5,'./assets/hipodoge.png', aleatorio(10,250), aleatorio(10,200))

let capipepoEnemigo = new Mokepon('Capipepo','./assets/mokepons_mokepon_capipepo_attack.png',5,'./assets/capipepo.png',aleatorio(10,250),aleatorio(10,200))

let ratigueyaEnemigo = new Mokepon('Ratigueya','./assets/mokepons_mokepon_ratigueya_attack.png',5,'./assets/ratigueya.png',aleatorio(10,250),aleatorio(10,200))

Estas clases son muy adictivas. Uno se ve una y quiere ver las otras 10. Gracias totales.

隆Vamos as铆! 馃槃 M谩s adelante pienso redise帽ar algunos mokepones para diferenciarlos entre enemigos y el mokepon del jugador 馃槈.

No puedo seguir la clase, se quebr贸 mi c贸digo, lo revise varias veces y no entiendo porque no me funciona. Alguna idea o sugerencia?

sinceramente estoy siguiendo el curso y todo me ha salido bien pero hay varios conceptos que no los termino de captar solo sigo las instrucciones pero hacerlo por mi cuenta sola no podr铆a, igual seguir茅 porque imagino que cuando veamos todo a mas profundidad se aclararan dudas y afianzaran conocimientos, yo veo este curso como un abre boca para echemos un vistazo a todo lo que la programaci贸n ofrece y analicemos si de verdad queremos seguir, por mi parte no parare de aprender as铆 me sienta perdida por momentos...

Utilic茅 la funci贸n aleatorio para la posici贸n del mokepon enemigo, vi que en algunos aportes utilizaron el rango del aleatorio el mapa.width y el mapa.height pero en mi caso solo se mov铆an en un rango muy chico y repet铆an muchas posiciones, me parece que tienen m谩s movilidad definiendo los rangos del aleatorio.

let hipodogeEnemigo = new Mokepon("Hipodoge", "./assets/HIPODOGEF.png", 5, "馃挧", aleatorio(20, 620), aleatorio(20, 620))

let capipepoEnemigo = new Mokepon("Capipepo", "./assets/CAPIPEPOF.png", 5, "馃尡", aleatorio(20, 620), aleatorio(20, 620))

let ratigueyaEnemigo = new Mokepon("Ratigueya", "./assets/RATIGUEYAF.png", 5, "馃敟", aleatorio(20, 620), aleatorio(20, 620))

let langostelvisEnemigo = new Mokepon("Langostelvis", "./assets/LANGOSTELVISF.PNG", 5, "馃敟", aleatorio(20, 620), aleatorio(20, 620))

let pydosEnemigo = new Mokepon("Pydos", "./assets/PYDOSF.png", 5, "馃挧", aleatorio(20, 620), aleatorio(20, 620))

let tucapalmaEnemigo = new Mokepon("Tucapalma", "./assets/TUCAPALMA.png", 5, "馃尡", aleatorio(20, 620), aleatorio(20, 620))

Excelente clase. lo reproduzco a 0.85x, es bueno como se hace entender.
Gracias tambi茅n los compa帽eros que hacen verdaderos aportes.

a煤n no estoy muy seguro de porque pero quer铆a hacer un forEach para no volver a declarar a las mascotas enemigas, si no que usar las del propio arreglo de Mokepones y no me dejaba mostrar a la misma mascota que escogiera el jugador

mokepones.forEach(mokepon=>{
        mokepon.pintarMokepon()
    })

mi soluci贸n fue en la funci贸n seleccionarMascota() crear una variable enemiga y hacerle un push en el arreglo mokepones:

enemiga = new Mokepon(mascotaJugador.nombre,mascotaJugador.imagen,5,mascotaJugador.vida,mascotaJugador.mapaFoto.src)
            enemiga.ataques = (mascotaJugador.ataques)
            mokepones.push(enemiga)

Para no tener que volver a asignar todos los valores de los mokepones para los enemigos, uso una funci贸n que clona las instancias de una clase. Esto reduce el riesgo de errores, como por ejemplo, si cambiamos la ruta de la direcci贸n de una de las im谩genes, no hay necesidad de cambiarla tanto en el mokep贸n original como en el enemigo:

// Funci贸n auxiliar para clonar una instancia de una clase
function clonarClaseObjeto(obj){
    return Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
}

// Creamos los mokepones enemigos
let hipodogeEnemigo = clonarClaseObjeto(hipodoge);
[hipodogeEnemigo.x, hipodogeEnemigo.y] = [80, 120];

let capipepoEnemigo = clonarClaseObjeto(capipepo);
[capipepoEnemigo.x, capipepoEnemigo.y] = [150, 95];

let ratigueyaEnemigo = clonarClaseObjeto(ratigueya);
[ratigueyaEnemigo.x, ratigueyaEnemigo.y] = [200, 190];

Aguante el Hipodosh!!

Estoy impresionado con la forma que se ha usado las coordenadas de los enemigos para usar el canvas. Es la primera vez que veo eso, espero seguir aprendiendo mas.

Cuando pedimos par谩metros para una funci贸n podemos definirle un valor por defecto a sus par谩metros.

ARRIBA DE MI MOTO ESTUDIO PAAA

![]()
![](file:///Users/manuelgutierrez/Desktop/Screen%20Shot%202024-03-25%20at%205.29.02%20PM.png)
Genial ![](https://static.platzi.com/media/user_upload/image-c4640f9d-d922-480a-b50b-e8d572989404.jpg)![](https://static.platzi.com/media/user_upload/image-4f015098-3dbe-48c6-916b-461c9333684e.jpg)
comenteeen
Mi avance hasta ahora :D ![](https://static.platzi.com/media/user_upload/image-c5165766-736e-47a2-a62c-66c2b7c5f41a.jpg)![](https://static.platzi.com/media/user_upload/image-b574a0fd-cd72-4ece-a958-5d4f0866c84d.jpg)
En mi caso lo que hice fue que las posiciones de los personajes fuesen aleatorias usando la funci贸n que ya hab铆amos creado desde el principio. ```js class Mokepon { constructor(nombre, foto, vidas, cara){ this._nombre = nombre this._fotos = foto this._vidas = vidas this._ataques = [] this._x = aleatorio(270, 0) this._y = aleatorio (190, 0) this._ancho = 50 this._alto = 50 this._imagen = new Image() this._imagen.src = foto this._velocidadX = 0 this._velocidadY = 0 this._cara = new Image() this._cara.src = cara } pintar(){ lienzo.drawImage( this._cara, this._x, this._y, this._ancho, this._alto) } } ```270 y 190 son los 320 y 240 menos los 50 pixeles que mide la imagen, para que nunca se salgan del lienzo. tambi茅n se podr铆a hacer esto para que las posiciones nunca sean las mismas ```js let posicionesUsadas = [] function generarPosicionUnica() { let x, y do { x = aleatorio(0, 320) y = aleatorio(0, 240) } while (posicionesUsadas.includes(`${x},${y}`)) posicionesUsadas.push(`${x},${y}`) return {x, y} } ```pero ya es mucho jaja no lo inclu铆, pero tenia la duda de si se podr铆a, y si se puede >D
**<u>C贸mo hacer que la mascota rival te persiga:</u>** Les dejo la funci贸n que cre茅 para que la mascota enemiga te persiga en lugar de quedarse quieta. Cabe mencionar que, adem谩s de esta funci贸n, fue necesario: * crear un nuevo `interval` que ejecute constantemente la funci贸n `moverRival` (el intervalo se inicializa en la funci贸n `iniciarMapa`, igual que el intervalo para el movimiento del jugador) * incorporar la actualizaci贸n de la posici贸n del rival en la funci贸n `pintarCanvas`. La funci贸n `moverRival` me qued贸 as铆: ![](https://static.platzi.com/media/user_upload/image-41e88c0e-1fd1-4ce1-b74b-e3fea4f78d23.jpg)

Me encanta esta profesora, se detiene con frecuencia a explicar detalles adicionales que podr铆an ser de utilidad aunque no est茅n directamente relacionados con lo que se est谩 haciendo en el momento, adem谩s que todo se siente menos cuadriculado. Hace que sienta que a煤n estoy avanzando pero el nivel de esfuerzo cognitivo disminuy贸.

Queriendo usar animalitos pero con distinta resolucion, les asign\[e por par\[ametro un width y un height, por ejemplo el cocodrilo tenia que necesariamente cambiar la forma en la que se dibujaba para que no quedara chaparro![](https://static.platzi.com/media/user_upload/MOKEPON_capture-b86db3e5-8456-42a6-b70d-b644d62c7937.jpg)

馃槃

EL ERROR DE LA CLASE 65 JAM脕S SE LOGRA ARREGLAR, ES UNA LASTIMA, VEN脥A MUY ENTUSIASMADO, CABE RESALTAR QUE NISIQUIERA COPIANDO EL CODIGO DEJADO EN GITHUB, JAM脕S LO PENS脡 PERO AHORA PUNTO NEGATIVO PARA PLATZI.

Gracias por la clase.

Saludoss les cuento pueden colocar las cabezas de sus personajes diferentes a los que usan los profesores la manera en que lo hice fue hacer capture de pantalla al personaje que he usado en mi juego luego en la pagina de removebg extrae el fondo guarde la imagen en la carpeta donde estan las imagenes de mis personajes y siguiendo los pasos de la profesora se logran inicializar en mi canvas

hola vine aqui de nuevo repasando jajajaja por esta no pas茅 la prueba

genial!

T.T no subieron las imagenes tambi茅n de tucapalma, pydos y langostelvis, me tocar谩 desmontarlos T.T

Posiciones aleatorias


Yo prefer铆, pintar todos los mokepones con un forEach:

mascotaJugadorObjeto.pintarMokepon()
mokepones.forEach((mokepon) => {
        mokepon.pintarMokepon()
})

Y en el constructor puse esto para las coordenadas:

this.x= aleatorio(0, mapa.width-this.ancho),
this.y= aleatorio(0, mapa.height-this.alto),

As铆 se ve:


Asi va quedando el proyecto, con un toque personal.
https://juancamilogomezalvarez.github.io/mokipon/

alguien mas se dio cuenta que el background es del Pokemon Rojo Fuego cuando vas al laboratorio del cientifico que se habia convertido en pokemon?

馃敟馃敟馃敟

me aparece cuando elijo un personaje cuando le doy seleccionar en el mapa me aparece el que elegi muchas veces
y no que hacer llevo 1 hora tratando de repararlo

me preguntaba por que tambien funciona en diagonal al mover al mokepon, no encontre exolicacion, creanme no me ha dejado dormir 馃槂

que buena esta clase!!

es buen aporte para todos