Juegos de rol basados en texto, toma de contacto.

Introducción

Los juegos basados en texto, conocidos como juegos de elecciones o «Choose your Adventure», han existido desde hace mucho, popularizándose con el mítico «Dragones y Mazmorras» y sus infinitos derivados online, siendo devorados mayormente por Frikis y Nerds que milagrosamente salen de la virgocueva una vez al mes.

Pero esto no acaba aquí, en realidad comparte una estrecha relación con el «role-playing» y la escritura creativa que tanto han ayudado a grandes escritores a superar el temido bloqueo creativo, por no hablar de sus aplicaciones en ámbitos de enseñanza educativa y pedagogía de las relaciones sociales.

Pero en este blog solo veremos una estructura básica construida en JavaScript con la que formar un árbol de elecciones desde el que, con imaginación, perseverancia y tiempo, se pueden crear verdaderas maravillas.

Estructura básica JavaScript

Lo más importante de esto es el archivo JS, el cual explicaré a continuación:

Este trozo interactúa directamente con los elementos HTML para poder reconocerlos y trabajar con ello.

var images = document.getElementById("images");
var text = document.getElementById("text");
var buttonBox = document.getElementById("buttonBox");
var input = document.getElementById("input");

Luego una variable simple que sirva como nombre del personaje, necesitamos una variable diferente para cada personaje.

var soul;

Ahora toca definir el nombre del personaje que corresponde a la variable, decirle que se guarda al pulsar la tecla Enter (cuyo id en el teclado es 13) y decirle que elimine el cuadro de entrada de texto al pasar de ventana.

input.onkeypress = function (event) {
  console.log(input.value);
  if (event.key == "Enter" || event.keyCode == 13) {
    soul = input.value;
    input.parentNode.removeChild(input);
    advanceTo(scenario.two);
  }
};

Luego hay que decirle que reemplace en el texto una palabra clave que utilizaremos como identificador de personaje. En mi caso utilicé el número hexagesimal 000001.

var changeText = function (words) {
  text.innerHTML = words.replace("000001", soul);
};

Esto es para poner una imagen, yo no tengo ninguna porque abandoné la idea. Lo mejor en mi opinión es tener algún tipo de librería online como un blog de blogger donde tener publicadas las imágenes y poner en el código el enlace a estas, así no malgastas el almacenamiento de allá donde sea que lo publiques, que en mi caso al ser en un hosting gratuito se agradece el ahorro por las limitaciones de espacio de almacenamiento.

var changeImage = function (img) {
  images.style.backgroundImage = "url(" + img + ")";
};

El siguiente trozo de código genera un botón para cada opción de avance que halle en cada escenario, en realidad es más simple de lo que parece.

var changeButtons = function (buttonList) {
  buttonBox.innerHTML = "";
  for (var i = 0; i < buttonList.length; i++) {
    buttonBox.innerHTML +=
      "<button onClick=" +
      buttonList[i][1] +
      ">" +
      buttonList[i][0] +
      "</button>";
  }
};

Y por último un el trocito de código que hará avanzar los escenarios.

var advanceTo = function (s) {
  changeImage(s.image);
  changeText(s.text);
  changeButtons(s.buttons);
};

Escenarios

Cada escenario se compone de un nombre único que lo diferencie del resto, la imagen que en mi caso actúa como algo parecido a un banner (si hubiera utilizado alguna), el texto y los botones de avance.

El 000001 será sustituido automáticamente por el nombre del personaje correspondiente:

Ejemplo de estructura de un escenario:

id_escenario: {
    image: "https://url_de_una_imagen",
    text:
      "000001, conozco ese nombre.\nEscuchas los pasos de alguna bestia acercándose desde la oscuridad y ves una vieja edificación de madera abandonada gracias al tenue brillo místico que la luna arroja como un bálsamo de esperanza sobre espeluznante paisaje montañoso. Curiosamente, la puerta está abierta de par en par. ¿Qué es lo que quieres hacer?",
    buttons: [
      ["Opcion1", "advanceTo(scenario.id_escenario)"],
      ["Opcion2", "advanceTo(scenario.id_escenario)"]
    ]
  },

El primer escenario es algo distinto aunque, fundamentalmente, es lo mismo. Este contiene la pregunta que dará nombre al personaje.

id_escenario: {
    image: "https://url_de_una_imagen",
    text:
      "Vaya, parece que finalmente alguien ha llegado hasta aquí. ¿Sabes? El hecho de estés leyendo esto ya me hace feliz, seas quien seas.\n Por favor, dame una pista sobre ti.\n"
  },

Por último es importante introducir una pequeña línea de código fuera del árbol de escenarios, este debe llevarte al primer escenario al entrar a la página.

advanceTo(scenario.id_escenario);

HTML

Este es el index, la idea para que nadie haga trampas es vincularlo a un .js externo.

Al final del html, entre las clausulas de cierre del body y html, metemos el script.

</body>
  <script src="index.js"></script>
</html>

CSS

El .css ya queda a vuestro gusto, y aunque no es necesario para el correcto funcionamiento de la página hace mucha falta para darle ambientación. Ir más allá de las palabras es un excelente método para ambientar el juego, haciéndolo inmersivo y más entretenido.

Extras y Enlaces

Aquí podéis encontrar un pequeño ejemplo simple de lo que se puede lograr, perdonad si hay faltas de ortografía, todavía no es más que un borrador.

https://corchi.000webhostapp.com/

Y aquí podéis descargarlo.

https://drive.google.com/file/d/10V74TlgvpubF7YnjXux6nmXxpdGexnml/view?usp=sharing