Juegos Web Multijugador Usando JavaScript

Hola a todos. Mi nombre es Sahar Poundasseh, como me conocieron antes. Soy un desarrollador de juegos indie con sede en Irán, Teherán y trabajo en un estudio de juegos llamado GearBag. Estoy aquí para hablar sobre juegos web multijugador. No soy muy buen orador, así que quería mostrarles en acción cómo pueden crear un juego web multijugador desde cero y cómo es realmente fácil, así que no se confundirán mucho con las complejidades de esto.

Voy a usar Phaser como mi motor y Socket.io Node.js como mi servidor, pero pueden usar cualquier cosa. Lo básico es que vamos a usar WebSocket y eso es todo. Espero que lo disfruten. Así que construyamos nuestro juego.

Vamos a construir un juego de tic-tac-toe, uno simple, pero porque no tengo mucho tiempo y no soy tan rápido escribiendo, he preparado algo de código, algo de lógica de antemano, el juego y cosas así. Así que vamos a completar el código de red juntos. Así que aquí en mi servidor Node.js, solo he instalado Express y Socket.io y estoy implementando e importando un archivo index.html. Y lo estoy sirviendo aquí. Y solo tengo una función que genera un token para la sala.

Así que es un número aleatorio, número de cuatro dígitos. Voy a usarlo para cuatro dígitos. Y por qué estoy usando esto es porque me gustan los códigos de sala y me hace sentir especial como un VIP. Así que me gusta implementar eso en mis juegos. Y en mi archivo index.html, tengo estos dos archivos. He importado la plataforma phaser y también he implementado, déjenme bajar aquí mismo. También he implementado socket.io. Está construido sobre WebSocket, así que básicamente es WebSocket pero estoy usando socket.io ahora mismo. Así que en el código que está aquí, voy a explicarlo muy rápido. Es mi archivo de configuración de phaser. Así que es solo el ancho y la altura y tiene cuatro funciones principales, crear init, preload y update para la escena. Solo tengo una escena. Estoy usando la función init y crear. Así que en mi init tengo algunas variables como el personaje del jugador y el registro de juego, que va a bloquear al jugador si no es su turno. Y están vacíos.

Y la información de la tabla, en la que voy a mantener mis personajes solo para hacer un seguimiento de ellos. {{^}}Y el índice de la tabla, las métricas de la tabla, que contienen unos y menos unos. Así que si el jugador ingresa O, será uno. Y si el jugador ingresa X, será menos uno. Solo estoy usando esto para verificar el anillo. Y algo de ancho de tabla y ancho de celda y posiciones de inicio de tabla.

Y en mis on creates he creado la tabla. Así que es un contenedor y phaser. Y tiene un carácter, que está vacío ahora mismo. Y contendrá X y O's y una zona para hacer clic. Y estoy manteniendo este carácter en la información de la tabla aquí mismo. Con un ID de lugar. Así que en lugar de usar I y J por separado, estoy usando lugar de cero a ocho para gestionar mis lugares al hacer movimientos dentro del juego. Y esto es un on click para la zona. Así que en este onclick, antes de emitir el movimiento al servidor y a los otros jugadores, estoy verificando si es el turno del jugador y si el carácter de esa zona está vacío. Así que si ya hay algo allí, no lo estoy emitiendo.

Y esta es la tabla. Y tengo dos cajas. Es solo la interfaz de usuario del juego. Es una caja de bienvenida. Que escribirá bienvenida y mostrará el token de la sala al creador. Y hay una caja para contener dos botones para crear sala y unirse a la sala. Y hay dos funciones para el oyente de unclick. Así que cuando hacemos clic en crear una sala, deberíamos emitir a nuestro servidor que debería crear una sala para nosotros. Y para unirse, voy a tomar el token del prompt del usuario y voy a emitir esto al servidor después para unirse a la sala. Y algo de texto simple aquí para mostrar un inicio y si es tu turno o no o si estás jugando con X o O. Y esto es todo, muy simple. Así que comencemos con nuestro lado del cliente. Lo primero que necesitamos hacer, necesitamos conectar nuestro cliente al servidor de socket. Así que crearé mi escena.

Así que esto se llamará cuando el jugador abra el juego. Voy a abrir mi socket y conectarme a él. Así que este lado, el socket está abierto. Así que voy a simplemente conectarme a él. Así que el jugador se conectará al socket de esta manera. Y estoy manteniendo una referencia a él, pero este es ese socket.

