Curso de JavaScript desde cero

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á.

Mario Bros
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.

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.

Vidas juego pixel

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.

Mensaje Game over

Le damos al botón aceptar y pregunta si queremos seguir jugando. Le decimos que si.

Múltiples condicionales if anidados

En el caso de introducir si, me dice a seguir jugando y lo deja todo como al principio.

Múltiples condicionales if anidados

Si le pones cualquier otra cosa al prompt() que no sea si, te da el mensaje de despedida.

Múltiples condicionales if else

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.

Twitter

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.