Proyecto Knowpoly

El proyecto del curso "Desarrollo de aplicaciones para Internet" es una oportunidad para que los estudiantes puedan aplicar los conocimientos adquiridos durante el semestre, para resolver un problema mediante la construcción de una aplicación web funcional, aunque de pequeñas dimensiones y siguiendo los estándares web. El proyecto podrá ser realizado en equipos de dos o tres estudiantes.

Creado en 1903, "Monopoly" es uno de los juegos de mesa más populares que existen en la cultura occidental. Es un juego que desarrolla habilidades de negociación, manejo de recursos, estrategia, matemática y otros. Sin embargo, el juego ha sido ampliamente criticado por su duración y por la dependencia del azar para ganar. Se quiere una adaptación de "Monopoly" que pueda jugarse en un tiempo corto y que no dependa tanto del azar sino de otras habilidades del jugador, como conocimiento de alguna disciplina. Debe además poder jugarse en línea por dos a cuatro jugadores. Se propone una adaptación en dos fases o entregables. En una primera fase se hará una aplicación JavaScript que permita a dos o más jugadores competir en una misma máquina. En una segunda fase, se permitirá a los jugadores competir cada uno desde su propia máquina.

Primer entregable [75%]

Para probar el concepto, sea un tablero de menor tamaño que el juego original. La knowpoly1 presenta una idea de un potencial tablero, aunque los estudiantes podrían adaptarlo o proponer uno distinto. El tablero propuesto consta de 16 casillas, distribuidas en 12 propiedades, 2 sillas calientes, la entrada, y una cueva de la ignorancia (cárcel). En los alrededores del tablero se listan los jugadores y sus puntuaciones (los estudiantes pueden cambiar su ubicación, si gustan). En el centro del tablero se encuentran algunos controles del juego: un dado de seis caras, un botón para terminar el turno, y las preguntas que se hacen en la silla caliente.

[15%] Tablero. Los estudiantes deberán "personalizar" el juego haciendo modificaciones al tablero propuesto. Al menos deberán cambiar los nombres de las propiedades y sus figuras. Cada equipo deberá representar los recursos del juego (el tablero, las preguntas, etc.) en alguna notación que sea manipulable por JavaScript. Por ejemplo, HTML5, CSS, JSON, SVG, XML, o una combinación de las anteriores. La implementación del tablero debe ser "responsive" en una orientación (horizontal o vertical, no es necesario que lo sea en ambas). Es decir, debe adaptarse para aprovechar los recursos del dispositivo donde se despliega para mejorar la experiencia de los usuarios. La mecánica del juego se explica en las siguientes reglas.

Reglas de juego

