Condicionales anidados en JavaScript: concepto, funcionamiento y ejemplos
Capítulo 18: Múltiples condicionales if
Seguimos con el condicional if else
. En este punto vamos un poco más allá gracias a la anidación, ya que podremos crear condiciones más complejas.
Múltiples condiciones if
Puedes ir creando condicionales más complejos mediante el uso de varios if
separados o incluso, los puedes anidar, es decir crear condiciones dentro de condiciones.
Veamos un ejemplo orientado a videojuegos, seguro que hace esto menos aburrido. Lo primero para seguir este ejercicio práctico es crear tres variables. La tercera de momento no se inicializará.
let gameOver = false;
let vidas = 3;
let respuesta;
La variable gameOver
, por hacer un símil, es como un interruptor apagado (false
). Mientras el jugador tenga vidas, este interruptor se mantendrá apagado. Una vez las vidas lleguen a 0
, el interruptor se encenderá (true
) y mostraría una supuesta pantalla de Game over al usuario. Evidentemente, esto no va a ser un juego como tal. Va a ser la lógica que se ejecutaría en un posible juego. Este ejemplo, te servirá para aplicarlo a cualquier cosa, no solo a videojuegos. Es solo para que vayas obteniendo la lógica de programación y veas nuevas posibilidades con los condicionales.
Escribamos un primer if
. Este evalúa si la variable vidas
es igual a 0
. En caso de que así sea, se asignará automáticamente el valor de true
a la variable gameOver
, lo que desencadena un mensaje de alerta que dice Game over.
let gameOver = false;
let vidas = 3;
let respuesta;
if (vidas == 0) {
gameOver = true;
alert("Game over...");
}
Mejoremos un poco el código. Añadamos la posibilidad de que si el jugador se queda sin vidas, pueda decidir si quiere jugar o no.
En el siguiente trozo, añado un if
que no tiene nada que ver con el primero. Sin embargo, el segundo if
depende directamente de que se ejecute el primero, ya que solo se ejecutará si la condición de la variable gameOver
es true
.
En resumen, si el jugador se queda sin vidas y le salta el mensaje de Game over, se ejecutará un prompt()
que le pregunte si quiere seguir jugando. La respuesta del jugador se almacenará en la variable llamada respuesta
. La cual no estaba inicializada.
let gameOver = false;
let vidas = 3;
let respuesta;
if (vidas == 0) {
gameOver = true;
alert("Game over...");
}
if (gameOver == true){
respuesta = prompt("¿Quiere seguir jugando?");
}
Para terminar, añadamos un if else
pero esta vez, lo pondremos anidado dentro del segundo if
. Lo que quiere decirme que para que evalúe algo, deberá dar true
el if
que anida al if else
.
let gameOver = false;
let vidas = 3;
let respuesta;
if (vidas == 0) {
gameOver = true;
alert("Game over...");
}
if (gameOver == true){
respuesta = prompt("¿Quiere seguir jugando?");
if (respuesta == 'si'){
vidas = 3;
gameOver = false;
alert("Estupendo, ¡a seguir jugando!");
} else {
alert("¡Hasta la próxima");
}
}
Este nuevo if else
se ejecutará solo, en caso de que el jugador haya perdido (gameOver = true
). En ese momento se ejecutará el prompt()
. Si la respuesta del jugador es igual a 'si'
(quiere seguir jugando), se ejecutará el código del if
anidado que asignará un valor de 3
a la variable vidas
y dejaría el valor de gameOver
de nuevo en false
. Por lo que podríamos decir que vuelve a dejarlo todo como estaba. En el caso de que el jugador no diga explícitamente que 'si'
, le avisará con un mensaje de despedida.
Probemos este código. Para que haga algo, tienes que dejar el valor de vidas
a 0
editando el código, ya que de momento, no tenemos ningún sistema de eventos que haga perder vidas al jugador.
Le damos al botón aceptar y pregunta si queremos seguir jugando. Le decimos que si.
En el caso de introducir si, me dice a seguir jugando y lo deja todo como al principio.
Si le pones cualquier otra cosa al prompt()
que no sea si, te da el mensaje de despedida.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.