Programar un Gestor para juegos de rol – Funciones básicas del Master

Bienvenidos a la sexta entrega de esta guía de programación para juegos de rol o rpg. En este capítulo os explico algunas de las funciones que va a tener el director de juego para interactuar con los jugadores, entre ellas el devolver el turno de juego y modificar los valores de las habilidades o características de los personajes jugadores.

En este momento ya he hecho uso de la librería de bootstrap de twitter, he decidido utilizarla para ahorrarme bastante código, aunque en primera instancia pensé en desarrollarlo todo desde cero, pero viendo que el tiempo apremia y que quiero verlo funcionando cuanto antes (y no soy muy crack del diseño) he preferido utilizar este código para facilitar el trabajo.

El uso es bastante sencillo y no voy a entrar a explicar ahora mismo como funciona, aunque tengo la intención de hacer algún tutorial explicando exactamente como lo he utilizado.

En principio he utilizado los botones con su estilo y también la más que útil ventana popup con estilo modal, para que una vez se abre la ventana, sea obligatorio el cerrarla antes de seguir la gestión del juego.

En estas ventanas he añadido varios códigos al vuelo que se lanzan al hacer clic sobre el personaje. Hasta el momento lo creo todo en el momento, aún sabiendo que no es una manera muy óptima por cargar de consultas y llamadas al server, pero si tenemos en cuenta que en un tiempo, estará cada vez más automatizado y estos parámetros pueden estar cambiando cada poco, es una posible opción por ahora.

Las opciones que cargan en estas ventanas son:

1. Características de personaje: Esta tabla es nueva, se incluyen los parámetros del jugador que son “inamovibles” o que forman parte intrínseca del jugador como su fuerza, su inteligencia y demás. Esta tabla como la de habilidades también es puede modificar a tiempo real.
2. Habilidades del personaje: En esta tabla se guardan tal y como se expone, las habilidades del mismo, abrir cerraduras, robar, saltar, pescar y todo aquello que se considere una habilidad estará dentro de esta opción. Actualmente carga los parámetros de una tabla, pero en breve se podrán gestionar también desde la propia ventana del director de juego, pudiendo añadir o eliminar las habilidades que quiera. Así servirá para cualquier tipo de juego
3. Escenario de juego: Parte muy importante del juego y que se me ha ido complicando según he ido analizando la lógica de juego. Hasta le momento lo había planteado de manera que todos los jugadores están en el mismo escenario, pero no, todos los jugadores comparten una aventura, pero en realidad pueden estar en diferentes escenarios, llámese escenario a diferentes ubicaciones dentro de la aventura,de esta manera una posada es un escenario y la parte exterior de esta es otro escenario, pudiendo estar uno o varios dentro de la posada y no compartiendo el exterior, a no ser que se el escenario esté construido de esta manera y no es lo recomendable para crear esa independencia de juego y que no se enteren los demás de lo que se hace en un lado u otro. Así que una vez explicado esto, desde escenario, se puede ubicar al personaje donde se quiera a golpe de clic.

Faltarían dos opciones más, una es la de “devolver turno” que lo que hace es desbloquear al jugador para que pueda volver a realizar una acción y otra que será la de “mover”, actualmente no programada pero que el director de juego podrá utilizar para mover al jugador al lugar que le venga bien. Por ejemplo: Si un personaje jugador se mueve por encima de un puente destrozado y el master lanza para ver si el puente te rompe, es posible que tenga que situar al personaje en medio del puente indicando que el puente se ha roto y se ha quedado colgado del mismo o se ha partido la crisma por el golpe.

A nivel de código, no he realizado ninguna rareza con respecto a los anteriores tutoriales, es decir, las llamadas JSON desde JQuery que atacan a PHP y este a su vez devuelve o escribe la información en MySQL.

Quizás el paso más interesante es el de tener ya todas las habilidades y la selección del jugador. Este código lo dejo aquí expuesto, el resto es muy parecido pero cambiando el contenido a mostrar en las diferentes ventanas:

[codesyntax lang=”javascript”]

