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.
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
Programación en Navegadores: Primeros Pasos
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Instalando tu primer editor de código
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién ganó el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿Y ahora qué curso tomar?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Estefany Salas
Aportes 71
Preguntas 22
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.
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
Por personalizar a mis mascotas
![](
Me tocó improvisar cabezas jajaja.
![](
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.
Bueno!!!
.
Hay vamos…
.
.
.
Que gran avance!!!
Mi mapa:
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.
let invocaciones = [sammy, amalthea, ashley];
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);
vamos!!!
Esta quedando chido 😃
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…
Aprovechando la función Aleatorio que ya tenemos, coloqué cada Mokepón en un lugar al azár:
let hipodoge = new Mokepon(‘Hipodoge’,’./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.😁😁
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?
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 “enemigo”, 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 😉.
https://media.tenor.com/IeSvLs07zsAAAAAC/ice-age-possum.gif
TEAM RATIGUEYA
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ó.
😄
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
Que confuso que hace y deshace su código. En lugar de que sea super estructurada la instructora como nos acostumbraron al principio…
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
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),
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?