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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
21H
31M
55S

Clases y objetos de Mokepon

47/84
Recursos

Conociendo los conceptos b谩sicos de la programaci贸n orientada a objetos, es momento de implementarlo en el c贸digo fuente de Javascript. Veamos c贸mo puedes crear clases y objetos a partir de estas.

Sintaxis de las clases y objetos

La mayor铆a de los lenguajes de programaci贸n poseen una sintaxis muy similar e intuitiva cuando se trata de crear clases y objetos. Los conceptos que aprendas sobre POO en Javascript, el d铆a de ma帽ana, te servir谩n para trabajar con otros lenguajes de programaci贸n.

Clases en Javascript

Crear tu primera clase en Javascript para luego crear objetos es muy sencillo. Basta con utilizar la palabra reservada class, seguido del nombre de la clase, comenzando siempre con may煤scula para seguir las buenas pr谩cticas.

class Mokepon { }

Dentro de la clase, implementamos una funci贸n especial llamada constructor() que nos permitir谩, justamente, construir objetos a partir de esta clase. El constructor recibe como par谩metro los atributos o la informaci贸n que la clase necesita para crear el objeto.

class Mokepon {
    constructor(nombre, foto, vida) {
        this.nombre = nombre;
        this.foto = foto;
        this.vida = vida;
    }
}

El constructor recibe por par谩metro la informaci贸n que necesita, en el orden indicado, y guardamos la misma dentro de las propiedades que llevan el mismo nombre.

Observa otra palabra muy importante en la programaci贸n orientada a objetos: this. La misma hace referencia al objeto actual donde te encuentras. Siempre que quieras acceder a un atributo o m茅todo dentro de la clase, lo har谩s con this.

Objetos en Javascript

La acci贸n de crear un objeto a partir de una clase, lo conocemos con el nombre t茅cnico de 鈥淚nstanciar鈥. Siempre que tengas que crear un objeto, te encuentras instanciando una clase y creando el mismo.

Para crear una instancia de tu clase en Javascript, tienes que utilizar la palabra reservada new seguido del nombre de la clase que quieres intanciar.

let hipodoge = new Mokepon('Hipodoge', './assets/hipodoge.jpg', 5);

Al usar la clase como una funci贸n y pas谩ndole la informaci贸n propia del objeto, internamente te encuentras llamando al constructor de la clase que devolver谩 como resultado el objeto y lo guardamos en la variable del tipo let para utilizar el objeto posteriormente.

De esta manera puedes tener N cantidad de instancias de una clase y crear un objeto nuevo por cada Mokepon en tu videojuego.

Si haces un log de esta variable en la consola del navegador, observar谩s como toda la informaci贸n del objeto se encuentra agrupada.

console.log(hipodoge);
Visualizaci贸n en consola de un objeto

Si no conoc铆as a煤n la funci贸n console.log() te servir谩 much铆simo de ahora en adelante para visualizar los datos de tu aplicaci贸n y corroborar que sean correctos.

Conclusi贸n

Hasta este punto, ya conoces los conceptos b谩sicos tanto te贸ricos como pr谩cticos sobre la programaci贸n orientada a objetos. Suficiente para optimizar el c贸digo de tu software y volver lo m谩s profesional, escalable y comprensible.


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

Aportes 44

Preguntas 24

Ordenar por:

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

o inicia sesi贸n.

El atributo global class es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos espec铆ficos a trav茅s de los selectores de clase o funciones como el m茅todo document. 馃挌 馃挌 馃挌

Yo por fin entendiendo cuando Juan David dijo que LUEGO crear铆amos las dem谩s mascotas del juego y que realmente nunca se le olvidaron los otros tres

Resumen:

Usamos la palabra reservada class para crear una clase (que debe iniciar con Mayuscula) y la palabra reservada constructor para definir los atributos que tendr谩n nuestros futuros objetos.

Con this.atributo + atributo vamos ligando cada uno de los atributos y finalmente podemos crear variables = new 鈥楥lase鈥 y los valores de sus atributos

Ejemplo

class Nerd {
    constructor(nombre, foto, vida) {
        this.nombre + nombre
        this.foto + foto
        this.vida + vida
    }
}

