Aprende a controlar la visibilidad de secciones en una página web usando la propiedad style.display de JavaScript. Esta técnica te permite mostrar elementos solo cuando el usuario los necesita, mejorando la experiencia de un juego o aplicación interactiva como Mokepon.
¿Por qué ocultar secciones HTML con JavaScript?
Cuando construyes un juego por turnos como Mokepon, no quieres que todas las secciones aparezcan al mismo tiempo. Si el botón de reiniciar está visible desde el inicio, el jugador puede reiniciar la partida antes de empezar. Si la sección de ataques se muestra siempre, alguien podría atacar sin haber elegido mascota.
La solución está en mostrar cada sección solo en el momento adecuado del flujo: primero elegir mascota, luego atacar y, al final, reiniciar [02:30].
¿Qué hace style.display = 'none' en JavaScript? Oculta visualmente un elemento HTML sin eliminarlo del DOM. El elemento sigue existiendo en el código, pero el usuario no puede verlo ni interactuar con él.
¿Cómo funciona la propiedad style.display?
Todos los elementos HTML tienen una propiedad style donde se guardan sus estilos visuales, los mismos que también puedes definir con CSS. El navegador, ya sea Chrome, Firefox o el que prefieras, asigna estilos por defecto a botones, textos y demás elementos [05:40].
Dentro de esa propiedad existe display, que controla si el elemento se renderiza o no. Los dos valores que vas a usar en este flujo son:
none: oculta el elemento por completo.
block: lo muestra como un bloque visible.
¿Dónde debo ocultar la sección de ataques al iniciar?
El mejor lugar es la función iniciarJuego, porque se ejecuta apenas carga el HTML. Ahí seleccionas el elemento por su ID y le aplicas display = 'none'.
javascript
function iniciarJuego() {
sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque')
sectionSeleccionarAtaque.style.display = 'none'
Si inspeccionas el DOM con las DevTools, verás que la sección sigue ahí. Solo está oculta visualmente.
¿Cómo muestro la sección cuando el jugador elige mascota?
La función seleccionarMascotaJugador se ejecuta al hacer clic en el botón de seleccionar. Ese es el momento exacto para cambiar el display de la sección de ataques a block y, al mismo tiempo, ocultar la sección de elegir mascota.
Así el jugador ve un solo paso a la vez: primero elige a Hipodogue o Capipepo, le da clic a seleccionar y entonces aparecen los botones de ataque [08:15].
¿Cuándo debo mostrar el botón de reiniciar el juego?
El botón de reiniciar solo tiene sentido cuando alguien ganó o perdió. Por eso lo escondes desde iniciarJuego con display = 'none' y lo muestras dentro de crearMensajeFinal, que es la función responsable de mostrar el resultado y deshabilitar los botones de ataque.
javascript
function crearMensajeFinal(resultadoFinal) {
sectionReiniciar.style.display = 'block'
}
Con esto, el flujo del juego queda así:
El jugador entra y solo ve la sección de elegir mascota.
Selecciona su mascota y aparece la sección de ataques.
Cuando alguna mascota llega a cero vidas, aparece el botón de reiniciar.
¿Por qué uso block y no otro valor?block muestra el elemento como un bloque que ocupa todo el ancho disponible. Existen otros valores como flex o inline, pero para secciones completas block es el que devuelve el comportamiento por defecto.
¿Qué ganas al controlar la visibilidad con JavaScript?
La lógica del juego ya estaba lista: selección aleatoria del enemigo, ataques por turnos, conteo de vidas de tres a cero y deshabilitar botones al terminar. Lo que añade style.display es control sobre la experiencia del usuario: cada pantalla aparece cuando debe.
Esta misma técnica la vas a reutilizar en formularios por pasos, modales, menús desplegables y cualquier interfaz donde quieras revelar contenido de forma progresiva. El siguiente paso natural es darle estilos con CSS para que tu Mokepon deje de tener fondo blanco y texto negro, y se vea como un juego de verdad.
¿En qué parte de tu proyecto vas a aplicar primero style.display? Cuéntame en los comentarios.
Gracias estimado profesor, en lo muy personal ya tengo mas de 30 años y siempre toda mi carrera me he orientado al soporte tecnico y con eso he sacado adelante a mi esposa y mis hijas, estoy queriendo cambiar el rumbo de mi vida profesional para ser Desarrollador Web y de aplicaciones, al momento siento que estoy en cero, pero quiero demostrarles a mis hijas que realmente lo que uno quiere puede lograrlo.
Un fuerte abrazo a todo el equipo de Platzi que hicieron posible este curso, y mas aun por poder tenerlo gratuito , no es facil ser sustento de familia y querer invertir en uno mismo, simplemente uno ve que siempre las cosas de los hijos son prioridad sobre nuestros deseos, y bueno, muy agradecido.
Muchas Bendiciones.
Mucha suerte para ti también Josue! :muscle::gren_heart:
¡Tú puedes con esto y más, Josue! 💪 Dale que sí 🚀
Felicidades jugador
Has finalizado la sección Desarrollando un juego con HTML y JavaScript, descansa aquí.
Por cierto, para deshabilitar los botones preferí crear una función para después llamarla en la función "crearMensajeFinal", me parece más estético:
Si se da click en el botón seleccionar sin escoger mascota, el juego permite continuar, lo que yo hice, es es disparar la función reiniciar para que no permita continuar si no se seleccionó la mascota del jugador
else{
alert('No se selecionó mascota');
reiniciarJuego();
}
Tengo otra manera.
else {
alert("Por favor seleccione una mascota")
sectionSeleccionarMascota.style.display = "block"
sectionSeleccionarAtaque.style.display = "none"
}
así no se desaparece la sección de selección de mascota y no abre la sección de ataques, y de paso no tiene que recargar toda la página
yo lo solucione de otra forma, hice una comprobación de que se seleccionara una mascota antes de seleccionar la mascota del enemigo, así que agregue el codigo de esta clase a esa misma comprobacion:
functionseleccionarMascotaJugador(){let inputHipodoge =document.getElementById("hipodoge");let inputCapipepo =document.getElementById("capipepo");let inputRatigueya =document.getElementById("ratigueya");let spanJugador =document.getElementById("mokepon-player");let seleccionado =0;if(inputHipodoge.checked){alert("Seleccionaste a Hipodoge como tu mascota") spanJugador.innerText="Hipodoge"; seleccionado =1;}elseif(inputCapipepo.checked){alert("Seleccionaste a Capipepo como tu mascota") spanJugador.innerText="Capipepo"; seleccionado =1;}elseif(inputRatigueya.checked){alert("Seleccionaste a Ratigueya como tu mascota") spanJugador.innerText="Ratigueya"; seleccionado =1;}else{alert("Selecciona una mascota para continuar")}if(seleccionado ==1){seleccionarMascotaEnemigo();let sectionSeleccionarAtaque =document.getElementById("select-atk") sectionSeleccionarAtaque.style.display="block";let sectionSeleccionarMokepon =document.getElementById("select-mokepon") sectionSeleccionarMokepon.style.display="none";}}
Me super encanta este nuevo curso! Voy entendiendo mejor que el primero que hicieron, se nota por mucho toda la planeación detrás. Me gusta también el cambio de profesores, aunque en una parte de mi corazón se queda cada uno de ellos. He aprendido muchísimo, y cada vez me siento más capaz de realizar nuevas cosas en mi camino ninja de ser desarrolladora web.
Lo mismo opino
ajajajajjajaja reallll cada vez se van poniendo mas complejas (de poquito a poquito)
jajjajajja tal cual , cada vez mas complejo
Pase mucho tiempo revisando el script porque la sección 1 no desaparecía, y resulto ser un simple error en el html.
PD: Si algo no les funciona, no olviden revisar también el html.
Algo similar me pasó a mi y al leer tu mensaje me fui a revisar el html y ahi estaba el error... muchas gracias
Casi me saco un ojo buscando el porque no desapareció y exactamente gracias a tu comentario encontré el error en html
Quiero compartir mi código hasta la clase 31, me ha llevado algunas semanas pero creo que esta bien dentro de lo aprendido. Toca mejorar la visualizacion con html y css
Tambien les comparto algunas capturas del gameplay.
En esta clase falto un detalle pequeño para el javascript,
y es que, cuando no seleccionamos una mascota y le damos al boton seleccionar, ok, nos sale una alerta de que tenemos que escoger una mascota, ahi todo bien, pero al darle aceptar a ese alert, nos lleva a elegir ataque, como si hubiesemos escogido mascota, y lo que sale es "Tu mascota tiene 3 vidas
La mascota Hipodoge (un ejemplo) del enemigo tiene 3 vidas
pero no se si solo me paso a mi o es en general, del resto, espectacular la manera de enseñar del profe, excelente!!
Por culpa de no darme cuenta de ese error lo tuvimos durante todo el curso hasta al penúltima clase. Muy buen ojo el tuyo que sí te diste cuenta antes.
Yo lo arregle asi:
functionseleccionarMascotaJugador(){let jugar =1;let sectionSeleccionarMascota =document.getElementById("seleccionar-mascota") sectionSeleccionarMascota.style.display="none"let sectionSeleccionarAtaque =document.getElementById("seleccionar-ataque") sectionSeleccionarAtaque.style.display="block"let inputHipodoge =document.getElementById("hipodoge");let inputCapipepo =document.getElementById("capipepo");let inputRatigueya =document.getElementById("ratigueya");let spanMascotaJugador =document.getElementById("mascota-jugador");if(inputHipodoge.checked){ spanMascotaJugador.innerHTML="Hipodoge";}elseif(inputCapipepo.checked){ spanMascotaJugador.innerHTML="Capipepo";}elseif(inputRatigueya.checked){ spanMascotaJugador.innerHTML="Ratigueya";}else{alert("Debes Seleccionar tu Mokepon Primero")// En esta parte puse la funcion reiniciar juegoreiniciarJuego(); jugar =0;}if(jugar ==1){seleccionarMascotaEnemigo();}}
Muchas gracias Juan David, eres un gran profesor, la verdad estoy sorprendida de como poco a poco he estado aprendiendo, aunque me costo mucho trabajo.
Ya tengo 38 años y estoy decidida a realizar este rumbo en mi carrera para sacar adelante a mi hija y mis padres, la verdad hasta el momento Fredy y tu me han dado mucho animo para continuar.
Hace 2 años tuve una desagradable experiencia en un bootcam y deje este sueño a tras, pero con estos pequeños pasos se que lo lograre, tarde o temprano.
Siento mucho que hayas tenido esa mala experiencia, Pame. Pero me alegra mucho que lo hayas intentado de nuevo y estés pudiendo aprender a tu ritmo. :green_heart::muscle:
Animo Pamela , yo recien parto en esto siempre tomo en cuenta las primeras palabras de Freddy , creo que asi en gran parte partio el curso.... "programar es saber lidiar con la fristracion" jaja que bueno que partio con esas palabras , sino creo que ya me abria ido hace rato del curso y de este proceso que cada vez se vuelve mas interesante!!! .... tremendas palabras que me llevo en cada modulo que hago de este curso ..un abrazo
Si a alguien le pasa que no desaparece la sección de Seleccionar Mascota, revisen el HTML. Yo tenía el siguiente error:
muchas graciaaas, tenia ese error en mi HTML y tu comentario fue de gran ayuda para poder solucionarlo
Muchas gracias!! no podía encontrar el error hasta que vi tu comentario 😄
Me gusto mucho esta opción de quitarle y ponerle algunas secciones del juego , lo hace mas interactivo. felicitaciones profe 💚💚.
ahora empecemos con CCS 💗 :)
Disfruta CSS, es lo más bello :3
Me encantó esta sección del curso y sobretodo esta ultima clase de mostrar y ocultar secciones! Gracias por todo Juan David!!
A mi me encantó la energía del profe, estuvo genial!!!
jajaja si a mi tambien por que es un impulso a hacer algo facil , incluso la pude hacer yo mismo sin mirar tanto el video como en otros capitulos :)
UNA PREGUNTA AL ESCRIBIR .style me lo reconoce como si fuera una variable mas y no como una propiedad . pongo el mismo código en la consola y funciona pero cuando lo guardo en el visual studio no hace nada Ayudaaaaaa no se que pasa ?? tendré el visual estudio desconfigurado
Muestranos tu código!
El mío se ve así y funciona muy bien
let seccionAtaque =document.getElementById("seleccionar-ataque"); seccionAtaque.style.display="none";
Tienes que volver a copiar lo de "let botonFuego...." para que funcione
Hola, todo me esta funcionando igual solo que donde debería desaparecer las opciones de elige tu mascota solo no desaparece sigue ahí y todo me esta funcionando bien es solo que esa parte no se va. Ya revise bien todo pero no veo que hice diferente. Gracias.
Yo lo veo todo bien 🤔 lograste solucionarlo?
No, no he logrado solucionarlo aun y ya he revisado varias veces. No se que podria ser los id todos estan iguales
Que genial forma de enseñar, felicitaciones Juan David sos un capo!
Al no seleccionar ninguna Mascota, me Aparece el Alert, pero de igual forma continua a la sección: Seleccionar Ataque.
Lo que hice fue agregar luego del Alert del else ocultar Seleccionar ataque y se mostrar solo el seleccionar mascota.
asi cada vez qeu caiga en el else solo me muestra seleccionar mascota.
¿Creo que después con la optimización del codigo veremos como mejorar esa parte?
}else{alert('Selecciona una mascota')let sectionSeleccionarMascota =document.getElementById('seleccionar-mascota') sectionSeleccionarMascota.style.display='block'let sectionSeleccionarAtaque =document.getElementById('seleccionar-ataque') sectionSeleccionarAtaque.style.display='none'}seleccionarMascotaEnemigo()
Yep, justo en la penúltima clase del curso nos encargamos de esto :D
Tengo una duda porque pones la propiedad block
En esta clase utilizaremos a JavaScript Para que algunas de las secciones no estén visibles todo el tiempo sino únicamente cuando se requiera
Ya que tenemos algunas cosas por mejorar
Como la selección de una mascota, la cual no es necesaria para empezar a atacar
El hecho de que el botón de reiniciar está habilitado todo el tiempo
Aparece toda la información al cargar la página y solo necesitamos una parte
Para ello, vamos a utilizar
let sectionSeleccionarAtaque =document.getElementById("seleccionar-ataque")sectionSeleccionarAtaque.style.display="none";
Dado que todo el código de los ataques ya se encontraba incluida en una section solo debiamos llamarla y cambiarle los estilos
Sin embargo, cuando seleccionemos la mascota deberá llamarse una función donde se debe tener el código:
let sectionSeleccionarAtaque =document.getElementById("seleccionar-ataque")sectionSeleccionarAtaque.style.display="none";
Dado que necesitamos mostrar la sección de ataques para poder jugar
De esta manera podemos ir ocultando partes que no nos interesa mostrar, como por ejemplo el enunciado de seleccionar mascota
let sectionSeleccionarMascota =document.getElementById("seleccionar-mascota")sectionSeleccionarMascota.style.display="none";
Así podemos ir jugando con el código para mostrar solo lo que realmente nos interesa
El código para mostrar un texto sería:
let sectionSeleccionarMascota =document.getElementById("seleccionar-mascota")sectionSeleccionarMascota.style.display="block";
