Les recomiendo que acabando este curso revisen la escuela de diseño gráfico, les servirá mucho para mejorar sus estilos en CSS 💚 💚 💚
https://platzi.com/diseno-grafico/
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
En esta clase, continuarás personalizando y dándole vida a tu primera pantalla de juego al estilizar el botón de inicio. Aprende a ajustar el tamaño, el borde, el fondo y el tipo de letra para que se adapte perfectamente al diseño de tu juego.
Definir dimensiones:
Bordes redondeados:
border-radius
para agregar bordes redondeados de 20 píxeles, creando un look más atractivo.boton {
width: 100px; /* define tu ancho deseado */
height: 40px;
border-radius: 20px;
}
El siguiente paso es personalizar el fondo y el borde, buscando contraste y atractivo visual.
boton {
background-color: transparent;
border: 2px solid white;
}
Distinguir el botón con una tipografía adecuada es crucial para su visibilidad.
Tipo de letra:
Poppins
con un grosor de 300 para mantener un texto ligero y legible.Incorporar fuentes:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
boton {
font-family: 'Poppins', sans-serif;
}
Un correcto manejo de márgenes asegura que el botón tenga suficiente espacio alrededor, mejorando la estética y usabilidad.
margin-top
para separar el botón de las tarjetas superiores, asegurando que el espaciado sea uniformemente agradable.boton {
margin-top: 30px;
}
¡Adelante! Prueba estas técnicas y experimenta con diferentes estilos y tamaños para personalizar tu botón de inicio. Con estas habilidades, tu primera pantalla de juego destacará por su diseño impecable y profesional. Prepárate para avanzar a la próxima pantalla de tu juego.
Aportes 251
Preguntas 28
Les recomiendo que acabando este curso revisen la escuela de diseño gráfico, les servirá mucho para mejorar sus estilos en CSS 💚 💚 💚
https://platzi.com/diseno-grafico/
Me pasé todo el día haciendo la wea pq quería aportar :3
No es tanto pero ahi voy!
Asi va el mio
Así va el mio, hice mis propios diseños para las mascotas que mejorare después con el curso de illustrator😊
Hola Platzi!
Asi va mi web de inicio, con botón desactivado hasta que selecciones alguna mascota…
Aca les dejo una imagen con los 3 estados de mis inputs, normal, :hover y checked… y el botón ya activo para continuar.
Me encanta este curso, Saludos!
Que buen ojo para los estilos, tengo que trabajar duro para desarrollar ese buen ojo o gusto, yo no puedo hacer nada de esto sin un diseño pre-definido, excelente ver como va haciendo cada cosa y va teniendo sentido y se ve tan cool.
💅
Reto Cumplido.
En el css de los botones pueden usar esta opcion para que les salga la manito del click:
cursor: pointer;
hola
Así voy! No he podido centrarlos bien con
justify-content: center;
, si alguien me da recomendación les agradecería.
Espero les guste!
Yo, HTML siempre he sido mejor amigo de JavaScript. Nunca habías tenido problemas, éramos nosotros dos.
Hasta que apareció ella.
CSS, la más encantadora. y sin duda los demonios están hechos para pecar con los ángeles.
yo aquí casual, tratando de darle romance a esto 🤣🤣🤣
Juegazo
Muy contento con el resultado hasta ahora.
Un poco old School
Les comparto mi pequeña pantalla.
Acepto recomendaciones. Gracias.
listo profe asi quedo
Adapté un poco el juego para que fuera una extensión de mi emprendimiento!!! poco a poco voy aprendiendo. Le quiero poner unas lógicas distintas pero luego de terminar el proceso del curso!!
Acá esta mi diseño, espero les guste!!
y este es mi código CSS
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
body{
margin: 0;
background-image: url(./imagenes/fondo.jpg);
background-size: contain;
}
#seleccionar-mascota{
display: flex;
flex-direction: column;
height: 80vh;
width: 500px;
justify-content: center;
align-items: center;
margin: auto;
background: #E8AA42;
margin-top: 60px;
margin-bottom: 60px;
border-radius: 12px;
}
.titulo{
margin-top: -30px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #FFE5B4;
width: 450px;
border: 1px solid #256D85;
height: 80px ;
margin-bottom: 68px;
font-size: 70px;
font-family: 'Silkscreen', cursive;
}
h2{
font-family: 'Poppins', sans-serif;
color:#FFE5B4
}
.contenedor-labels{
display: flex;
justify-content: space-between;
width: 470px;
height: 150px;
margin-bottom: 40px;
}
.tarjeta-de-mokepon{
width: 150px;
height: 150px;
background: #256D85;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border-radius: 8px;
font-weight: 300;
}
.tarjeta-de-mokepon img{
width: 110px;
margin-bottom: 0;
margin-top: 0;
}
.nombre-mokepon{
font-family: 'Poppins', sans-serif;
color: #231955;
margin-bottom: 0;
margin-top: 0;
font-size: 25px;
}
#boton-mascota{
width: 300px;
height: 45px;
color: #FFE5B4;
background: transparent;
border-radius: 8px;
border: 2px solid #256D85;
font-size: 20px;
font-family: 'Poppins', sans-serif;
}
input{
display: none;
}
Le hice unos pequeños cambios al botón:
#boton-mascota{
color: black;
background-color: #F7FF93;
width: 210px;
height: 45px;
padding: 10px;
box-sizing: border-box;
margin-top: 40px;
border-radius: 20px;
border: 1px solid white;
font-family: 'Press Start 2P', cursive;
}
Para ser una clase va demasiado rapido. Cuesta demasiado entender asi.
Asi me va quedando, la verdad que me emociona
Mi aporte!
Agregué unas propiedades a mi código para los botones. Se las comparto con su significado (todavía no defino los colores, pero lo hice como ejercicio y ustedes pueden modificarlo).
#boton-mascota {
width: 144px;
height: 52px;
border-radius: 20px;
border: none;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 16px;
margin-top: 30px;
cursor: pointer;
}
input {
display: none;
}
.tarjeta-de-michipon:active {
box-shadow: 10px 10px 10px #389e8d;
}
cursor: pointer;
permite que al mover el cursos salga la manita.background-image: linear-gradient(135deg, #f34079 40%, #fc894d)
permite que el color del botón se degrade.font-weight:
permite hacer la letra negrita..tarjeta-de-michipon:active
permite que al seleccionar la tarjeta aparezca, en este caso, la sombra del color indicado, con las medidas indicadas.Esta es mi versión de Mokepon 😃
Puede parecer una tontería pero me cerró una idea que tengo hace meses ahí dando vueltas cuando explicó lo d los margins en sentido de las agujas del reloj, gracias profe.
Tambien, si definimos 2 valores por ejemplo:
margin: 30px 10px; el primer valor cuenta para top y bottom y el segundo para left y right. Si definimos 3 valores el primero va para top el segundo para left y right y el tercero para bottom.
Asi me quedó…
@import url('https://fonts.googleapis.com/css2?family=Belanosima&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Manrope:wght@200&display=swap');
body {
background-image: url('./assets/caracas_fondo_6.jpg');
background-position: top;
background-size: 1800px 1000px;
font-family: 'Belanosima', sans-serif;
}
#seleccionar-mascota {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
color: white;
}
.titulo {
color: white;
font-size: 50px;
}
.subtitulo {
color: white;
font-size: 25px;
font-family: 'Manrope', sans-serif;
}
.tarjetas {
display: flex;
gap: 10px;
}
.tarjeta-de-elementos{
width: 210px;
height: 250px;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
box-sizing: border-box;
border: 1px solid white;
border-radius: 20px;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
}
.tarjeta-de-elementos img {
width: 95px;
}
#boton-mascota {
width: 200px;
height: 60px;
border-radius: 20px;
color: white;
margin: 15px;
background-color: rgba(0, 0, 0, 0.4);
border: 2px solid white;
font-size: 25px;
font-family: 'Manrope', sans-serif;
}
input {
display: none;
}
Así va mi avance , espero les guste
Así va mi jueguito!! Cambia de color cuando pones el mouse sobre la imagen (ejemplo Fenigo)
Aquí les dejo mi aporte lleno de Copyright 🤣
Les comparto un pequeño video de lo que llevo de mi proyecto, los gráficos los realize con aseprite, cuando finalize el proyecto completo subiré el código para compartirlo con ustedes 🤟
Mejor me quedo jiji 😄
Cada vez mejorando 💪
Asi me va quedando 😄
Poco a poco!
va tomando buen aspecto
Bueno, por ahora va quedando asi:
Mi boton inicial se ve asi por que tiene una animacion hover… me gusta como va quedando pero claro mucho por mejorar!!
;
body {
font-family: ‘Roboto’, sans-serif;
background-color: #FFB84C;
}
.titulo {
color: white;
font-size: 32px;
/* width: 310px;
height: 50px;
background-color: teal; */
}
.subTitulo {
color: white;
}
#seleccionar-mascota {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tarjetas {
display: flex;
/* background-color: black;
flex-direction: column;
display: inline-block; */
}
label {
display: flex;
justify-content:center;
align-items: center;
width: 174px;
height: 100px;
margin: 20px;
background-color:#F266AB;
border-radius: 20px;
color: white;
}
label img {
width: 60px;
}
Mejor veo todo el módulo css antes de sentirme mal porque hay compañeros en muy otro nivel 😁
Les vengo a mostrar mi proceso quise hacer el mío de temática fantasía
Asi va quedando mi juego 😍😍
Conseguí darle un efecto neón a los botones y las tarjetas, estoy feliz XD
así va quedando mi estilo, quise poner a mi gato como primer personaje y me esta encantando
Espero te sean utis estás imagenes teneindo como referencia lo que explica la maestra.
así vamos!!!
Deberia haber elegido diferentes avatares, para que cada uno ataque con diferentes elementos, pero pues aja.
South Park enjoyers 😄
Va mejorando:
Apenas soy un novato en este mundo pero me siento conteto al ver los pequeños resultados😊
Me gusta mucho como la profe Estefany explica paso a paso cada detalle, se entiende fácilmente
Estoy siguiendo tal cual, pero, mi código en HTML, esta raro, pero si funciona, tal cual como usted realizo. Gracias profe
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?