Cómo hacer un juego multijugador para el navegador

Elige juego por turnos, en tiempo real o dirigido por un anfitrión, di cuántos jugadores hay y cómo juegan juntos, y Go Bananas crea un juego al que tus amigos se unen desde un enlace.

El multijugador es lo que convierte un juego pequeño en una noche con amigos. Las partes difíciles son mantener de acuerdo la pantalla de cada jugador, manejar a quienes llegan tarde o se desconectan, y compartir el juego sin que nadie tenga que instalar nada. En Go Bananas describes el juego, y el sitio se encarga de las salas, las invitaciones y las conexiones. Esta guía cubre los tres tipos de multijugador, cómo pedir el que quieres, cómo funciona jugar juntos y qué tener en cuenta al diseñar para más de una persona.

Los tres tipos de multijugador

Todo juego multijugador de Go Bananas usa una de tres formas de mantener sincronizados a los jugadores. No tienes que nombrarlas, pero conocerlas te ayuda a describir bien tu juego.

Tipo	Cómo funciona	Ideal para
Por turnos	Los jugadores se turnan, y cada jugada se envía cuando se hace	Juegos de mesa, de cartas, de palabras, puzles, estrategia
En tiempo real	La posición y las acciones de cada jugador se envían muchas veces por segundo	Carreras, juegos de disparos, juegos de arena, deportes, persecuciones
Dirigido por un anfitrión	El juego de un jugador (el anfitrión) aplica las reglas y envía el resultado a todos	Juegos con física, enemigos o temporizadores compartidos que todos los jugadores deben ver igual

Por turnos es el más tolerante. No pasa nada entre jugada y jugada, así que una conexión lenta solo retrasa un turno. Las damas, el ajedrez, el tres en línea y los juegos de trivia encajan aquí.

En tiempo real se siente vivo, pero requiere más cuidado. Cada jugador envía su propio estado unas 20 veces por segundo, y las demás pantallas dibujan lo que reciben. Es ideal para juegos en los que cada jugador controla su propio personaje, como una carrera o un combate aéreo.

Dirigido por un anfitrión es para juegos en los que se mueve algo además de los jugadores: una pelota que persiguen los dos equipos, oleadas de enemigos, una arena que se encoge. Un solo juego decide lo que pasa, así que todos ven la misma pelota en el mismo lugar.

Cómo pedir un juego multijugador

Sé específico sobre cómo juega la gente junta. Una buena petición responde a estas preguntas:

¿Cuántos jugadores? Los juegos pueden tener hasta 16. Di «2 jugadores» o «hasta 8 jugadores».
¿Por turnos o en tiempo real? «Los jugadores se turnan» o «todos se mueven al mismo tiempo».
¿Rivales o cooperativo? ¿Los jugadores compiten entre sí o colaboran contra el juego?
¿Equipos? «Dos equipos de 3», «cada uno por su cuenta».
¿Qué termina el juego? Una puntuación por alcanzar, un temporizador, el último jugador en pie.

Por ejemplo:

Un juego de carreras en tiempo real con vista desde arriba para hasta 6 jugadores en una pista con curvas cerradas. Tres vueltas, gana el primero en llegar a la meta. Cada jugador elige el color de su auto. Muestra la posición de todos en un minimapa.

O bien:

Un juego por turnos para 2 jugadores: conecta cuatro en una cuadrícula de 7 por 6. Muestra de quién es el turno, resalta la línea ganadora y ofrece una revancha.

Cada juego también tiene un modo para un jugador con un botón "Play vs AI" (jugar contra la IA) y los niveles Easy, Medium y Hard (fácil, medio y difícil), para que la gente pueda probarlo sola. Cuando un juego empieza en modo multijugador, se salta ese menú y empieza de inmediato.

Cómo funciona jugar juntos en Go Bananas

Abrir una sala

Abre el juego y elige Multiplayer (multijugador) en lugar de Play Solo (jugar solo). La opción Multiplayer solo aparece en los juegos hechos para más de un jugador.
Elige Create Room (crear sala). Te conviertes en el anfitrión.
La sala de espera muestra un código de sala y un enlace bajo "Share this link with friends" (comparte este enlace con tus amigos), con botones para copiarlo o abrir el menú de compartir de tu teléfono.
Tus amigos se unen y sus nombres aparecen en la lista de jugadores.
Solo el anfitrión puede presionar Start Game (empezar partida).

Unirse

Hay dos maneras de entrar:

El enlace. Al abrir el enlace de invitación aparece una ventana Join Game (unirse a la partida): "Your friend made this game with AI!" (¡tu amigo creó este juego con IA!), un cuadro para tu nombre y un botón Join Game. No hace falta cuenta ni instalar nada.
El código de sala. Elige Multiplayer, luego Join Room (unirse a una sala), y escribe el código de 6 caracteres. Los códigos no usan la O, el 0, la I ni el 1, así que es difícil leerlos mal.

Se puede entrar a una partida que ya empezó si queda un lugar libre. Si todos los lugares están ocupados, aparece "Room is full" (la sala está llena).