Ahora lo primero que vamos a hacer es crear una sala. Así que el usuario solicitará por favor socket, por favor crea una sala para mí. Así que emitirá create room. Ahora, si vamos a hacer esto paso a paso, volvemos a nuestro servidor llamado y escuchamos para create room porque el usuario está solicitando eso. Así que aquí mismo en la conexión, así que io.onConnection, obtendremos un objeto socket que se refiere al usuario que se ha conectado a nuestro servidor de socket. Usaremos mucho esta conexión. Así que en esta conexión, escucharemos, así que socket.on create room. El usuario no nos pasará nada. Están solicitando un token de sala y una sala para ser creada. Así que vamos a hacer justo eso. Así que const token equals generate token, el método y va a ser de una longitud de cuatro. Y ahora lo que vamos a hacer es que vamos a unir a este usuario a esta sala. Así que socket.join en esta sala. Este socket mantiene una referencia al usuario y luego se unirán dentro de esta sala con este token. Y luego vamos a hablar de nuevo con el usuario que su sala ha sido creada y creada y este es el token. Así que envíalo a tus amigos para que puedan jugar contigo. Así que para hacer eso vamos a emitir al usuario que su sala ha sido creada. Y este es tu token de sala. Así que su sala ha sido creada y se han unido dentro de la suya.

Pero antes de volver a nuestro lado del cliente, voy a hacer una cosa más. Así que voy a mantener una lista de mis jugadores solo para vigilarlos. Es un área vacía justo ahí en mi servidor y voy a empujar en esto el id de este jugador y su sala. Así que su id sería second.id y su sala será este token. Voy a usarlo más tarde y voy a asignar un carácter a ellos justo aquí.

Voy a asignar el carácter x a ellos porque se unieron primero, pero puedes aleatorizarlo y hacer un seguimiento de ello más tarde. Y la sala ha sido creada, así que emitirá de vuelta, nos hablará de qué sala se creó y un token. Así que escuchemos eso justo aquí. Así que en nuestro lado del cliente vamos a escuchar eso. Así que en room created nos dará un token. Y lo que vamos a hacer con este token es que tengo el código. Es solo cosas de UI, así que no voy a escribir eso. Voy a ocultar la caja de elección y mostrar la caja de bienvenida y decir que tu token de sala es esta cosa que obtuvimos justo aquí y pueden compartirlo con sus amigos.

Lo siguiente que vamos a hacer es que el otro usuario quiere unirse a la sala así que tendrán que emitir, así que this.socket.emit.joinRoom y nos enviarán un token ¿verdad? El token que obtuvimos del prompt. Así que de vuelta a nuestro código del servidor vamos a escuchar para joining.socket.on.joinRoom y obtendremos un token ¿verdad? Y aquí básicamente estamos haciendo lo mismo que crear la sala pero primero tenemos que verificar si la sala realmente existe. Así que voy a verificar con este io.socket.rooms.get así que encuentra esta sala y ve si existe y también lo que voy a hacer a continuación es verificar si después de que esta sala exista cuántos jugadores hay realmente allí.

Así que voy a verificar su tamaño y ver si es menos de dos. Entonces, si ya hay dos jugadores allí, esta sala no está disponible más. Y luego voy a hacer básicamente lo mismo. {{^}}Así que voy a unir a este usuario a esta sala y luego los agregaré a mi lista de jugadores. Así que el ID del socket es el mismo, el token es el mismo, pero su personaje será... oh si estás randomizando eso tienes que verificar los jugadores para los oponentes y luego establecer el personaje para ellos.

Y luego, lo que voy a hacer es que la sala ha sido creada, ya hay dos jugadores, así que la sala está llena, ahora el juego debe comenzar. Así que tengo que admitir a ambos jugadores que el juego está comenzando y esto está en formación. Así que voy a hacer cada una de las admisiones por separado para los dos jugadores. Son solo dos jugadores, así que es realmente fácil. Así que con este token emitirá a esta sala excepto para el remitente. Emitirá a los oponentes del jugador que ha solicitado unirse. Y voy a admitirles que el juego está comenzando, así que start game y luego voy a pasarles alguna información. Como tu sala es este token y estás jugando como X y es tu turno de jugar. Así que el turno es verdadero. Si aleatorizas los personajes tienes que leerlo desde allí, pero solo estoy poniendo esto aquí porque es más fácil. Y luego al jugador que ha solicitado unirse solo voy a decir un start game tu sala es esta y estás jugando con O y no es tu turno de jugar, así que se volverá falso. Ahora los hemos unido y emitido start game. Antes de volver allí tenemos que tener else. Vamos a verificar eso más tarde. Y así, si la sala no está disponible, voy a emitir de vuelta que hay un error. Bien, ahora volvamos a nuestro cliente. Ahora aquí tenemos que escuchar el inicio del juego de la sala. Así que this .socket.on() startGame() nos dará algo de información. Déjame ver si puse la información correctamente. Sí. Y aquí mismo lo que vamos a hacer con esta información. Así que vamos a asignar el token de la sala aquí mismo porque lo vamos a usar más tarde. Así que info.room y el personaje del jugador, igual a info.player. Y luego vamos a asignar el bloqueo, así que el bloqueo de juego será info.turn.

