Entendiendo el papel de JavaScript y CSS en el desarrollo de juegos web
Cuando nos embarcamos en la aventura de crear juegos web, nos enfrentamos a un universo de posibilidades y herramientas. Durante las clases anteriores, hemos descubierto que una página web no se compone únicamente de HTML; herramientas poderosas como JavaScript y CSS se convierten en aliados imprescindibles.
¿Qué es CSS y cómo mejora nuestros juegos?
CSS (Cascading Style Sheets) es una hoja de estilos que nos permite embellecer nuestros proyectos. Con CSS podemos:
Cambiar colores y textos.
Ajustar la ubicación de los elementos en la página.
Aplicar animaciones a los elementos HTML.
Pronto profundizaremos en todos los secretos que CSS tiene para ofrecernos. Mientras tanto, centrémonos en una aplicación práctica de JavaScript.
¿Cómo usar JavaScript para controlar la visibilidad de secciones en HTML?
En nuestro juego web, ciertas secciones solo deben estar visibles cuando son necesarias. A través de JavaScript, podemos hacer que elementos como la pantalla de selección de mascota o botones de ataque, solo aparezcan en momentos específicos. Pero, ¿cómo lo hacemos?
¿Cuál es el momento adecuado para ocultar o mostrar secciones en un juego web?
Para manipular la visibilidad de las secciones en un juego, debemos pensar estratégicamente. Por ejemplo:
Al cargar la página, solo mostrar la sección de selección de mascota.
Ocultar la sección de selección de ataque hasta que una mascota sea elegida.
Mostrar el botón de reiniciar solamente cuando el juego haya terminado.
El desafío está en identificar el lugar óptimo dentro de nuestras funciones de JavaScript para realizar estos cambios.
¿Cómo se ocultan o muestran elementos con JavaScript?
Aquí es donde la propiedad style.display entra en juego. Cada elemento HTML tiene una propiedad style que podemos ajustar. Al asignar style.display al valor 'none', ocultamos el elemento. Para mostrarlo, cambiamos su valor a 'block'.
Ejemplo práctico: Usando style.display en un juego web
Imagine que queremos ocultar la sección de ataque al inicio del juego. Ubicaríamos el siguiente código en la función de inicio:
let sectionSeleccionarAtaque =document.getElementById("seleccionar-ataque");sectionSeleccionarAtaque.style.display="none";
Cuando el jugador elija su mascota, mostraríamos la sección de ataque cambiando el display a 'block', así:
sectionSeleccionarAtaque.style.display="block";
Además, necesitaríamos ocultar la sección de selección de mascotas de manera similar, una vez que se haya hecho una elección.
Pensando más allá: ¿Qué más podemos hacer con JavaScript y CSS?
Hasta ahora hemos establecido una funcionalidad esencial para nuestro juego. Con JavaScript, hemos logrado controlar la experiencia del jugador, guiarlos a través del proceso de juego y mantener la interfaz limpia y enfocada. Pero siempre hay espacio para el crecimiento y la mejora. Nuestro juego funciona, pero a nivel visual aún podemos mejorarlo. Y es aquí donde CSS se convierte en nuestra herramienta estrella para llevar la presentación del juego al siguiente nivel.
Mantente atento a las próximas clases, donde desbloquearemos el potencial de CSS para hacer que nuestro juego no solo funcione correctamente sino que también brille con una interfaz impresionante. ¡El camino hacia la creación de juegos web está lleno de aprendizaje y sorpresas!
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";
