- 1
Programación Básica: Fundamentos y Creación de Proyectos en Línea
00:51 - 2
Programación Básica en Google Chrome: Variables y Funciones
08:12 - 3
Creación de una Página Web Básica con HTML
06:40 - 4
Estructura Básica de un Documento HTML
05:15 - 5
Estructura y funcionamiento básico de HTML y JavaScript
07:57 - 6
Instalación y uso básico de Visual Studio Code para programar
06:39 - 7
Declaración y Uso Básico de Variables en JavaScript
03:24 - 8
Programación de Piedra, Papel o Tijera en JavaScript
09:44 - 9
Programación de Piedra, Papel o Tijera en JavaScript
10:02 - 10
Generación de Números Aleatorios con JavaScript
10:32 - 11
Creación y uso de funciones en programación
14:05 - 12
Ciclos y Condiciones en Programación: Piedra, Papel o Tijera
04:11 - 13
Programación de un Juego de Piedra, Papel o Tijera en JavaScript
09:55 - 14
Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web
08:05 - 15
Manipulación del DOM y Eventos en JavaScript para Juegos Web
06:34 Quiz Fundamentos de Programación
Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas
Clase 37 de 84 • Curso Gratis de Programación Básica
Contenido del curso
- 16
Maquetación de Páginas Web para Videojuegos en HTML
14:12 - 17
Selección de Mascotas en HTML para Juegos Interactivos
12:53 - 18
Programar eventos de clic en botones HTML con JavaScript
15:23 - 19
Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota
13:47 - 20
Selección de Mascota en JavaScript: Implementación y Validación
12:40 - 21
Manipulación del DOM con JavaScript para mostrar mascota seleccionada
11:14 - 22
Selección Aleatoria de Mascota Enemiga en JavaScript
12:31 - 23
Eventos de clic y lógica de ataque en JavaScript
12:16 - 24
Ataques Aleatorios para Mascotas Enemigas en JavaScript
08:43 - 25
Creación de Mensajes Dinámicos en Combate HTML y JavaScript
13:07 - 26
Lógica de Combate en JavaScript para Juego Mokepon
14:49 - 27
Operadores Lógicos en Programación: AND, OR y NOT
14:40 - 28
Actualización de Vidas en Juego de Combate con JavaScript
09:27 - 29
Validación de Vidas y Mensajes Finales en Juegos
08:48 - 30
Funcionalidad de Reinicio y Desactivación de Botones en Juego
10:56 - 31
Mostrar y ocultar secciones en HTML con JavaScript
15:12 Quiz Desarrollando un juego con HTML y JavaScript
- 32
Estilos CSS: Selectores, Propiedades y Valores
11:54 - 33
Tipos de Visualización en CSS: Display Block, Inline e Inline Block
06:48 - 34
Alineación de Elementos con Flexbox en CSS
10:56 - 35
Modelo de Caja en CSS: Espaciado y Bordes
10:00 - 36
Diseño y Estilo de Páginas Web con HTML y CSS
17:27 - 37
Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas
08:37 - 38
Estilos CSS para Mejorar la Interfaz de un Juego
09:28 - 39
Estilizado de Pantallas de Juego con CSS y Flexbox
11:06 - 40
Separación de mensajes y estilos en JavaScript y HTML
21:10 - 41
CSS Grid: Organiza Elementos en Rejillas Bidimensionales
11:32 - 42
Diseño Responsivo con CSS: Media Queries y Flexbox
11:09 - 43
Pseudoclases en CSS: Mejora la Interacción del Usuario
08:31 Quiz Estilos con CSS
- 44
Optimización de Código JavaScript con Clases y Objetos
06:29 - 45
Optimización de Código JavaScript: Variables y Funciones
18:20 - 46
Clases y Objetos: Fundamentos para Optimizar Juegos
03:47 - 47
Construcción de Clases y Objetos en JavaScript
10:18 - 48
Uso de Arreglos para Almacenar Objetos en JavaScript
06:49 - 49
Agregar ataques a objetos en JavaScript
13:47 - 50
Renderizado Dinámico de Objetos en HTML con JavaScript
16:27 - 51
Solución de errores en variables y elementos HTML en JavaScript
07:22 - 52
Uso de Objetos para Centralizar Información en JavaScript
04:44 - 53
Selección de Mascota Aleatoria en JavaScript
07:07 - 54
Iteración de Arreglos y Manipulación DOM en JavaScript
12:17 - 55
Crear Función "mostrarAtaques" en JavaScript para Juegos
13:06 - 56
Eventos de Clic en Botones con JavaScript
20:45 - 57
Secuencia de Ataques y Validación de Resultados en JavaScript
15:53 - 58
Implementación de lógica de combate en juegos JavaScript
18:41 - 59
Programación de Juegos: Lógica de Ataques y Victorias
12:44 - 60
Optimización y Corrección de Errores en Juegos Web con JavaScript
13:33 Quiz Optimización de código
- 61
Dibujo y manejo de gráficos en Canvas con JavaScript
10:40 - 62
Movimiento de Capipepo en Canvas con HTML y JavaScript
05:54 - 63
Movimiento Continuo de Personajes en Canvas con JavaScript
11:04 - 64
Eventos de Teclado para Controlar Personajes en Juegos
08:23 - 65
Pintar Fondos y Personajes en Canvas HTML
12:03 - 66
Métodos de Clases en JavaScript para Juegos Interactivos
09:16 - 67
Detección de Colisiones en Videojuegos con JavaScript
13:00 - 68
Programación de eventos y colisiones en un juego interactivo
10:40 - 69
Ajuste Responsivo de Mapas en Pantallas con JavaScript
09:04 - 70
Estilos Responsivos en HTML y CSS para Mapas Interactivos
06:59 Quiz Mapa con canvas
- 71
Desarrollo de Juegos Multijugador con Cliente-Servidor y API
08:38 - 72
Instalación de Node.js en Windows para desarrollo backend
05:45 - 73
Uso básico de la terminal de comandos y Node.js
08:59 - 74
Creación de un Servidor Básico con Express.js en Node.js
08:19 - 75
Conceptos Clave de URIs y Verbos HTTP en Node.js
07:07 - 76
Desarrollo de API con Node.js y Comunicación Frontend-Backend
12:47 - 77
Selección de Mokepon y Comunicación JSON en Express.js
25:43 - 78
Implementación de un Endpoint para Coordenadas de Jugadores en Node.js
11:12 - 79
Integración de Coordenadas de Jugadores en Mokepon Multijugador
23:03 - 80
Optimización de Coordenadas en Videojuegos con JavaScript
05:17 - 81
Batalla Final en Mokepon: Implementación de Colisiones y Back-End
13:02 - 82
Implementación de Ataques en Tiempo Real para Videojuego Mokepon
10:42 Quiz Backend: videojuego multijugador
¿Cómo estandarizar el botón de tu pantalla de juego?
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.
¿Cómo modificar el tamaño y el borde del botón?
-
Definir dimensiones:
- Ancho: El ancho del botón puede ser igual al de las tarjetas o ajustarse según tus preferencias.
- Alto: Opta por un alto de 40 píxeles para mantener un tamaño estándar.
-
Bordes redondeados:
- Usa la propiedad
border-radiuspara agregar bordes redondeados de 20 píxeles, creando un look más atractivo.
- Usa la propiedad
boton {
width: 100px; /* define tu ancho deseado */
height: 40px;
border-radius: 20px;
}
¿Cómo personalizar el fondo y el borde?
El siguiente paso es personalizar el fondo y el borde, buscando contraste y atractivo visual.
- Transparencia y Bordes:
- Fondo: Opta por un fondo transparente.
- Borde: Usa un borde sólido y elige un color distinto como blanco. Ajusta el grosor del borde según lo desees.
boton {
background-color: transparent;
border: 2px solid white;
}
¿Cómo elegir y aplicar tipografías al texto?
Distinguir el botón con una tipografía adecuada es crucial para su visibilidad.
-
Tipo de letra:
- Cambia al tipo de letra
Poppinscon un grosor de 300 para mantener un texto ligero y legible.
- Cambia al tipo de letra
-
Incorporar fuentes:
- Importa las fuentes necesarias e incorpóralas en tu código. Asegúrate de aplicar la tipografía seleccionada al botón y al resto del documento.
@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;
}
¿Cómo gestionar los márgenes para posicionar el botón?
Un correcto manejo de márgenes asegura que el botón tenga suficiente espacio alrededor, mejorando la estética y usabilidad.
- Márgenes individuales:
- Utiliza
margin-toppara separar el botón de las tarjetas superiores, asegurando que el espaciado sea uniformemente agradable.
- Utiliza
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.