Motor de juegos narrativos y educativos
para aprender programación web

Crear funciones propias

Las funciones son una forma de organizar y reutilizar el código agrupándolo en estructuras que podemos llamar para que realicen una función concreta. Por ejemplo ¿recuerdas este código del apartado de objetos?

diálogos.añade("coloca_gema_cuerpo", 
	()=> tienes_gema_cuerpo = false,
	()=> gemas_colocadas++,
	()=> selecciona("gema-cuerpo").clase.oculta = false,
	"La gema comienza a brillar, flotando sobre el altar.",
)

Podríamos meter las tres instrucciones en una función de la siguiente manera:

diálogos.añade("coloca_gema_cuerpo", 
	pon_la_gema_del_cuerpo_en_el_altar,
	"La gema comienza a brillar, flotando sobre el altar.",
)

function pon_la_gema_del_cuerpo_en_el_altar(){
	tienes_gema_cuerpo = false
	gemas_colocadas++
	selecciona("gema-cuerpo").clase.oculta = false
}

Como ves la estructura básica de una función es bastante sencilla:

1. Las funciones típicas empiezan por la palabra reservada function.
2. A continuación se pone el nombre de la función.
3. Después vienen paréntesis entre los que podríamos indicar variables que se le pasan.
4. Finalmente tenemos unas llaves entre las cuales metemos las instrucciones que queramos ejecutar al llamar a la función.

Reutilización y estructuras de control

Pero lo más interesante de las funciones es reutilizar el código. Vamos a verlo en un mini juego que consiste en pulsar varios botones hasta que todos se iluminen en verde:

La dificultad de este rompecabezas está en que cuando pulsamos un botón varias luces se encienden o se apagan. Así que al intentar encender uno, puede que otros se apaguen. Así que tendremos una función para cada botón:

function pulsa_piedra_derecha(){
	piedra_derecha.alterna_clase("iluminada")
	piedra_superior.alterna_clase("iluminada")
	comprueba_encendidas()
}

function pulsa_piedra_izquierda(){
	piedra_izquierda.alterna_clase("iluminada")
	piedra_superior.alterna_clase("iluminada")
	comprueba_encendidas()
}

function pulsa_piedra_superior(){
	piedra_superior.alterna_clase("iluminada")
	comprueba_encendidas()
}

La función alterna_clase pone la clase "iluminada" si no la tenía, pero la quita si la tenía. Así por ejemplo al pulsar la piedra derecha, cambia la clase de la propia piedra derecha, pero también de la superior.

Y por último llaman a otra función que se encarga de comprobar si las tres piedras están encendidas a la vez:

function comprueba_encendidas(){
	const todas_iluminadas = piedra_superior.clase.iluminada 
			&& piedra_izquierda.clase.iluminada 
			&& piedra_derecha.clase.iluminada
	
	if(todas_iluminadas) rompecabezas.clase.abierta. = true
}

En esta función hay dos cosas nuevas: Primero el operador &&, que se puede traducir como la palabra "y". Es decir, todas están iluminadas si las piedras soperior, izquierda y derecha están iluminadas. La otra es el if (si). Es una estructura de control que hace que solo se ejecute el código que hay después de ella si se cumple la condición.