Separación de mensajes y estilos en JavaScript y HTML

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0020:34

Separación de mensajes y estilos en JavaScript y HTML

Curso Gratis de Programación Básica 2022

Clase 40 de 84

Clase 40 / 84

Recursos

Cuando desarrollas un juego web, la forma en que presentas los mensajes al jugador marca la diferencia entre una experiencia confusa y una realmente clara. Separar la lógica de los mensajes en el código JavaScript y aplicar estilos con CSS permite que cada resultado se muestre de manera ordenada, con un diseño limpio y fácil de entender.

¿Cómo separar los mensajes en elementos HTML independientes?

El primer paso consiste en analizar qué información contiene el mensaje original. En este caso, se identifican tres partes: el resultado del combate (ganaste, perdiste o empataste), el ataque del jugador y el ataque del enemigo [01:05]. En lugar de mostrar todo en un solo bloque de texto largo, la idea es dividirlo en tres contenedores independientes.

Para lograrlo, se crean tres div en el HTML, cada uno con un ID específico:

resultado: muestra únicamente si ganaste, perdiste o empataste.
ataques-del-jugador: registra los ataques que realizó el jugador.
ataques-del-enemigo: registra los ataques del oponente.

Esta técnica de separar la información en elementos con IDs propios es fundamental para manipular el DOM (Document Object Model) de forma precisa desde JavaScript.

¿Por qué usar innerHTML en lugar de appendChild?

Al trabajar con el resultado, surge un problema: si se usa appendChild para agregar párrafos, los mensajes se van apilando uno debajo del otro con cada turno [07:00]. Eso no es lo deseado. La solución es utilizar innerHTML, que reemplaza el contenido existente en vez de acumularlo.

Además, como el resultado solo necesita un párrafo, se puede cambiar el div por una etiqueta <p> directamente en el HTML, simplificando la estructura [07:25].

¿Cómo garantizar consistencia en el código?

Un detalle importante es mantener la convención de nombres en todo el proyecto. Si el resto del código usa guiones (ataques-del-jugador), hay que evitar mezclar con camelCase (ataquesDelJugador) para no generar inconsistencias [04:35]. La función getElementById debe coincidir exactamente con el ID definido en el HTML.

¿Qué estilos CSS aplicar a la caja de mensajes?

Una vez que la lógica funciona correctamente, se aplican estilos para dar forma visual a la caja. Los estilos clave que se definen para el selector #mensajes son [10:05]:

width de aproximadamente 280 píxeles para controlar el ancho.
background con un color de la paleta seleccionada en Color Hunt.
padding de 20 píxeles para dar espacio interno al contenido.
margin-top de 20 píxeles para separar la caja de la sección superior.
border-radius de 20 píxeles para bordes redondeados.

Para centrar el contenido se utiliza Flexbox, estableciendo display: flex, flex-direction: column y align-items: center [16:35]. Con flex-direction en column, el texto del resultado queda arriba y el botón de reiniciar abajo, apilados verticalmente.

¿Cómo estilizar el botón de reiniciar?

El botón de reiniciar se mueve dentro del contenedor de mensajes para que aparezca justo debajo del resultado final del juego [14:15]. Los estilos aplicados al botón incluyen:

border: none o border: transparent para eliminar el borde predeterminado.
color con uno de los azules de la paleta utilizada en el proyecto.
La misma tipografía (font-family) que el resto de la interfaz para mantener coherencia visual.

¿Cómo manejar el mensaje por defecto y el mensaje final?

Antes de que el juego comience, la caja aparecería vacía. Para evitar esto, se agrega un texto por defecto directamente en el HTML, como "mucha suerte" [11:45], que motiva al jugador antes de iniciar.

Para el mensaje final, se debe verificar que la función crearMensajeFinal apunte al ID correcto (resultado en lugar de mensajes) [13:10]. Un truco útil es usar Ctrl + F en el editor de código para buscar referencias antiguas y asegurarse de que todas estén actualizadas [13:50].

El resultado final es una caja compacta, con bordes redondeados, que muestra solo el resultado relevante y el botón de reiniciar, sin texto innecesario. Muestra en los comentarios cómo te quedó tu caja de mensajes y qué colores elegiste para personalizarla.