Cuando alguien se va o pierde la conexión

Los teléfonos pierden la conexión, y la gente cambia de app para enviar la invitación. Go Bananas está preparado para eso:

Un anfitrión que cambia de app mientras espera en la sala conserva la sala, así que la invitación sigue funcionando cuando vuelve.
Si el anfitrión se va del todo, se elige un nuevo anfitrión entre los jugadores que siguen conectados. Cuando no queda nadie, la sala se cierra.
A un jugador que pierde la conexión se le guarda el lugar durante 15 minutos.
El juego intenta volver a conectarse solo, 5 veces, con 5 segundos entre cada intento, y muestra "Connection lost — Reconnecting" (conexión perdida, reconectando) mientras lo intenta.
Una sala sin actividad se cierra después de 30 minutos, y cualquier sala se cierra después de 4 horas.

Cómo diseñar para más de un jugador

Un juego multijugador tiene que ser justo y tiene que coincidir consigo mismo en todas las pantallas. Estos hábitos ayudan, y puedes pedirlos directamente.

Dale a cada jugador su propio punto de partida. Los jugadores que aparecen uno encima del otro empiezan la partida confundidos. En los juegos de mesa, cada jugador debería ver el tablero desde su propio lado.

Deja que un solo juego decida lo aleatorio que se comparte. Si se baraja un mazo de cartas o se genera un mapa al azar, el anfitrión debería hacerlo una vez y enviar el resultado. Si no, cada pantalla tira sus propios dados y los jugadores terminan en partidas distintas.

Nunca envíes información oculta. Si los jugadores tienen manos secretas o roles ocultos, no envíes los secretos de los demás jugadores en absoluto. Cualquier cosa que se envía a un navegador la puede leer un jugador curioso.

Usa «elegir y luego revelar» para las decisiones simultáneas. En juegos del estilo piedra, papel o tijera, cada jugador primero fija su elección sin revelarla. Las elecciones solo se muestran cuando todos ya eligieron.

Ten en cuenta el retraso. Las actualizaciones en tiempo real llegan unas 20 veces por segundo, y cada una tarda un poco en llegar. Suaviza el movimiento de los demás jugadores en lugar de hacerlos saltar de una posición a otra, y decide los impactos en un solo lugar para que dos pantallas no se contradigan.

Decide qué pasa cuando alguien se va. ¿Su personaje se queda, desaparece o lo controla la computadora? ¿La partida termina si solo queda un jugador? Dilo en tu petición.

Envía mensajes pequeños. Envía lo que cambió, no el juego entero, y no pases de unos 60 mensajes por segundo por jugador.

Para desarrolladores: las funciones de multijugador

Los juegos de Go Bananas reciben una conexión ya lista, así que un juego no debe abrir su propio WebSocket. En modo multijugador, window.gameOptions describe la sesión (mode, playerId, isHost, players, roomCode, playerName), y se definen los atajos window.playerId, window.isHost y window.playerName. En modo de un jugador, window.mp es un sustituto que no hace nada, así que el mismo código funciona en solitario.

Para enviar, a través de window.mp:

sendTurn(data): una jugada en un juego por turnos. No uses una clave llamada type en data, o el mensaje se descarta.
sendState(state): el estado de tu propio jugador en un juego en tiempo real. Está limitado a unos 20 envíos por segundo.
sendAction(action): un evento puntual en un juego en tiempo real, como disparar o saltar.
sendHostState(state): el estado compartido, que envía el anfitrión en un juego dirigido por un anfitrión.

Para recibir, define funciones en window: onRemoteTurn, onRemoteState, onRemoteAction, onHostState, onPlayerJoined, onPlayerLeft, onPlayerDisconnected, onPlayerReconnected y onNewHost.

// Define las funciones de recepción en el nivel superior del script, no dentro de
// una función que se ejecuta más tarde, o se perderán los mensajes que lleguen pronto.
window.onRemoteTurn = function (turn) {
  applyMove(turn.column);      // los campos que envió el otro jugador
  myTurn = true;
  draw();
};

window.onPlayerLeft = function () {
  showMessage('Tu rival abandonó la partida');
};

window.onNewHost = function () {
  // El anfitrión se fue y se eligió uno nuevo. Si ahora este juego es el anfitrión,
  // se encarga de enviar el estado compartido.
};

function dropPiece(column) {
  if (!myTurn) return;
  applyMove(column);
  myTurn = false;
  draw();
  window.mp.sendTurn({ column: column });   // nunca recibes tu propio mensaje
}

Algunas reglas para que todo funcione:

window.mp está listo cuando tus scripts ya se ejecutaron, así que envía desde los eventos del juego, no desde las primeras líneas del script.
Quien envía nunca recibe su propio mensaje. Aplica tu jugada localmente y luego envíala.
Mantén cada objeto de estado muy por debajo de 1 MB.
En multijugador, "Play Again" (jugar de nuevo) recarga el juego para que todos los jugadores empiecen de cero juntos.