1. [4%] Registro de jugadores. Cuando se carga la aplicación en el navegador, crea espacio para cuatro jugadores, con nombres genéricos "Jugador 1" a "Jugador 4", y controles para que cada jugador escoja su ficha. Los jugadores anuncian su intención de participar. Cada jugador indica su nombre, accionando un nombre genérico y reemplazándolo por su nombre de jugador. Además escoge su color de ficha.
2. [5%] Inicio de partida. Cuando hayan dos o más jugadores registrados, el sistema habilita algún mecanismo para iniciar el juego. Por ejemplo, un botón "Iniciar partida". En la knowpoly1 podría lograrse con el mismo botón "Terminar turno". Cuando alguno de los jugadores activa el mecanismo habilitado, la partida inicia. El sistema asigna una cantidad inicial de puntos o dinero a cada jugador. Por ejemplo, en la knowpoly1 se asignó 500 unidades a cada jugador (reportado en forma 500/500, como se explica más adelante). Los estudiantes deben escoger otro monto inicial a un valor entre 750 y 2000. Luego, el sistema asigna cíclicamente turnos a los jugadores registrados. Por ejemplo, en la knowpoly1 el sistema da el turno a Julieta, luego a Romeo, luego a Julieta y así sucesivamente. Cuando el sistema asigna el turno a un jugador, lo resalta claramente en la interfaz (puede usar transiciones/animaciones por puntos extra en el proyecto). Por ejemplo, en la knowpoly1 se muestra un turno de Romeo. El área amarilla alrededor del nombre del jugador tiene un color más intenso que el resto de jugadores. Finalmente, el sistema habilita el dado al jugador en turno.
3. [5%] Lanzamiento y avance. El jugador acciona el dado, por ejemplo, tocándolo o haciendo click sobre él. El sistema simula el lanzamiento del dado (se pueden usar animaciones) y presenta el resultado al jugador. Automáticamente avanza la ficha del jugador tantas casillas como indique el resultado del dado (se pueden usar animaciones). Las acciones a tomar dependen de varias circunstancias como se explica en las reglas a continuación
4. [5%] Controles de compra. Si el jugador cae en una propiedad que es del banco, puede comprarla al banco si dispone de suficiente dinero. El sistema debe indicar el valor de la propiedad en la casilla de la misma. Por ejemplo, en la knowpoly1 los costos se indican en la esquina superior izquierda de la casilla. Para saber si el jugador puede adquirir una propiedad, el costo debe ser menor o igual que el monto de dinero disponible del jugador. Por ejemplo, en la knowpoly1, Romeo es el jugador activo, obtuvo un 3 y llegó a la "Propiedad 3". Dado que Romeo tiene 500 unidades de dinero (el primer número en la pareja "500/500"), el sistema habilita algún control que Romeo pueda accionar para realizar la compra. En la knowpoly1, el sistema convirtió el costo de la propiedad en un botón habilitado (se pueden usar transiciones/animaciones). Si el jugador no puede adquirir la propiedad, el sistema no habilita el control de compra, la propiedad no se subasta y sigue siendo del banco.
5. [5%] Compra de propiedad. Cuando un jugador compra una propiedad, acciona el control que el sistema le habilitó. El sistema solicita confirmación con un cuadro de diálogo. Si el jugador acepta, el monto es descontado de su dinero líquido, y el sistema asigna al jugador como el dueño de la propiedad. Por ejemplo, La knowpoly1 muestra una partida donde Julieta fue la primera en lanzar el dado y obtuvo 1. Su ficha roja se posicionó en la "Propiedad 1" cuyo costo son 50 unidades (esquina superior derecha). Dado que el primer valor en su monto inicial "500/500" es mayor o igual que el valor de la "Propiedad 1" (50), el sistema habilitó un control de compra (convirtió la etiqueta "50" en un botón "50"). Julieta accionó el botón y aceptó la pregunta de confirmación. El sistema descontó las 50 unidades del primer monto de Julieta, que quedó en "450" y le otorgó la propiedad. El sistema marca la propiedad de alguna forma para indicar que es ahora de Julieta (se pueden usar transiciones/animaciones). En la knowpoly1 el color en la zona superior de la casilla indica su dueño. Si el color es gris, el dueño es el banco, de lo contrario, se usa el mismo color del jugador que la haya comprado.
6. [3%] Finanzas del jugador. Cada vez que un jugador realiza una transacción, el sistema actualiza dos montos (se pueden usar transiciones). El primer monto indica la cantidad de dinero "líquido" que el jugador dispone. Con ese dinero puede realizar transacciones inmediatas, como pagar hospedaje, comprar propiedades, o construir. El segundo monto indica la riqueza total del jugador. Consta de la cantidad de dinero "líquido" más la suma de dinero que el jugador podría recuperar al vender todas sus propiedades y construcciones. Las reglas de ventas se explican a continuación.

7. [5%] Reglas de venta. Los jugadores sólo pueden comprar o vender propiedades, casas y hoteles al banco, y no entre jugadores directamente. Si un jugador compra una propiedad o construcción a un precio X al banco, y luego quiere venderla, el banco se la recibirá de regreso a aproximadamente 10% menos del precio X. El sistema debe indicar los precios en que los jugadores pueden vender las propiedades o construcciones que hayan adquirido. En la knowpoly1 estos precios se indican con números tachados. Por ejemplo, cuando Julieta llegó a la "Propiedad 1", presionó el botón "50" en la esquina superior izquierda para comprarla. Tras la compra, el botón se transformó en una etiqueta "50" para recordar el precio original de la propiedad. El sistema convirtió la leyenda "45" en un botón accionable. Si Julieta lo presiona, indica que quiere venderla de regreso al banco por ese monto.

   Los precios de venta afectan el cálculo de la riqueza del jugador. Por ejemplo, Julieta inició el juego con 500 unidades de dinero líquido y esa era toda la riqueza que poseía (500/500). Al comprar la "Propiedad 1", se descuenta el valor de la propiedad de su dinero líquido (500-50=450). Tras la compra, la riqueza total de Julieta cambia a las 450 unidades de dinero líquido que tiene, más la propiedad que adquirió. Aunque la propiedad costó inicialmente 50 unidades, Julieta sólo podría recuperar de ella 45 unidades al venderla al banco. Por esto, la riqueza de Julieta se calcularía como 450+45=495, que se despliega como el par ordenado 450/495 cerca de su nombre de jugador.

   Propiedad			Casa/hotel		Hospedaje
   #	Compra	Venta	Compra	Venta	0	1	2	3	4	5
   1	50	45	50	25	5	15	45	125	250	400
   2	60	55	50	25	6	20	55	150	300	480
   3	75	70	75	40	8	25	70	200	400	640
   4	85	75	75	40	9	25	80	225	450	720
   5	105	95	100	50	11	35	100	275	550	880
   6	115	105	100	50	12	35	110	300	600	960
   7	135	120	150	75	15	45	135	375	750	1200
   8	145	130	150	75	16	50	145	400	800	1280
   9	160	145	175	90	18	55	160	450	900	1440
   10	170	155	175	90	20	60	180	500	1000	1600
   11	190	170	200	100	23	70	205	575	1150	1840
   12	200	180	200	100	25	75	225	625	1250	2000

8. [7%] Venta de propiedad. Al vender una propiedad se invierte el proceso de compra, pero el banco se queda con aproximadamente un 10% de servicio. Sólo el jugador dueño puede vender una propiedad si en ella no tiene construcciones. Por ejemplo, en la knowpoly1 si Julieta presionara el botón "45", el sistema solicita confirmación con un cuadro de diálogo. Si el Julieta confirma la venta, el banco le devolverá 45 unidades. Su dinero "líquido" se actualizaría a 450+45=495 y su riqueza se mantendría igual en 495. Es decir, al coincidir estos dos montos, Julieta habría convertido todas sus propiedades y construcciones a dinero "líquido". Luego el sistema marcaría la "Propiedad 1" como pertenencia del banco, pintando la zona superior de gris. El botón de vender "45", se deshabilitaría retornando a una etiqueta, y el botón de compra "50" se rehabilitaría, dado que el jugador en turno (Julieta) tiene suficiente dinero líquido para comprarla (495 >= 50).
9. [3%] Controles de compra-y-venta. Para poder comprar una propiedad del banco, el jugador en turno tiene que estar posicionado en dicha propiedad. Para vender una propiedad, el jugador en turno puede estar en cualquier casilla del juego. Es decir, cuando un jugador adquiere el turno, el sistema deshabilita todos los botones de compra del tablero, excepto el de la casilla donde está ese jugador en caso de que pueda adquirirla. Y cuando un jugador adquiere el turno, el sistema habilita todos los botones de venta de las propiedades del jugador en turno y deshabilita los botones de venta de las demás propiedades del tablero.

10. [10%] Construcción. A todos los dueños de propiedades se les permite construir en ellas casas y hoteles para incrementar su plusvalía. Para poder construir un jugador debe cumplir tres requisitos: (1) ser el jugador en turno, (2) ser el dueño de la propiedad, y (3) tener suficiente dinero para construir. Es decir, cuando un jugador adquiere el turno, el sistema habilita controles de construcción en todas las propiedades de ese jugador en el tablero. El jugador puede accionar dichos controles para comprar casas y hoteles (construir) o venderlos (demoler). La building muestra cómo se puede realizar este proceso y se explica paso a paso a continuación (los números en círculos rojos coinciden con los números en la lista).

    

    1. Romeo está en la entrada, lanza el dado y obtiene 3. Llega a la "Propiedad 3". Dado que su dinero líquido 500 es mayor o igual que el valor de la "Propiedad 3" (75), se habilita el botón de compra en la esquina superior izquierda. Romeo lo presiona y responde positivamente la pregunta de confirmación.
    2. El sistema procesa la compra de la propiedad y actualiza el dinero líquido del jugador 500-75=425 y su riqueza 500-75+70=495. Deshabilita el botón de compra y habilita el botón de venta 70. El jugador se convierte en el dueño de la "Propiedad 3". Inicialmente no ha hecho construcciones en ella. Los datos sobre construcción aparecen en la parte inferior de la casilla, en forma de tabla. En la primera columna se encuentra el precio de venta de una casa u hotel (40 para la "Propiedad 3"), y debajo el costo del hospedaje con 0 construcciones (8). Por conveniencia, el hospedaje actual se copia en la parte superior derecha de la casilla, que indica lo que tiene que pagar otro jugador que caiga en la propiedad. Dado que la "Propiedad 3" es pertenencia del jugador de turno y tiene dinero, se habilita el botón de compra de una casa (columna 2 con los valores 75 y 25). El jugador lo presiona. El sistema solicita confirmación de construcción de una casa. El jugador confirma.
    3. El sistema procesa la compra de la casa y actualiza el dinero líquido del jugador 425-75=350 y su riqueza 495-75+40=460. Dado que el dueño ha construido, la plusvalía de la propiedad ha incrementado y los otros jugadores tendrán que pagar más hospedaje si caen en ella (25 unidades). Dado que sólo se pueden vender propiedades sin construir, el botón de venta 70 en la parte superior también se ha deshabilitado. En la parte inferior, el sistema convierte el botón de compra de la primera casa (75) a un botón de venta de la misma (40). El costo de venta de una construcción que estaba en la primera columna (40) pasa al costo de compra de las mismas, con el fin de que el jugador pueda recordarlo. Dado que el jugador tiene dinero líquido suficiente para construir otra casa, se habilita el siguiente botón en la tercera columna. El jugador lo presiona y confirma la pregunta.
    4. El sistema procesa la compra de la segunda casa y actualiza el dinero líquido del jugador 350-75=275 y su riqueza 460-75+40=425. Con la nueva construcción el hospedaje para otros jugadores se incrementa a 70 unidades. El botón presionado (75) se convierte en un botón de venta (40). El botón anterior a ese (en la columna 2) se deshabilita. Dado que Romeo tiene dinero líquido suficiente, el botón de construcción de vivienda siguiente (columna 4) se habilita. Romeo lo presiona y confirma la pregunta.
    5. Se repite el proceso de construcción de vivienda: Se actualizan los montos del jugador, el hospedaje de la propiedad. Se convierte el botón presionado en un botón de venta. El botón de venta anterior se deshabilita. El botón de compra siguiente se habilita si el jugador tiene dinero suficiente. Supóngase que de nuevo Romeo presiona el botón de construcción en la quinta columna y confirma.
    6. Se repite el proceso anterior. Esta vez se habilita la compra del hotel. Supóngase que Romeo lo presiona y confirma.
    7. Se repite el proceso anterior. Romeo ha construido en esta propiedad un hotel y no puede seguir construyendo, por tanto, no se habilitan más botones para construir. A este punto su dinero líquido es 50 unidades y su riqueza 320 unidades. Supóngase, con fines ilustrativos, que decide vender el hotel. Es decir, presiona el botón 40 en la última columna y confirma.
    8. El sistema procesa la demolición, como se explica en el siguiente punto.
11. [8%] Demolición. La demolición es el proceso inverso de construcción. Dado que demoler un edificio tiene costos muy altos, el banco los recibe aproximadamente a la mitad del precio en que los vendió. Mientras sea su turno, un jugador puede demoler las construcciones de cualquiera de sus propiedades. Las construcciones en una propiedad se demuelen en el orden inverso en que fueron construidas. El proceso de demolición tiene las siguientes tareas: Se reintegra cerca de la mitad del costo de la construcción al dinero líquido del jugador. Por ejemplo, en el paso 8 de la building, Romeo recupera 50+40=90 en su dinero líquido. Su riqueza se mantiene inalterada. El botón de venta se convierte en un botón de compra, y si se habilita o no en función de si el jugador tiene suficiente dinero o no para construir de nuevo. Se disminuye el hospedaje de al propiedad a la construcción anterior (columna de la izquierda). Si hay un botón anterior de demolición, se habilita. Si en la propiedad no quedan construcciones, se rehabilita el botón de venta de la propiedad en la parte superior de la casilla.

12. [8%] Hospedaje. Tras lanzar el dado un jugador realiza un recorrido por las propiedades del Knowpoly. Al terminar su recorrido debe quedarse a descansar en la propiedad en que se haya detenido hasta que le llegue de nuevo su turno de continuar el viaje. Si la propiedad es de su pertenencia, nada pasa. Pero si la propiedad es pertenencia de otro jugador, deberá pagar obligatoriamente por su estancia. Si el dueño de la propiedad ha construido, deberá hospedarse en una de las casas u hoteles que el dueño tiene en ella. El monto del hospedaje, indicado en la esquina superior derecha de la propiedad, se resta del dinero líquido del jugador visitante y se suma en el dinero líquido del dueño de la propiedad.

    Si el saldo del jugador es positivo se habilita el botón "Terminar turno". Si es negativo, el jugador está en deuda y el botón de "Terminar turno" no se habilita. El jugador debe demoler o vender propiedades hasta que su monto sea cero o más. En tal momento, el botón "Terminar turno" se habilitará. Si la riqueza del jugador llega a cero y su monto líquido sigue negativo (en deuda), se considerará en bancarrota, y será eliminado del juego. Su nombre será tachado en el tablero y no tendrá más turnos. Si sólo queda un jugador que no está en bancarrota, la partida termina y ese será el ganador. El juego lo felicitará enérgicamente.

13. [10%] Silla caliente. Con el pago de hospedaje, los jugadores transfieren dinero entre ellos. Sin embargo, los jugadores necesitan mecanismos para producir riqueza. Knowpoly provee dos mecanismos. Cada vez que un jugador pasa por la entrada, cobra 100 unidades de viáticos que se acreditan a su dinero líquido. El segundo mecanismo es un concurso de televisión llamado la "silla caliente" que premia a los jugadores por su conocimiento.

    Al detenerse en la estación de televisión, el jugador sube a la silla caliente. El sistema le plantea una pregunta de selección única y un premio económico, en el centro del tablero. El jugador responde la pregunta marcando alguna de las opciones. Si acierta, recibe el dinero que se acredita a su monto líquido. Si falla la pregunta, recibirá el descontento de la audiencia de la ciudad del conocimiento, y será castigado con la mitad del premio de la pregunta. Sin embargo, la televisora sólo ofrece premios o castigos monetarios, no interfiere con las propiedades. Por eso, si el jugador falla la pregunta y su monto líquido es menor que la mitad del premio, su saldo no se hará negativo, sino 0. En cualquier caso, acierte o falle la pregunta, el botón "Terminar turno" se habilitará.

14. [6%] Cueva de la ignorancia. La cueva es un famoso lugar en las afueras de la ciudad del conocimiento, donde son llevados aquellos que deban ser sometidos a prueba, para saber si son dignos o no de continuar transitando por la ciudad de la sabiduría. Un jugador en la cueva de la ignorancia será sometido a una serie de preguntas, una por turno. Las preguntas se realizan de la misma forma que en la "silla caliente". Sin embargo, los premios de la pregunta son realmente castigos. Si el jugador acierta, no gana ningún dinero, pero habrá demostrado ser un ciudadano digno y en el próximo turno lanzará los dados como de costumbre. Si el jugador falla la pregunta, será castigado reduciendo los puntos de la pregunta de su dinero líquido, y éste se podrá hacer negativo. En tal caso, el jugador deberá demoler o vender propiedades para hacerlo cero o positivo con el fin de continuar. Si el jugador no tuviera dinero suficiente, declarará bancarrota y saldrá del juego, como se explicó en la regla 12 (Hospedaje). Si tras fallar la pregunta su saldo es 0 o más, se mantendrá en la cueva, y en el siguiente turno será sometido a prueba con otra pregunta, hasta que responda correctamente o quede en bancarrota.

Para construir su solución, los estudiantes requieren un banco de preguntas. Entre más extenso sea este banco, más realista será la aplicación. El archivo questions.js contiene una lista de preguntas en formato JSON que los estudiantes pueden enlazar directamente en sus soluciones:

]]>

Para que el banco de preguntas sea extenso, cada estudiante debe enviar al menos 10 preguntas relacionadas con la tecnología web (HTTP, XML, HTML, CSS, JavaScript, AJAX, etc.) en notación JSON al profesor (por correo electrónico). Dentro del archivo questions.js hay comentarios que explican la sintaxis esperada. El profesor agregará las preguntas que reciba al archivo questions.js.

Opcionales

1. [6%] Diseña la solución JavaScript aplicando el patrón modelo-vista-controlador.
2. [4%] Aplica transiciones, transformaciones, o animaciones CSS3, para hacer más claro el mensaje de las acciones en el juego.
3. [5%] Almacena la sesión de los jugadores en el navegador, de tal forma que si el navegador se cierra, al recargar la página restaura la sesión (ver Web Storage). En tal caso, provee controles para terminar y crear una nueva sesión.

Simplificaciones sobre el juego original

Las siguientes son algunas observaciones para quienes conocen las reglas del juego original "Monopoly".

1. En Knowpoly, los jugadores no pueden negociar propiedades entre ellos directamente (hacer tratos). Toda compra o venta de propiedades y construcciones debe hacerse directamente con el banco.
2. Un jugador puede comprar o construir únicamente cuando tiene su turno.
3. No hay grupos de propiedades con un mismo color. Por tanto, no se necesita esperar a tener todas las propiedades del mismo color para poder construir.
4. No existen servicios (agua, electricidad), ferrocarriles, ni sus reglas especiales (como pagar 10 veces lo que indiquen los dados).
5. No existen regresiones. Los jugadores siempre avanzan en la misma dirección.
6. Sólo se lanza un dado y ningún número es especial. En el juego original hay dos o tres dados (dado veloz), y cuando todas las caras de los dados salen igual, hay reglas especiales.
7. Las propiedades no se subastan.
8. No hay casillas de impuestos, parada libre, o irse a la cárcel. Tampoco existe el concepto "de pasadita nada más".
9. La cueva del desconocimiento se parece a la cárcel, pero las reglas para salir son distintas. No se puede pagar por salir, no existe una tarjeta especial para salir. En Monopoly, el jugador no puede permanecer más de 3 turnos en la cárcel, mientras que en Knowpoly, puede permanecer en la cueva del desconocimiento indefinidamente mientras no quede en bancarrota.
10. En Monopoly para construir un hotel se deben regresar las 4 casas. En Knowpoly las construcciones no se regresan, ya que el banco tiene infinitas casas/hoteles disponibles. Por tanto, nunca hay escasez de construcciones.
11. En Monopoly existen hipotecas. En Knowpoly no.
12. Los jugadores pueden construir o demoler estando en la cueva del desconocimiento. En algunas variantes de Monopoly, no es permitido hacer negocios desde la cárcel.

Segundo entregable [25%]

(Pendiente)