equals info.player. And then we're going to assign the lock so the play lock will be info.turn. So si es tu turno de jugar el bloqueo sería falso. Y luego vamos a hacer algunas cosas bonitas que tengo justo aquí. Muy bien.

Y va a mostrar que tu pieza es esta. Y si es tu turno de jugar o no. Y voy a ocultar las cajas y mostrar el texto de inicio. Y después de que todo esté hecho, voy a mostrar la tabla en sí. Lo siguiente. Así que los jugadores se han unido, creado y unido a la sala. Y han recibido un mensaje de inicio de juego del servidor. Así que ahora necesitan hacer un movimiento si es su turno. Entonces, ¿cómo vamos a hacer eso? Voy a volver aquí a la zona que creé para emitir el movimiento. Así que si es su turno de jugar y el carácter está vacío, vamos a hacer lo mismo. Así que este es el socket que emite. Y se ha hecho un nuevo movimiento. Vamos a pasar alguna información. Como el lugar, primero que nada la sala.

La sala es this.roomToken. Y también el lugar es el lugar que establecimos antes. Así que el número I veces tres más J. Y ahora esto emitirá y moverá al servidor. Así que tenemos que volver aquí y escuchar eso. Así que obtengo eso en. Movimiento, estamos obteniendo alguna información sobre el movimiento, ¿verdad? Y lo primero que voy a hacer es que voy a encontrar el carácter del jugador que acaba de hacer el movimiento, para determinar de quién será el siguiente turno. Así que voy a manejar eso en mi servidor porque es más seguro de esa manera. Para hacer eso, voy a encontrar al jugador con este ID. Así que index equals players.

luego si acabamos de encontrar al jugador, así que es mayor que menos uno, voy a obtener al jugador. Así que currentPlayer va a ser players de index y luego voy a emitir el movimiento a, no, voy a encontrar el turno. Así que const new turn será, si el current player ese carácter es x, ¿cuál será el siguiente turno? Lo adivinamos, será o. Y si no será x. Así que tenemos el nuevo turno, ahora vamos a decirles a los jugadores dentro de la sala que este es su turno para jugar. No, este es el movimiento y vamos a cambiar los términos. Lo siento. Así que vamos a decir IO.to, esto emitirá a todos los jugadores dentro de esta sala. Así que no estoy usando socket.emit. Así que IO.to info.room.emit move. Y voy a pasar la información autorizada a esto. Entonces, ¿cuál es la información? Voy a decir que el carácter es currentplayer.character. Y también el lugar es info.place. Y el siguiente turno, así que el turno será el nuevo turno que acabamos de indicar. Veamos si yo...

Ahora, volvamos a nuestro cliente. Ahora, tenemos que escuchar las reglas. Verás, no hice nada para eso dentro del cliente. Así que, escuchemos. Justo aquí, this.socket.on y remove. Estamos recibiendo alguna información. Y lo que voy a hacer con esa información, tengo un método handle move que es solo una cosa de UI. Establece el contenido del texto justo en las celdas como el carácter de movimiento, y actualiza la matriz de la tabla con unos y menos unos. Y determina el turno.

Así que, si es tu turno de jugar el registro de juego será falso y dirá que es tu turno de jugar, y después de cada movimiento estoy verificando la victoria justo aquí para detener el juego. Así que, en movimiento voy a llamar a mi función handle move y necesitará un contexto debido a mi contexto, sí. Así que, las celdas van a ser esto y voy a decir esto y la información que obtuve del movimiento, del servidor y lo manejará justo aquí.

