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
Fundamentos de Programación
Programación Básica: Fundamentos y Creación de Proyectos en Línea
Programación Básica en Google Chrome: Variables y Funciones
Creación de una Página Web Básica con HTML
Estructura Básica de un Documento HTML
Estructura y funcionamiento básico de HTML y JavaScript
Instalación y uso básico de Visual Studio Code para programar
Declaración y Uso Básico de Variables en JavaScript
Programación de Piedra, Papel o Tijera en JavaScript
Programación de Piedra, Papel o Tijera en JavaScript
Generación de Números Aleatorios con JavaScript
Creación y uso de funciones en programación
Ciclos y Condiciones en Programación: Piedra, Papel o Tijera
Programación de un Juego de Piedra, Papel o Tijera en JavaScript
Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web
Manipulación del DOM y Eventos en JavaScript para Juegos Web
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación de Páginas Web para Videojuegos en HTML
Selección de Mascotas en HTML para Juegos Interactivos
Programar eventos de clic en botones HTML con JavaScript
Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota
Selección de Mascota en JavaScript: Implementación y Validación
Manipulación del DOM con JavaScript para mostrar mascota seleccionada
Selección Aleatoria de Mascota Enemiga en JavaScript
Eventos de clic y lógica de ataque en JavaScript
Ataques Aleatorios para Mascotas Enemigas en JavaScript
Creación de Mensajes Dinámicos en Combate HTML y JavaScript
Lógica de Combate en JavaScript para Juego Mokepon
Operadores Lógicos en Programación: AND, OR y NOT
Actualización de Vidas en Juego de Combate con JavaScript
Validación de Vidas y Mensajes Finales en Juegos
Funcionalidad de Reinicio y Desactivación de Botones en Juego
Mostrar y ocultar secciones en HTML con JavaScript
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Estilos CSS: Selectores, Propiedades y Valores
Tipos de Visualización en CSS: Display Block, Inline e Inline Block
Alineación de Elementos con Flexbox en CSS
Modelo de Caja en CSS: Espaciado y Bordes
Diseño y Estilo de Páginas Web con HTML y CSS
Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas
Estilos CSS para Mejorar la Interfaz de un Juego
Estilizado de Pantallas de Juego con CSS y Flexbox
Separación de mensajes y estilos en JavaScript y HTML
CSS Grid: Organiza Elementos en Rejillas Bidimensionales
Diseño Responsivo con CSS: Media Queries y Flexbox
Pseudoclases en CSS: Mejora la Interacción del Usuario
Quiz: Estilos con CSS
Optimización de código
Optimización de Código JavaScript con Clases y Objetos
Optimización de Código JavaScript: Variables y Funciones
Clases y Objetos: Fundamentos para Optimizar Juegos
Construcción de Clases y Objetos en JavaScript
Uso de Arreglos para Almacenar Objetos en JavaScript
Agregar ataques a objetos en JavaScript
Renderizado Dinámico de Objetos en HTML con JavaScript
Solución de errores en variables y elementos HTML en JavaScript
Uso de Objetos para Centralizar Información en JavaScript
Selección de Mascota Aleatoria en JavaScript
Iteración de Arreglos y Manipulación DOM en JavaScript
Crear Función "mostrarAtaques" en JavaScript para Juegos
Eventos de Clic en Botones con JavaScript
Secuencia de Ataques y Validación de Resultados en JavaScript
Implementación de lógica de combate en juegos JavaScript
Programación de Juegos: Lógica de Ataques y Victorias
Optimización y Corrección de Errores en Juegos Web con JavaScript
Quiz: Optimización de código
Mapa con canvas
Dibujo y manejo de gráficos en Canvas con JavaScript
Movimiento de Capipepo en Canvas con HTML y JavaScript
Movimiento Continuo de Personajes en Canvas con JavaScript
Eventos de Teclado para Controlar Personajes en Juegos
Pintar Fondos y Personajes en Canvas HTML
Métodos de Clases en JavaScript para Juegos Interactivos
Detección de Colisiones en Videojuegos con JavaScript
Programación de eventos y colisiones en un juego interactivo
Ajuste Responsivo de Mapas en Pantallas con JavaScript
Estilos Responsivos en HTML y CSS para Mapas Interactivos
Quiz: Mapa con canvas
Backend: videojuego multijugador
Desarrollo de Juegos Multijugador con Cliente-Servidor y API
Instalación de Node.js en Windows para desarrollo backend
Uso básico de la terminal de comandos y Node.js
Creación de un Servidor Básico con Express.js en Node.js
Conceptos Clave de URIs y Verbos HTTP en Node.js
Desarrollo de API con Node.js y Comunicación Frontend-Backend
Selección de Mokepon y Comunicación JSON en Express.js
Implementación de un Endpoint para Coordenadas de Jugadores en Node.js
Integración de Coordenadas de Jugadores en Mokepon Multijugador
Optimización de Coordenadas en Videojuegos con JavaScript
Batalla Final en Mokepon: Implementación de Colisiones y Back-End
Implementación de Ataques en Tiempo Real para Videojuego Mokepon
Quiz: Backend: videojuego multijugador
Próximos pasos
Corrección de errores en juego multijugador con Node.js
Desarrollo Colaborativo con Git y GitHub para Programadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
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
.
La acción de crear un objeto a partir de una clase, lo conocemos con el nombre técnico de “Instanciar”. 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);
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.
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 60
Preguntas 25
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 ‘Clase’ 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 )
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])
class = Es la palabra reservada para generar una clase.
class “Mokepon” – 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 “esto 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 (“Hipodoge”, “url-link-imagen.png”, 5)
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)
}
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.
Bien explicado por parte del profesor 😃
Siempre me explicaban este tema…pero jamás pude entenderlo a la perfección. Con Ud es como aprender sumas y restas…lo 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 “planos” 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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?