$(idPersonaje).click(function() {
						var personajeSeleccionado = $(this).attr("idpersonaje");
						cambiaHabilidades(personajeSeleccionado);
						cambiaEscenario(personajeSeleccionado);
						cambiaCaracteristicas(personajeSeleccionado);
						var nombre = '<h3>'+$(this).attr("nombre")+'</h3>'
						var mover = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupMover">Mover</button>';
						var caracteristicas = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupCaracteristicas">Caracteristicas</button>';
						var habilidades = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupHabilidades">Habilidades</button>';
						var escenario = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupEscenario">Escenario</button>';
						var turno = '<button type="button" class="btn btn-primary" onClick="devolverTurno('+personajeSeleccionado+');">Turno</button>';
						$("#menuSuperior").html(nombre+mover+turno+caracteristicas+habilidades+escenario);

					});

[/codesyntax]

Aquí lo que hago con JQuery es crear un evento clic sobre el jugador “idpersonaje” cargo las diferentes tablas de habilidades, escenario y características y luego monto “al vuelo” cada uno de los botones del menú superior con clase de estilo de bootstrap.

La potencia de esta librería es que declarando un button con el atributo data-toggle=”modal” estamos diciendo que la capa indicada en data-target=”#popupEscenario” es de tipo modal y se utilizará como una ventana popup al hacerse la llamada pulsando desde el botón. Esta función de pulsado ya viene implementada dentro de la propia librería por lo que no hay que hacer nada más.

El resto del código a utilizar para este tipo de capa:

[codesyntax lang=”html4strict”]

<!-- Modal Escenario-->
<div class="modal fade" id="popupEscenario" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
        <h4 class="modal-title" id="myModalLabel">Escenario</h4>
      </div>
      <div id="menuEscenarioMaster" class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

[/codesyntax]

Como veis nada del otro mundo, simple html con clases para que Bootstrap haga lo suyo. Un copia pega en toda regla 😀

Y como no hay 2 sin 3, pues voy a poner el código que carga en la capa “menuEscenarioMaster” indicada en el código anterior, para que se rellene:

[codesyntax lang=”javascript”]

// Carga los diferentes escenarios de una aventura en un listado para selección del Master
	function cambiaEscenario(personaje){
		jQuery.post("funciones.php", {
			accion: 'cargaEscenarioMaster'
			}, function(data, textStatus){
				var listaHabilidades = JSON.parse(data);

				var tabla = '<table width="100%" border="0" cellspacing="3" cellpadding="0">';
				tabla += '<tr><th>Nombre Escenario</th><th></th></tr>';

				for (x=0; x < listaHabilidades.length; x++)
				{
					tabla += '<tr><th  align="right">' + listaHabilidades[x]['nombre'] + '</th><th><button type="button" class="btn btn-primary btn-sm" onClick="guardaEscenarioMaster('+listaHabilidades[x]['idEscenario']+','+personaje+')">></button></th></tr>';

				}
				tabla += '</table>';
				$("#menuEscenarioMaster").html(tabla);
			});

		}

[/codesyntax]

El recorrido completo para resumir sería

1. Se crea el evento clic sobre la imagen del personaje
2. Al hacer clic se llama a las diferentes funciones para rellenar la información de este en las diferentes ventanas.
3. Al pulsar sobre el botón indicado, mostrará la ventana en formato popup modal.

Espero que sea entendible, de todas maneras si tenéis dudas de por qué lo hice así podéis preguntarme, seguramente hay otras formas mejores de hacerlo. Como cargar la información al pulsar el botón ¬¬ pero cuando lo estoy programando voy a hacerlo funcional y ya más adelante buscaré la manera de optimizar 😉

Quería agradecer a todos los que estáis comentando y animando a seguir que no sois pocos! a todos los que ya estáis ayudando de forma activa! A ver si en pocas publicaciones más tenemos una parte funcional y podemos hacer las primeras pruebas!

Como siempre, si te ha gustado comparte! y sino te ha gustado, coméntame que cosa mejorarías!