Ahora, básicamente todo está hecho, pero voy a hacer una última cosa para atar todos los cabos sueltos porque siempre tienes que escuchar eso o estarás en problemas Tal vez eso sea malo decirlo. Sí. No soy un hablante nativo de inglés, así que perdón por mi francés. Así que, estoy atascado en el on disconnect. Vamos a verificar si el jugador se ha desconectado de la red. Así que, primero vamos a encontrar a los jugadores. Tengo el código justo aquí. Después de encontrar al jugador, voy a expulsarlo de la sala. Así que, vamos a decir, players index.room. Así que, expulsarlos de esta sala. Y también, voy a eliminarlos del array de jugadores, porque si el array de jugadores se vuelve demasiado grande, entonces consumirá mucha memoria y eso realmente no es lo que quieres. Así que, players.splice, desde este índice y uno por uno. Muy bien, todo está hecho. Y realmente espero no tener ningún error o algo así. Así que, vamos a verificar. Y ejecutemos el servidor. Así que, node server.js. Está corriendo.

Así que, déjame copiar esto. Y tengo mis pestañas listas porque soy una persona realmente preparada. Así que, tengo dos pestañas, dos clientes. Y uno de ellos va a crear una sala. Así que, el token es 7983. Y me estoy uniendo desde el otro cliente.

Muy bien. Es mi turno de jugar. El lado izquierdo es para jugar. Voy a poner una X allí y una O aquí. Y luego voy a poner una X allí, O aquí. Correcto. Y gano y pierdo al mismo tiempo. Así que, el juego está hecho. Y fue realmente fácil. Sé que el juego es fácil, pero el concepto es realmente fácil. Piénsalo.

Pero antes de terminar, volvamos a nuestras diapositivas. Tengo una cosa más que decir. Y terminaré después de eso. Así que, hay algunos consejos. En primer lugar, WebSocket está construido sobre el protocolo TCP, que es una comunicación de 3 vías, y es realmente confiable, y asegura la transmisión de datos de extremo a extremo y su seguridad. Pero también está el protocolo UDP, que es en realidad más común y más adecuado para juegos PVP. Y es más rápido. Y si hay algunos paquetes de datos que se pierden en el camino, no le importan. Así que tal vez necesites usar eso. Así que piénsalo. ¿Cuál es la mejor cosa, el mejor protocolo para usar en un juego? Y también, usé el método cliente-servidor, aquí en el juego de Tic Tac Toe, pero no es el único método. Puedes usar el método de red peer-to-peer, en el cual los nodos están conectados entre sí directamente, y no hay un nodo servidor, por lo que es una transmisión de datos más rápida entre ellos. Y es mucho más simple de codificar.

Pero es realmente poco confiable, porque, no realmente poco confiable, pero de alguna manera es poco confiable porque no hay autorización del servidor para los mensajes que se están enviando. Así que los clientes pueden enviar lo que quieran. Y el cliente-servidor, por otro lado, en primer lugar, es muy modular, por lo que es una mejor práctica, como sabemos. Y además, es un poco, toma un poco más de tiempo que p2p, porque en el escenario básico del juego de tic-tac-toe, solo hay dos jugadores, por lo que un mensaje se envía dos veces. Así que uno lo envía al servidor, y el servidor lo envía al jugador dos. Así que toma un poco más de tiempo. Y también, sí, supongo que esto es todo. Tal vez había algunas cosas más, no puedo recordar.

Lo siguiente es que comiences temprano con tu código de red. Así que no digas que, voy a terminar mi juego al máximo, y luego voy a agregar mi lógica de red para hacerlo multijugador. Será mucho más difícil y mucho más complejo. Así que piénsalo desde el principio en tu código y hazlo simultáneamente. Y también, sé consciente de la cantidad de información que estás transmitiendo entre tus pares, porque si la cantidad de información se vuelve realmente grande, ralentizará tu servidor y no lo ralentizará, pero el mensaje llegará más lento y no creará una buena experiencia para los jugadores.

Ahora, espero que hayas disfrutado de esta charla y gracias por escuchar. Nos vemos el resto de la noche. Adiós por ahora.

¿Quieres ver los resultados de esta encuesta? Parece que... Sí, claro. Me encantaría hacer eso. Websockets son la mejor opción aquí. Eso es realmente bueno porque si ya conoces Websockets, estás más que a mitad de camino. Comienza a desarrollar juegos multijugador. Creo que fue útil tener una opción no disponible aquí porque eso fue algo... Tuvimos una encuesta similar ayer. No podíamos decir. Creo que había otra opción y no podíamos decir si la gente estaba usando otras tecnologías o si no estaban haciendo juegos multijugador. Siento que esto ayuda. Quería saber si la gente no ha estado trabajando con ninguna de estas APIs de redes en tiempo real o tal vez sí. Es genial saberlo. Estás a mitad de camino. Sí. Genial.

Creo que podemos echar un vistazo a algunas de las preguntas que has estado enviando. La primera también es una pregunta que tengo. ¿El código que estabas mostrando está disponible en algún lugar como GitHub o algo así si quisiera probarlo y jugar con él? Sí, absolutamente. Publicaré el enlace a GitHub en el canal. Genial. Tal vez puedas tuitearlo también.

Lo haré, por supuesto. Quienes no estén en Discord para verlo también. Genial. Genial.

Y luego otra pregunta. No sé mucho. Solo la preguntaré. ¿Podemos, es posible usar UDP en juegos web hoy en día? ¿Es algo que podemos hacer?

En realidad, no, porque hay algunos problemas de red, tal vez problemas de red como ataques VDOS que hacen que no sea tan seguro usar el protocolo UDP en la web, pero lo más cercano que tenemos a eso es usar WebRTC, que en realidad no es mi preferencia porque es realmente... en primer lugar, es un P2P por sí solo y es más difícil de implementar. Así que creo que usar TCP con WebSocket es el camino a seguir.

Eso tiene sentido. Pero, ¿significaría eso que WebRTC sería mejor en términos de... No necesariamente tendría costos de servidor. Así que si estás haciendo un juego pequeño o algo así porque es P2P, no necesitarías...

Sí, juegos pequeños, como una sala pequeña como Tic-Tac-Toe en realidad podría hacerse con WebRTC, pero a medida que las salas se hacen más grandes, especialmente, hay más problemas como para P2P y WebRTC. Como en juegos móviles, cada cliente tiene que enviar sus mensajes a como cien personas y usarían muchos datos como conexión y no sería una muy buena práctica.

Eso tiene sentido. Pero parece que tal vez si es como un juego uno a uno como un ajedrez o algo donde solo tienes dos jugadores, entonces tal vez WebRTC sería una buena opción. Eso sería bueno. Genial.

Oh, hice una pregunta de seguimiento para eso. Pero aunque es P2P, ¿todavía necesitas algún servidor para hacer la conexión inicial entre los pares?

Exactamente. Puedes usar ICE en tu servidor para hacer eso. Como dije, es más difícil de implementar. Así que tal vez para un juego más pequeño, es mejor usar en realidad los web sockets, porque es más fácil de implementar. Tiene sentido. Genial.

¿Qué tal, tenemos una pregunta de Tanta. Dicen gracias por la charla. Y mi pregunta es, ¿cuál es la ventaja de usar JavaScript en la web frente a juegos de escritorio, por ejemplo?

Bueno, JavaScript en la web, en realidad es mucho más fácil, supongo, de implementar, porque la mayoría de los desarrolladores ya han trabajado con JavaScript y la compilación de eso es en realidad muy rápida también, así que no necesitas nada, lo mejor de esto es que solo refrescas la página del navegador y puedes ver tu trabajo, sí, está ahí, y así supongo que eso es lo mejor para mí, porque puedo compilar fácilmente mi código, ver fácilmente los resultados y cosas así, y es mucho más fácil de publicar debido a la forma en que está en la web y puedes en realidad, tus jugadores pueden jugarlo en cualquier dispositivo.

Creo que hay muchas ventajas en usar JavaScript para la web, pero estas son algunas de ellas. Bueno, ¿qué pasa si estuvieras haciendo, digamos, un juego para Android o iOS, ¿lo harías todavía con JavaScript y luego lo publicarías de esa manera? En realidad, sí, puedes hacer eso. Yo mismo soy desarrollador de Android y publico mis juegos web en la tienda de Android, como tenemos esta cosa llamada TWAs en Android. Es una actividad que puedes tener tu navegador web en eso y lo verificas, y sería como un PWA pero se publicará en la tienda de aplicaciones y será más accesible y no estoy seguro sobre iOS, pero creo que puedes hacer algo similar con eso también. Sí, eso tiene mucho sentido, y eso es algo similar a lo que Will estaba hablando en la charla anterior, publicando tus juegos de Play Games con algo como Cordova o algo similar a eso. Sí, exactamente. Eso es muy genial.