Javascript para interacción jugable

Javascript para jugar

La gamificación es un sustantivo derivado del verbo inglés game (competencia o actividad de diversión). A mi criterio, es un término innecesario en castellano de no ser por que es muy usado para referir al estudio de la interacción jugable entre objetos (o interfaces de pantalla) y usuarios.

Según la bibliografía revisada, ejercitaré con algunos tipos de interacción jugable mediante uso táctil o de mouse y desde una interfaz sencilla, pero desde el lenguaje Javascript.

Muchos de los conceptos a mostrar ya han sido explicados en secciones anteriores. En caso de que el lector desee profundizar, puede revisar la bibliografía dada aquí, o en el resto de las secciones o en otros repositorios actualizados.

Usar datos o estados de valores con variables, arreglos y objetos

Los elementos jugables deben mostrar estados o valores actualizados. Por ejemplo, un cambio en las cantidades iniciales que luego serán ganadas (o perdidas) por el jugador. O en el estado visual de un elemento (por ejemplo, cuando un objeto es tocado por el jugador). Es por eso que en todo lenguaje de programación existen componentes de alojamiento de valores llamados variables y constantes, entre otros:

En Javascript

// Valores
var puntaje = 0.0;
// La acción aún no se realiza
var accion = false;

// Condicion: Cuando la acción se active (sea true)
if (accion == true){
// Altera puntaje: suma una unidad
puntaje = 1;
console.log("Puntaje es " + puntaje);
}

// accion es igual a true
// -> Puntaje es 1

Una forma de alojar más de un valor es mediante los arreglos. Estos permiten guardar más de un valor ubicándolo en un índice numérico, del cero en adelante, que puede ser accedido mediante la sintaxis arreglo[indice]. Debemos recordar que las instrucciones del programa son ejecutadas de arriba hacia abajo, por lo que el último valor de la variable objetoNuevo será el más actualizado:

En Javascript

// Arreglo 
var mochilaDelmago = ["baculo", "piedra Magica", "pocion"];
// Variable aloja indice del elemento del arreglo
var objetoNuevo;

// Nuevo valor de objetoNuevo
// Indice será igual al mochilaDelmago[indice del elemento]
// La última actualización (de arriba hacia abajo) se tomará en cuenta
objetoNuevo = mochilaDelmago[0];
objetoNuevo = mochilaDelmago[1];
objetoNuevo = mochilaDelmago[2];

console.log("Mago obtiene " + objetoNuevo);
// -> Mago obtiene pocion

Los objetos también son un método para alojar (pero también para relacionar e identificar valores cuantificables) mediante pares propiedad:valor; o lo que es lo mismo, usando un nombre de propiedad junto con su valor respectivo. Tener en cuenta que, a diferencia de los arreglos, los objetos usan las llaves curvas o {}:

En Javascript

// nombre personaje y propiedades del personaje
// El ogro inicia con tres vidas
var ogro = {vidas: 3, fuerza: "media"}

// Accion que debe ser ejecutada
var golpeAlogro = true;

// Condicion
if (golpeAlogro == true){
// Si la accion se ejecuta, restar una vida
ogro.vidas --;
console.log("El ogro ahora tiene " + ogro.vidas + " vidas")
}

// golpeAlogro = true;
// El ogro ahora tiene 2 vidas

Operando datos desde funciones

Hasta ahora hemos resumido un conjunto de tipos de datos (un arreglo, un objeto y las variables son tipos de datos). Otro tipo son las funciones. Estas son códigos que permiten construir operaciones en secuencia que luego recibirán datos nuevos en cada sesión. Esos datos serán operables cada vez que la función sea activada desde el código:

En Javascript

/* Función con dos parámetros: 
cantidad de monedas y valor por moneda */
function monedas(cantidad, valor){
    // Si la cantidad de monedas es MAYOR a 5 
    if (cantidad > 5){valor = valor * 2} 
    // Si la cantidad de monedas es MENOR a 5
    if (cantidad < 5){valor = 0} 

        console.log("Tienes " + cantidad + 
        " monedas." + " Ganaste " + 
        valor + " puntos")

    // Alistar los valores por si son invocados
    return;
// Cierra función
}

// INVOCAR FUNCIÓN EN CADA SESIÓN DE JUEGO
// Tocaste 6 monedas, cada una vale 10
monedas(6, 10);
// -> Ganaste 20 puntos

// Tocaste 3 monedas, cada una vale 10
monedas(3, 10);
// Menos de 3 monedas, NO gana nada!!
// -> Ganaste 0 puntos

Alterando estados mediante condicionales

Las condicionales permiten alterar resultados según una condición de tarea, cumplida o no. En el ejemplo siguiente un mago ganará nuevos poderes solo si ha bebido 3 pócimas:

En Javascript

var mago = "Harry";
var cantidadPocimas = 4;

// Si la cantidad de pócimas es mayor a 3
if (cantidadPocimas > 3){
console.log(mago + " tiene nuevos poderes!")
} else {
// Si NO es menor a 3
console.log(mago + " NO tiene nuevos poderes!")
}

// pocimas = 4
// -> Harry tiene nuevos poderes!

Bucles o funciones de repetición

Los bucles en Javascript son sintaxis que repiten una o varias ejecuciones de código mientras una condición sea evaluada como cierta o true. Las funciones bucles son FOR (ejemplo abajo), WHILE, y DO-WHILE.

Los bucles también pueden ocurrir en los tipos de datos conocidos como arreglos, donde cada elemento contiene un índice de ubicación (del cero en adelante). La sintaxis que ubica un índice en un arreglo es arreglo [ numeroIndice ].

En Javascript

// Arreglo de tres elementos: con indice 0, 1, 2
var armas = ["Escudo grande", "Hacha", "Espada"];

// Función de reiteración
// Muestra lo que el guerrero tiene para defenderse
for (var indice=0; indice < armas.length; indice++){
console.log("El guerrero cuenta con: " + armas[indice]);
}

// Elección del arma del guerrero
// null = Sin elección
var eleccion = null;

// Guerrero escogió un arma
var eleccion = armas[0];

// Condición
if (eleccion == armas[0]){
console.log("Guerreo escogió " + armas[0]);
} else {
console.log("No tiene nada");
}

// SE MUESTRA EN CONSOLA
/* 
El guerrero cuenta con: Escudo grande
El guerrero cuenta con: Hacha
El guerrero cuenta con: Espada

ELECCIÓN:
Guerrero escogió Escudo grande 
*/

Siguiente: Manejo de eventos interactivos o event Handlers

BIBLIOGRAFÍA: