Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática
CI-2413 Desarrollo de aplicaciones web
Profesor: Jeisson Hidalgo Céspedes
Proyecto: Juego "Basta" (Stop)
El proyecto del curso "Desarrollo de aplicaciones para Internet" es una oportunidad para que el estudiante pueda emplear los conocimientos adquiridos durante el semestre, para construir una aplicación web realista aunque de pequeñas dimensiones. En este caso, una implementación web del juego "Stop". El proyecto podrá ser realizado en parejas.
El juego llamado "Basta" (o en inglés "Stop") pretende que varios jugadores compitan por levantar en el menor tiempo una lista de palabras, todas iniciando con una misma letra escogida al azar, y las palabras restringidas a varias categorías: "Nombre", "Apellido", "País o ciudad" (Lugar), "Fruto", "Animal", "Verbo", y "Cosa o sustantivo". La primera persona que complete la lista, dirá "Basta" o "Stop", para indicar a los demás jugadores que deben detenerse. Las respuestas de los jugadores son entonces calificadas en proporción a su originalidad o singularidad. Cada jugador acumula a su marcador los puntos obtenidos y se inicia otra partida, escogiéndose otra letra al azar. Así sucesivamente hasta que los participantes acuerdan terminar el juego. El ganador será aquel con mayor número de puntos acumulados.
A modo de ejemplo, supóngase que tres visitantes ficticios de su sitio web, Laura, José y Rafael, deciden jugar "Stop" utilizando su implementación. Tras registrarse como jugadores en su sitio web, los tres inician una sesión de "Stop". El servidor web les crea una sesión de juego y arranca la primera partida. El servidor web escoge una letra al azar (supóngase que la "M") y les presenta un formulario donde pueden escribir sus respuestas. La Figura 1 muestra este posible formulario para la jugadora Laura.
| Partida: 1 | Letra: M | 1:16 |
| Jugador | Nombre | Apellido | País o ciudad | Fruto | Animal | Verbo | Cosa o sustantivo | Puntuación |
|---|---|---|---|---|---|---|---|---|
| Laura | ||||||||
| José | ||||||||
| Rafael |
|
1:16 |
Cada jugador comienza a escribir palabras iniciadas con "M" en el formulario tan rápido como puede. El botón "Stop" estará deshabilitado hasta que se hayan contestado todos los campos del formulario con palabras que inician con la letra de la partida ("M" en este caso). Supóngase que el jugador Rafael es el primero en contestar y presionar este botón. Inmediatamente la partida cambia al estado "detenido" ("stopped") en el servidor web, cuyo efecto propagado inmediatamente a los navegadores de todos los demás jugadores.
Cuando uno de los jugadores presiona el botón "Stop" los campos de todos los jugadores son reemplazados por las palabras que introdujeron, evitando que las modifiquen. Además las palabras de los demás jugadores son reveladas. Es el momento de calificar las respuestas y calcular el puntaje obtenido de cada jugador. Sería ideal que la computadora hiciera esto, pero necesitaría mucho dominio del lenguaje natural, por lo que la responsabilidad se traslada a los jugadores, tal como ocurre en el juego tradicional con papel.
El sistema debe proveer algún mecanismo para permitir a cada jugador calificar las respuestas de los demás. Se pueden utilizar botones cerca de la palabra (como se ve en la Figura 2), o se puede hacer que cada palabra reaccione a los clics del ratón para cambiar su estado de correcto a incorrecto cíclicamente, o algún otro mecanismo.
| Partida: 1 | Letra: M | 1:17 |
| Jugador | Nombre | Apellido | País o ciudad | Fruto | Animal | Verbo | Cosa o sustantivo | Puntuación |
|---|---|---|---|---|---|---|---|---|
| Laura | marisol | mora | marruecos | mango | mono | manej | ||
| José | marielos ![]() |
mora ![]() |
mani ![]() |
|||||
| Rafael | maria ![]() |
mora ![]() |
marruecos ![]() |
mora ![]() |
motillo ![]() |
montar ![]() |
monitor ![]() |
|
2:07 Rafael dijo "Stop" |
Por ejemplo, si el desarrollador decide utilizar botones; a la par de cada respuesta se insertan dos botones: "Correcto" e "Incorrecto" como se ve en la Figura 2. El jugador deberá calificar cada respuesta de los demás jugadores presionando el botón respectivo. Una vez que se haya presionado un botón para una respuesta, el color de la misma (el color de fondo o algún otro estilo) es aplicado para hacer evidente al jugador cuáles respuestas ya han sido calificadas y cuáles están aún pendientes. Cuando haya terminado de calificar todas las respuestas de los demás jugadores, un botón "Enviar" será habilitado.
Al presionar el botón "Enviar" el servidor web recibirá las calificaciones y las almacenará en la partida. Cuando todos los jugadores hayan calificado a los demás, el servidor web calculará la puntuación de cada uno y terminará la partida.
El cálculo de las calificaciones es sencillo. Cada respuesta correcta pesa 10 puntos. Un jugador que obtenga todas sus respuestas correctas acumulará 70 puntos en su marcador. Sin embargo, cuando hay tres o más jugadores existe la posibilidad de que algunos consideren una misma respuesta como correcta y otros como incorrecta. En estas situaciones el sistema puede promediar las calificaciones, lo que obtendrá un porcentaje de los 10 puntos. Por ejemplo, si hay cinco jugadores, el sistema obtendrá cuatro calificaciones por cada respuesta; si para una respuesta tres jugadores opinan que es correcta y uno que es incorrecta, el jugador obtendrá 3 / 4 * 10 = 7.5 puntos por esa respuesta. Para el ejemplo de la Figura 3, supóngase que Laura consideró como correcto que "maní" es una fruta, pero Rafael la calificó como incorrecto; lo cual provoca que José obtenga 1 / 2 * 10 = 5 puntos por esta palabra. Es conveniente indicar con colores o de otra forma las respuestas que fueron incorrectas, parcial o completamente correctas (Figura 3).
Nótese que cuando un jugador termina de calificar y presiona el botón "Enviar", pueda que tenga que esperar a que los demás jugadores terminen de calificar. Durante esta espera es conveniente indicarle al jugador la razón de la misma. Una vez que todos los jugadores hayan calificado, el sistema calcula los puntajes obtenidos, los almacena en la partida, y los despliega en la última columna de la tabla de partida de cada jugador como se ve en la Figura 3. Además actualiza los marcadores de cada jugador y los despliega en algún lugar de la pantalla, como se hizo en la parte inferior de la Figura 3.
| Partida: 1 | Letra: M | 1:17 |
| Jugador | Nombre | Apellido | País o ciudad | Fruto | Animal | Verbo | Cosa o sustantivo | Puntuación |
|---|---|---|---|---|---|---|---|---|
| Laura | marisol | mora | marruecos | mango | mono | manej | 50 | |
| José | marielos | mora | mani | 25 | ||||
| Rafael | maria | mora | marruecos | mora | motillo | montar | monitor | 60 |
|
2:43 |
Una vez que todos los jugadores han calificado y el sistema calcula los puntajes, crea una nueva partida automáticamente, escogiendo una letra al azar que no ha jugado antes. Cada jugador ve en su navegador el nuevo formulario para la nueva partida, como se aprecia en la Figura 4. Es conveniente que el sistema no reemplace los resultados de las partidas previas, sino que las mantenga en el navegador, de tal forma que permita a los jugadores visualizar el historial de respuestas y calificaciones.
Tras crear la nueva partida, los jugadores contestan tan rápido como les es posible hasta que uno presiona el botón "Stop". El sistema detiene la partida en el navegador de todos los jugadores y los invita a calificar las respuestas de los demás. Una vez calificadas, el sistema actualiza los marcadores y crea una nueva partida, y así sucesivamente.
El juego concluye cuando todas las letras del diccionario han sido agotadas o cuando uno de los jugadores decide interrumpirlo, presionando el botón "Salir" y aceptando una pregunta de confirmación. El sistema avisa a los demás jugadores que el juego ha sido terminado por cualquiera de estas dos razones, e invita a los visitantes que quieran seguir participando a crear una nueva sesión de juego.
| Partida: 1 | Letra: M | 1:17 |
| Jugador | Nombre | Apellido | País o ciudad | Fruto | Animal | Verbo | Cosa o sustantivo | Puntuación |
|---|---|---|---|---|---|---|---|---|
| Laura | marisol | mora | marruecos | mango | mono | manej | 50 | |
| José | marielos | mora | mani | 25 | ||||
| Rafael | maria | mora | marruecos | mora | motillo | montar | monitor | 60 |
| Partida: 2 | Letra: T | 0:01 |
| Jugador | Nombre | Apellido | País o ciudad | Fruto | Animal | Verbo | Cosa o sustantivo | Puntuación |
|---|---|---|---|---|---|---|---|---|
| Laura | ||||||||
| José | ||||||||
| Rafael |
|
2:44 |
Evaluación
La solución presentada será capaz de:
- [5%] Administrar usuarios: Registra usuarios nuevos en el sistema. "Loguea" usuarios existentes si las credenciales son correctas. Mantiene sesiones en el servidor. "Desloguea" usuarios correctamente.
- [20%] Presentar una sala de espera. Permite a los usuarios crear un nuevo juego. Permite a usuarios unirse a un juego existente. Permite al creador de la sesión de juego decidir cuándo iniciar.
- [15%] Iniciar partidas: Crea la partida inicial. Escoge una letra aleatoria. Presenta el formulario para que los jugadores respondan. Inhabilita botón "Stop" hasta que el jugador haya respondido todas las categorías con palabras iniciadas en la letra de la partida. Muestra un reloj animado para dar la sensación al jugador de que el tiempo está corriendo.
- [15%] Detener partidas: Cuando un jugador presiona el botón "Stop", detiene partida en base de datos, y en el navegador de los demás jugadores. La aplicación cliente pregunta estado de la partida periódicamente (cada segundo, por ejemplo) con AJAX. Congela el formulario o reemplaza los campos de texto por las palabras que ingresó el jugador.
- [10%] Enviar de respuestas: Al detenerse la partida, cada aplicación cliente envía las palabras del jugador al servidor; éste las recibe y las guarda en la base de datos. Las aplicaciones cliente hacen la espera hasta que todos los demás hayan enviado palabras.
- [20%] Calificar: Aplicación cliente solicita y presenta palabras de los demás jugadores y algún mecanismo para calificar. Guarda las calificaciones en BD. Aplicaciones cliente esperan hasta que la calificación de la partida esté lista. Cuando todas las calificaciones hayan sido enviadas, aplicación servidor calcula la nota de cada jugador en la partida y la suma al marcador total de cada jugador. Aplicación cliente muestra los resultados al jugador.
- [10%] Crear nuevas partidas: Inicia automáticamente nueva partida una vez terminada la anterior. Escoge nueva letra al azar. Mantiene el historial de las partidas previas en la ventana del navegador de cada jugador.
- [5%] Terminar el juego: Cuando algún jugador presiona el botón "Terminar juego", se marca como terminado el juego en la base de datos. Todas las aplicaciones clientes avisan el término del juego y permiten regresar a la sala de espera.