let rajesh = new Nerd('Rajesh', './assets/rajesh.png', 3)

Pro tip: Con el portapapeles de windows 11 se facilita la tarea de copiar y pegar del html al js sin tener que andar cambiando constantemente de archivo

Duda: Por qu茅 los nuevos objetos se declararon con let y no con const c贸mo aprendimos en la clase anterior???

Para quienes les guste, en visual studio code hay un theme de platzi muy bueno )

Si no les gusta los colores de su codigo les recomiendo el tema que uso se llama Palenight


Las clases inician con may煤sculas.

Si quieren sacar algo de las cosas copiadas sin tener que copiarlo nuevamente, pueden usar el atajo win + v (en Windows [adem谩s se debe activar en la configuraci贸n])

Hay un video que es super bueno para atender de una manera muy sencilla lo de las clases y objetos(el paradigma orientado a objetos). Ayuda bastante a personas que apenas est谩n empezando y recordar ciertas cosas si ya sabes programar.

Aqu铆 el video del gran Fazt. Video

Bueno he creado los objetos en autom谩tico, ahora, si escribo por el nombre, obtengo las propiedades de cada uno.

class Mokepon {
    constructor(nombre, foto, vida) {
        this.nombre = nombre
        this.foto = foto
        this.vida = vida
    }
}

let personajes = [
    {
        nombre:'hipodoge',
        url_img:'./assets/mokepons_mokepon_hipodoge_attack.png',
        vida: 5
    },
    {
        nombre:'capipepo',
        url_img:'./assets/mokepons_mokepon_capipepo_attack.png',
        vida: 5
    },
    {
        nombre:'ratigueya',
        url_img:'./assets/mokepons_mokepon_ratigueya_attack.png',
        vida: 5
    }
]

for (x=0; x<Object.keys(personajes).length; x++) {
    let obj = personajes[x].nombre;
    obj = new Mokepon(personajes[x].nombre, personajes[x].url_img, personajes[x].vida)
    console.log(obj.nombre)
}

class = Es la palabra reservada para generar una clase.

class 鈥淢okepon鈥 鈥 Mokepon es el nombre de la clase, la 煤nica regla es que todos los nombres de las clases tienen que iniciar en may煤sculas.

constructor = Es la palabra reservada para construir un objeto, aqu铆 van integradas las propiedades que tienen los objetos, como nombre, imagen, etc.;

Class Mokepom {
Constructor (nombre, foto, vida)
}

this = es una palabra reservada para indicar 鈥渆sto mismo 鈥 algo inherente鈥. Ejemplo:

this.nombre = nombre
this.foto = foto
this.vida = vida

Ya que tenemos lo anterior podemos iniciar a construir los objetos (en este caso, los mokepones), para esto tenemos que generar una variable con el nombre del mokepon, por ejemplo:
Let hipodoge = new Mokepon

new = es una palabra reservada que indica la creaci贸n de un nuevo objeto de una clase que ya existe o hemos creado, en nuestro caso ser铆a la clase Mokepon

let hipodoge = new Mokepon (鈥淗ipodoge鈥, 鈥渦rl-link-imagen.png鈥, 5)

console.log (hipodoge)

esta funcion sirve para visualizar los objetos de una variable, en nuestra consola.

En este ejemplo, seria visualizar los objetos de hipodoge.

Me gusta la forma de ense帽anza que tiene el profe Diego, ademas que es muy adecuado que nos deje abajo del video el recurso muy bien explicado y con ejemplos, ojala en todos los cursos realizaran un buen resumen como estos.

Qu茅 genial! Excelente curso, ya ve铆a hace un sobre " clases " y " objetos " y ya lo entiendo mucho mejor

Una de las formas de agregarle la imagen es inyectarlo en html desde el mismo js de la misma integraci贸n del nombre aleatorio, dejo la funci贸n de la selecci贸n del enemigo aleatorio con su imagen

Este es sin agregar la imagen

 function seleccionarEnemigo(){
    let pc=aleatorio(0,dayamones.length -1)

    mascotaEnemiga.innerHTML=dayamones[pc].nombre 
    }

Esta funci贸n ya contiene lo a帽adido de la parte de seleccionar imagen

