🎉🎉🐲
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
Aportes 219
Preguntas 35
🎉🎉🐲
Así quedó el mío…
Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima
Aquí les dejo Color Hunt
.
Aplicando el responsive:
Y así quedó mi juego jaja
El mio quedo asi!!
p/d: Perdon por la calidad, no se como hacer para subirlo sin que pierda la calidad de imagen
Yo lo que hice fue ponerle un borde celeste, aqui mi linea de codigo:
Hasta luego señorita Estefany 🤞
El resultado final:
En la sección de ataque creé una caja para el VS:
Para lograr el VS había que crear e insertar el elemento de imagen desde JS. Una cosa curiosa que sucedió es que, al principio, había creado unas variables globales para las imágenes, pero cuando se repetía la elección de las mismas, entre el jugador y la pc, en la caja de VS solo aparecía una imagen. Se debe a que, lógicamente, era la misma imagen, no le estaba diciendo a la pc que creara otra imagen a pesar de que era la misma. Para eso, había que declarar las variables del jugador y enemigo por separado. Es lógico, pero al principio no lo veía así. Así quedó el código:
MOKEPON
Tienes que atraparlos, mi destino así es 🎶
😅 Aun me falta lo de responsive, pero le di un toque retro con el curso de Pixel Art… ¿Qué les parece? 🤔
👉 También lo subí a la web
🔗 https://joseal.click/mokepon/mokepon.html
Muchas gracias Estefany, aprendí mucho de CSS, dejo mi trabajo final.
Así lo hice yo:
Estas son mis modificaciones, quiero agregarle un poco mas por que creo que se ve un poco vacío cuando están en el combate, pero sin duda e emprendido mucho haciendo mis modificaciones.
CSS me costó el triple de Java y HTML pero al final lo logré y así quedó, estoy muy agradecido con este curso!!
mi re
encontre este "input:checked + label {
background-image: linear-gradient(blue, yellow);
}"
Para hacer un fondo en degrade de varios colores
Este fue mi resultado final.
Oh, pero que gran viaje fue este, enserio me encanto y fue muy importante para mi y enserio logre aprender cosas que nunca me imagine que entendería y logre cosas que nunca pensé que haría, aun me falta mucho camino pero agradezco lo que platzi me ha dado y estare agradecido toda mi vida con ustedes de platzi por darme ayudarme a entender estas increibles herramientas que son HTML, CSS y JavaScrip
Este es mi proyecto, al principio segui los pasos de los profesores al pie de la letra, en algunos casos pequeños intentaba hacerlo por mi cuenta y poca veces me funcionaban pero igual aprendia de los errores. Pero ya en la clase 36 o 37, me dije a mi mismo que no queria copiarme y seguirle de la mano a la profesora, que hizo un gran trabajo y es muy buena, pero ya para este punto me senti con la confianza suficiente para emprender por mi mismo, y rehíce casi todo el CSS, cambiando los Mokepones por los miticos y legendarios NINJAS DEL CARD-JITSU, el minijuego del inolvidable Club Penguin, asi que cambio todo mi CSS y gran parte de mi codigo de JS porque quise cambiar todos los nombres y otros detalles en pos de unas mejores visuals.
Y mi proyecto termino asi, estoy muy orgulloso y feliz de lo bien que me quedo, gracias nuevamente a Platzi y seguire trabajando para volverme el mejor Maestro mokep…, digo volverme un programador competente.
Aca se ve funcionando la Pseudo-Clase Hover en las cartas de mis ninjas
Y aqui cuando seleccionas a uno de ellos cambia de color
Tambien agregue por mi cuenta un tutorial que se abre cuando le das click al boton que dice tutorial
Y luego lo mas importante, el combate, le agrege unas Box Shadow a las tarjeta del jugador que cambia segun tu ninja para que se vea mas bonita y única, y lo que mas me costo fue que la carta de pareciera a las cartas originales del Card-Jitsu, y tambien al rival aunque siempre es roja para diferenciarlo del tuyo. y le agrege mas hovers a los botones de ataques, y tambien active, y simplifique a lo maximo la caja de comentarios, quite los nombres de tu eleccion y del rival, y solo se colocan los ataques elegidos y el resultado del combate, con colores para cada resultado del combate, si pierdes rojo, si ganas verde, y si empata amarillo.
Y aunque no se nota, el que pierde el combate se desvanece gracias a un opacity “0” y a un transition “1s”, se bloquean y se vuelven trasparentes los botones de ataques y aparece el mensaje final con mucho box Shadow, si ganas el combate es amarillo, y si pierdes es un color vinotinto muy opaco.
Disculpen si es muy largo pero es que estoy muy emocionado, aun no he terminado del todo este proyecto, estoy pensando en agregarle las mecanicas del Card-Jitsu, si se acuerdan los que la jugaron, para ganar un duelo debes ganar 3 enfrentamientos y con el mismo elemento, y o los tres elementos diferentes, pero con el mismo color. Quiero que para ganar un duelo debas reunir 3 cartas del mismo elemento, obligandote a ti a arriesgarte y usar el mismo elemento varias veces. Deséenme suerte…
Y Hasta el final de la clase de hoy asi va el proyecto:
Pagina Principal - Implementando pseudoclases hoover, active y checked.
Pagina del combate, usando flex y grid para ubicar los elementos.
Definicion del combate resultado de las rondas y boton reiniciar.
Aun falta ultimar detalles de nombres y otros detallitos del responsive design, pero realmente el curso es increible y la profe super clara 💪🏻💪🏻💪🏻
Como yo le puse una imagen de fondo diferente para cada mascota (background-image), tuve que hacer que al seleccionar una de ellas cambie el color del borde (border-color), ya que esta imagen de fondo tapaba al background-color que usa Teff y “no pasaba nada” al seleccionarlos. Como ya dije. La imagen de fondo tapaba a mi background-color. CREO
input {
display: none;
}
input:checked + label.tarjeta-de-mokepon-hipodoge {
border-color: #2f00ff;
}
input:checked + label.tarjeta-de-mokepon-capipepo {
border-color: #43a800;
}
input:checked + label.tarjeta-de-mokepon-ratigueya {
border-color: #ff0000;
}
Aquí como lo hice:
input:checked + label{
background-color: #A1E3D8;
border: 5px solid #069A8E;
}
Agregue un box shadow al label que seleccionen para hacerlo un poco mas estetico a mi parecer 😁
¡Hola a todos/as! Acabo de terminar mi juego y estoy muy contenta con el resultado, os muestro cómo me quedó.
Espero que os guste, ¡un saludo!
Me ha gustado investigar y repensar mucho el código para conseguir detalles y que quede lo más cercano a lo esperado, aquí dejo mi resultado! 😄
Asi me quedo.!
Lo seguiré actualizando según vaya avanzando en el curso.
- Desktop
- Móvil
asi va quedando que clases tan geniales jajaja
Hola!! me encanta como va quedando, estoy aprendiendo mucho con platzi y con los aportes de todos los estudiantes . Acá les mando mi avance!
Así llevo el juego, gracias profesora
body {
font-family: 'Poppins', sans-serif;
background-color: #630606;
background-image: url("./assets/fondo.jpg");
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
Fue un trabajo duro.
Requirió investigaciones varias y muchas modificaciones pero aquí esta. Ja, ja.
(El Responsive Design sí funciona solo la primera imagen es para ver a los 3 pokemones. Ja, ja.)
Resultado Final
Que maravilloso poder darle vida a nuestro juego. Gracias Teff!
Algo que implemente fue que sólo se mostrara la vista de “elegir ataque” sí y sólo sí, la mascota ha sido seleccionada, de lo contrario, “reload”.
Asi que el mio!
Así quedó la interfaz de mi juego de Mokepón:
Las imágenes de los demás mokepónes y de los mokepónes en miniatura las tomé prestada de un proyecto de Moképon que encontre en Google. 🧑🚀
multiverse jajaja
Me encanta como explican los profesores de Platzi, a pesar de ser nueva en todo este mundo les entiendo todo 😉
Enserio, muchas gracias
Bueno asi quedo mi juego por ahora. Espero les guste, se que tengo cosas que mejorar pero bueno de a poco.
xd por error ya esto lo había hecho desde el principio lo peor es que lo hice sin saber solo por comodidad visual
nombres inventados con el maravilloso don de la creatividad
Gracias a todos en platzi.
Nada es imposible.
Validar si no se selecciona una mascota😎💻 :
Algo que se les paso por alto que incluso la bella profe lo hacia, es que el flujo continua incluso sin seleccionar la macota y eso no estaría del todo bien. Asi que mi solución fue volver a llamar a la funcion de recargar la pagina en el boton de seleccionar mascota, si no se seleccionó una mascota y damos continuar esta me botara un mensaje de alerta que necesito seleccionar una mascota y se procede a recargar la pagina, y no me deja continuar sin haber seleccionado a la mascota. Espero sirva este aporte. 😉
//Eligiendo al digimon del jugador
function seleccionarDigimonJugador(){
let seleccionarDigimon = document.getElementById('seleccionar-digimon');
seleccionarDigimon.style.display = 'none';
let seleccionarAtaque = document.getElementById('seleccionar-ataque');
seleccionarAtaque.style.display = 'flex';
let inputDigimonEmymon = document.getElementById('emymon');
let inputDigimonShangamon = document.getElementById('shangamon');
let inputDigimonViramon = document.getElementById('viramon');
let spanDigimonJugador = document.getElementById('digimon-jugador');
if(inputDigimonEmymon.checked){
spanDigimonJugador.innerHTML = 'EMYMON';//metodo para manipular el DOM
seleccionarDigimonEnemigo()
} else if(inputDigimonShangamon.checked){
spanDigimonJugador.innerHTML = 'SHANGAMON';
seleccionarDigimonEnemigo()
}else if(inputDigimonViramon.checked){
spanDigimonJugador.innerHTML = 'VIRAMON';
seleccionarDigimonEnemigo()
}else{
alert('Ups!❌ Debes seleccionar a un Digimon.');
reiniciarJuego();/*si no selecciono mascota reinicia la pagina*/
}
}
Aqui esta mi diseño de la aplicacion del videojuego. Espero que sea de su agrado. Algunos estilos los personalize yo.
Desktop:
;
}
O una pequeña modificación a la etiqueta tarjetas junto con la clase input
.tarjeta-de-mokepon:hover {
background-color: rgb(235, 169, 83);
cursor: pointer;
}
input:checked + label{
background-color: rgb(255, 145, 0);
}
input{
display: none;
}
En este último código, cambia de color la tarjeta cuando se pasa el mouse y se queda de un color similar para indicar que está seleccionado
Gracias profe su metodología para enseñar es muy practica y fácil de entender
Mi proyecto va quedando de esta forma:
En GitHub: https://github.com/FredyBarrantes/HtmlCssJavascript
Bueno así va quedando el mío, las imágenes de los pokemones que uso en las miniaturas son de TerminalMontage
Los critical hits, y la tabla de tipos (súper efectivo, poco efectivo) están funcionando similar al juego original, me falta agregar los doble tipos y más tipos de movimientos pero para eso el código se hace muy complicado así que por el momento solo manejo un tipo para mantener el código simple. Pueden probar el juego acá
Muchisimas gracias! Curso espectacular. Profesores de alto nivel : profesional, emocional, carismatico y un largo etc. Voy poco a poco para llegar lejos. Seguimos… hay mucho que estudiar.
Amoooo la programacioooooon. El cielo es el limiteeeee.
Así quedo el mio,
El menú de selección, las mascotas y el fondo se mueven ya que son .gif
y esta es la sección del combate.
Me quedo asi!!
Así va quedando mi juego hasta ahora
Gracias ! , 🎉
Así lo hice yo
yo solucion no fue cambiaar el color si no activar el borde de la tartega con un color
Las primeras clases viendo el posicionamiento pensé “bueno, backend es otra buena opción” pero la profe es una genia y al final me termino gustando bastante todo el tema de css…
Les dejo el link al github para que lo chusmeen y dejen feedback !
Este ha sido un curso increíble, sin duda hemos visto un montón de temas.
👏 Estefany 👏
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?