💜💜
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 267
Preguntas 61
💜💜
Un pequeño aporte, para agregar un fondo y que se vea fashion pueden usar el siguiente código
En la etiqueta body de su CSS agregan esas líneas, deben tener la imagen de fondo que desean en la carpeta o llegar a ella con el método que vimos en clases anteriores y listo
body {
font-family: 'Russo One', sans-serif;
background-image: url(./fondo.jpg);
background-size: cover;
}
🔥🔥🔥🔥🔥
Hola,
Las fuentes utilizadas una de google fonts, Press Start, y encontré otra llamada pokemon-solid.
Los mismos estilos de la pantalla anterior me sirvieron para esta.
Ahi vaaaaaa :3
ahi va quedando jajaj
Mi resultado! aprendiendo un poco mas en cada clase!
😝 Con toda la actitud! 💪
Tal vez no es la gran cosa pero me gustó mucho mi resultado
empiesa a tomar mas forma 💖
Son mis gatos c:
La verdad me hubiera gustado haber planeado antes el juego XD, se me hace un 8 la cabeza revisando que tengo que borrar o mover en el Js y el css por cada cambio que hago. Me queda de experiencia y de hecho me gustaría hacer una versión 2.0 luego de terminado el curso.
🔥💖
Me gustaría que me comenten que les pareció. También estaría genial que me den su Feedback, creo que puedo hacer más cosas, pero por el momento es hora de seguir con las siguientes clases.
Mi aporte y mi código.
Saludos !!
<code>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
font-family: 'Press Start 2P', cursive;
background-image: url("assets/descarga.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#seleccionar-mascota {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.titulo {
font-size: 60px;
text-align: center;
color: black;
width: 533px;
height: 50px;
text-align: center;
align-items: center;
}
.subtitulo {
font-size: 24px;
display: flex;
padding: 20px;
border-radius: 20px;
color: black;
background-color: rgba(255, 214, 186, 0.3);
}
.tarjetas {
display: flex;
}
.tarjeta-de-mokepon {
width: 210px;
height: 177px;
background-color: rgba(255, 214, 186, 0.7);
color: #89B0AE;
text-align: center;
padding: 10px;
box-sizing: border-box;
margin: 5px;
border: 1px solid #89B0AE;
border-radius: 20px;
}
.tarjeta-de-mokepon img {
width: 119px;
height: 113px;
}
#boton-mascota {
border-radius: 20px;
width: 190px;
height: 60px;
margin-top: 30px;
background-color: rgba(255, 214, 186, 0.5);
border: 2px solid #89B0AE;
padding: 20px;
font-family: 'Press Start 2P', cursive;
}
input {
display: none;
}
#seleccionar-ataque {
flex-direction: column;
align-items: center;
}
.boton-ataque {
border-radius: 20px;
width: 190px;
height: 60px;
margin-top: 30px;
background-color: rgba(255, 214, 186, 0.5);
border: 2px solid #89B0AE;
padding: 20px;
font-family: 'Press Start 2P', cursive;
}
Por el momento mi Mokepon va asi:
Así voy de momento, estoy muy emocionada por como está quedando, gracias por aportarnos tu conocimiento y hacerlo posible ❤️.
😃
Algo es algo, mire algunos y estan muy buenos mal
mi codigo:
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');
body {
font-family: 'Silkscreen', cursive;
/* background-color: #100F0F; */
background-image: url(https://c.wallhere.com/photos/76/43/clouds_dark_blue_stripes_abstract-199322.jpg!d);
height: 100vh;
background-repeat: repeat;
}
.title{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#seleccionar-mascotas {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
background-color: #0F3D3E;
color: #E2DCC8;
font-size: 33px;
border: 1px solid #0F3D3E;
border-radius: 10px;
}
#sub-1 {
background-color: #0F3D3E;
color: #E2DCC8;
font-size: 26px;
border: 1px solid #0F3D3E;
border-radius: 10px;
}
.Targeta{
display: flex;
margin: 10px;
}
.Targetas {
width: 160px;
height: 100px;
background-color: #31087B;
color: #fff;
padding: 10px;
box-sizing: border-box;
margin: 10px;
border: 1px solid hotpink;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: stretch;
font-family: 'Rubik Dirt', cursive;
}
.Targetas:hover {
cursor: pointer;
}
.Targetas img {
width: 150px;
}
input {
display: none;
}
#boton-mascota {
width: 160px;
height: 40px;
border-radius: 20px;
padding: 5px;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 15px;
font-family: 'DynaPuff', cursive;
}
#seleccionar-ataque {
flex-direction: column;
align-items: center;
color: #fff;
}
.boton-de-ataque {
width: 140px;
height: 40px;
font-size: 15px;
background-color: rgb(1, 23, 11);
box-sizing: border-box;
color: #fff;
border: 2px solid #00028b;
border-radius: 10px;
padding: 0px;
font-family: 'Silkscreen', cursive;
}
#boton-reiniciar {
width: 160px;
height: 40px;
border-radius: 20px;
padding: 5px;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 15px;
font-family: 'DynaPuff', cursive;
}
(:
Así vamos profe, muchas gracias por sus consejos, he aprendio bastante
Les comparto mis avances 😃
Así vamos:
Excelente y clara la clase!
Asi va quedando hasta el momento mi proyecto
acepto criticas 😄 😄
me encantan los trabajos de mis compañeros, ademas me ayudan a tener otra perspectiva de como puede verse mi juego.
Así vamos
Así va mi página. No pensé llegar tan lejos jaja.
¡Feliz 2023!
Para los que sean fans de Avatar 😁

[](
Super chevree, como hemos ido avanzando en el desarrollo del proyecto, y los cambios…
profe mas o menos me esta quedando
espero le guste.
pd: eres la mejor
pueden instalar en el mismo vs code la extension live server, que lo que hace es que cada que guardas un cambio se actualiza la pagina para que no tengas que recargar la pagina para visualizar despues de varios cambios
Así va mi proyecto, muy buenas las clases.
saludos.!
Bueno, así voy, sé que falta mejorar algo…
Hasta el momento así vamos. Es sencillo pero me está encantando cada una de las clases que hemos tenido hasta ahora
:3
Así va mi juego por ahora.
.box:hover { /*Cambiar el color de fondo de cada monstruo de acuerdo a su elemento.*/
background: #325288;
width: 146px;
height: 142px;
margin: 26px 0px 16px 0px;
padding: 0px;
box-sizing: border-box;
border: 3px ridge #F4EFAC;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
cursor: pointer;
}
https://beta.openai.com/playground Es un complemento perfecto cuando estás aprendiendo a programar, es una asombrosa herramienta.
Asi va quedando mi pantalla de ataques
;
#seleccionar-atacar {
flex-direction: column;
align-items: center;
}
.tituloPag02 {
color: #645CBB;
font-size: 40px;
}
.subtitulosPag02 {
color: #645CBB;
font-size: 24px;
}
.boton-de-ataque {
font-family: 'Ubuntu', sans-serif;
width: 165px;
height: 100px;
background: linear-gradient(to right,#A0C3D2,#F7F5EB);
padding: 10px;
box-sizing: border-box;
margin: 5px;
border: 2px solid #EAC7C7;
border-radius: 20px;
box-shadow: 3px 3px #40450b;
color: #645CBB;
}
.botonReiniciar {
font-family: 'Ubuntu', sans-serif;
width: 165px;
height: 100px;
background: linear-gradient(to right,#A0C3D2,#F7F5EB);
padding: 10px;
box-sizing: border-box;
margin: 5px;
border: 2px solid #EAC7C7;
border-radius: 20px;
box-shadow: 3px 3px #40450b;
color: #645CBB;
}>
un avance ✌
mi versión:
![](
Hola, decidí dejar el mismo estilo que había usado para los label de las mascotas en los botones:
Muestra de mi pequeño progreso
Les recomiendo cursos de Git para ir haciendo las versiones de este proyecto, yo lo estuve pensando pero por querer terminar este primero y luego hacer el de git acabo de perder todo lo del curso por ponerme a eliminar archivos que no debía :v jeje
decidi hacerlo con colores que cmbinaran con los elementos, ademas de que todo lo que sea para interactuar tendra un borde violeta azulado
Me están encantando las Clases, GRACIAS!
Hasta ahora, lo tengo asi 😄
Así va el mío, lo hice basado en un episodio de South Park llamado Chinpokomón jajajaja
Espero no me denuncien por derechos de autor XD.
Que diseños tan cheveres los de la comunidad💚💚
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?