function seleccionarEnemigo(){
    let pc=aleatorio(0,dayamones.length -1)

    mascotaEnemiga.innerHTML=dayamones[pc].nombre +  `<img src=${dayamones[pc].foto} alt=${dayamones[pc].nombre} >`
    }

el truco es agregar 鈥+鈥 y lo que inyectaras en el html en este caso la imagen desde la misma variable

con esto va a ser mas facil programar!!

Pasar primero por el curso de POO es una buena idea para entender muy bien todo esto


se parece a la programaci贸n orientada a objetos jejejejee

Excelente clase

me gusta que este profesor no usa atajos para ense帽ar, lo cual, para los nuevos es bueno

Por fiiiin entend铆 qu茅 rayos es el this y c贸mo funciona todo el asunto de las clases 馃槷

Cuando usamos this.nombre_variable, estamos declarando que queremos que se genere esa variable que va a contener el valor que le pasamos por par谩metro en el constructor. A diferencia de otros lenguajes, que es necesario crear la variable primero y luego hacer referencia a ella con this o el nombre de la variable directamente. Esto si ya conoces otro lenguaje puede generar confusi贸n.

para ver todos los objetos en console.log al mismo tiempo hay que envolverlos en llaves:
console.log({hipodoge, capipepo, ratigueya})

class --> clase
estructura de clase:
class nombre{
propiedades鈥
}

this.nombre --> apuntya a un objeto especifico

console.log() --> mensaje en consola

No hab铆a entendido la clase de objetos y clases, pero con esta clase del profe qued贸 muy clara

Tremenda clase, me toca volver a colocar a 0.85x y ahi vamos 馃榾

El profe es excelente, explica de 10!

Excelente explicaci贸n, aunque siento que me confunde un poco JS.

Gracias por esa explicaci贸n. Nunca hab铆a entendido bien lo de los objetos hasta que v铆 este video 馃挅

Bien explicado por parte del profesor 馃槂

Siempre me explicaban este tema鈥ero jam谩s pude entenderlo a la perfecci贸n. Con Ud es como aprender sumas y restas鈥o hace ver muy f谩cil. Espero alg煤n d铆a estrechar su mano para agradecerle.

Los nombres de las clases inician con la letra may煤scula, a diferencia de las variables. Dentro de la clase va el constructor, donde se colocan las propiedades que van a tener los objetos. Ah铆 mismo se crean variables de clase con estructura this.nombre (ejemplo), que guardan valor de par谩metros en el constructor.

馃挭 En esta clase se ense帽贸 a como crear clases, utilizarlas y revisar que funcionen

Las clases son los planos b谩sicos que necesitamos para construir los objetos, y estos objetos pueden incluir ciertos detalles que los hacen distintos entre ellos.
.
Con estos 鈥減lanos鈥 nos podemos guiar de forma m谩s f谩cil y pr谩ctica para replicar los objetos.

excelente explicacion

interesante y util explicacion

Diego, no solo eres un excelente profesional sino tambi茅n un excelente pedagogo鈥 Te tomas el tiempo de aclarar cada tema y a ti te entiendo mucho mejor todo :3
Gracias profe!

Me parece increible la forma en que se usan las clases con los objetos para trabajar un videojuego. Sabia que se usa algo de programacion, pero jamas imagine que usa algunos metodos basicos.

clarificando los conceptos, gracias

la mejor explicaci贸n

6:57 Diego, pero pod铆as simplemente copiar la estructura de la variable Hipodoge y ah铆 reemplazabas los par谩metros de la clase con los nombres de las diferentes mascotas, porque solo era eso lo que hab铆a que cambiar, el resto de la estructura es id茅ntica por tratarse de los mismos objetos y me parece innecesariamente complicado la forma como lo hiciste, adem谩s de que tambi茅n es m谩s lento.

Cuando creamos una class, clase si o si deben comenzar con Mayuscula:
ejemplo:
class Mokepon
Las propiedades se crean con constructor 贸sea, ejemplo:

class Mokepon {
constructor (nombre, foto, vida) {
this.nombre = nombre
this.foto = foto
this.vida = vida
}
}

this y new son palabras reservadas.

No hab铆a escuchado de las clases, est谩 genial este concepto y lo que nos permite realizar con el c贸digo.