Saltar al contenido

Cómo construir un juego de disparos espaciales multijugador: Parte I

Cada nave espacial será controlada individualmente por un jugador a través de un teléfono inteligente convertido en un juego. El esquema de control es simple: el pad izquierdo mueve la nave, el pad derecho dispara, y ambos lados son independientes y trabajan a 360 grados. Si alguna vez has jugado a juegos como Super Smash TV en Super Nintendo, ya conoces el procedimiento.

Técnicamente, el gamepad es sólo otra página HTML con su propio CSS y JavaScript. Tanto los controles como el juego están conectados a un servidor de flujo profundo. La entrada de usuario del gamepad de cada jugador se almacena en un registro que se sincroniza con el propio juego.

Cómo construir un juego de disparos espaciales multijugador: Parte I
Cómo construir un juego de disparos espaciales multijugador: Parte I

Iniciando un servidor de flujo profundo

A partir de aquí, necesitarás un servidor de flujo profundo en funcionamiento. Sólo consigue la versión para tu sistema operativo en la página de instalación y sigue las instrucciones allí.

Conectando con el servidor

Una vez que tu servidor esté funcionando, es hora de empezar con los controles. Pasaremos por alto el HTML y el CSS y nos centraremos puramente en la parte de JavaScript.

Deepstream utiliza pequeñas bibliotecas de clientes para conectarse al servidor e interactuar con él. Para nuestro ejemplo, necesitaremos el cliente de JavaScript. Puedes obtenerlo de un CDN

1<scriptsrc="https://cdn.rawgit.com/deepstreamIO/deepstream.io-client-js/master/dist/deepstream.min.js"></script>

html

o instalarlo a través de Bower o NPM

12bower install deepstream.io-client-jsnpminstall deepstream.io-client-js

bash

Para conectar sus controles al servidor, simplemente añada un archivo javascript, por ejemplo controls.js y llame

123ds =deepstream("localhost:6020").login({},function(success){// el código de nuestros controles irá aquí});

javascript

Podrías notar que hemos retrocedido a la función y a la sintaxis del ES5. El soporte de ES6 no está tan establecido en los teléfonos como en los escritorios. Si prefieres quedarte con el ES6, siempre puedes usar un transpondedor como Babel.

Creando un registro

Es hora de sumergirse en la mecánica detrás de nuestro juego: los registros. Los registros son pequeños trozos de datos que pueden ser manipulados y observados. Tienen métodos get(), set() y subscribe() que permiten interactuar con toda la estructura de datos o con una ruta dentro de ella. Por ejemplo, ship.subscribe( $0027turretRotation$0027, angle => {/…/}).

Cada cambio en un registro se sincroniza con todos los clientes conectados. Para nuestro tutorial, toda la lógica del juego vivirá en la ventana principal del navegador. Mientras tanto, la entrada de usuario de los gamepads se escribe en los registros y se sincroniza con el juego a través del deepstream.

Cada registro se identifica con un nombre único. Para nuestro juego, usaremos el nombre de usuario del jugador, por ejemplo, jugador/johndoe.

123ds.record.getRecord(`player/johndoe`).whenReady(function(record){// Interactuar con el registro aquí});

javascript

Ahora que el disco está listo, podemos fijar su valor inicial:

123456789101112record.set({/// el nombre del jugador nombre: nombre,// ¿se toca actualmente el pad de movimiento? moving:false,// ¿se toca actualmente el pad de tiro? shooting:false,// en el cuerpo del radián Rotación:0,// en la torreta del radián Rotación:0});

javascript

Cableado de los paneles de control

A partir de aquí, estos valores se actualizarán cada vez que el usuario interactúe con uno de los controles. Usaremos una versión simplificada del código para este tutorial, para obtener la imagen completa, eche un vistazo aquí

Primero, empecemos con algunas interacciones básicas. Cada vez que el usuario toca una almohadilla, queremos poner el movimiento o el disparo en verdadero y volver a falso tan pronto como el toque termine. Usar una variable de área.

123456789var area =$(".area");area.on("touchstart",function(event){ record.set("moving",true);});area.on("touchend",function(event){ record.set("moving",true);});

javascript

A continuación, queremos sincronizar el ángulo del toque del usuario con la nave/torreta del juego. Cada evento de movimiento de toque provee las coordenadas x e y de donde ocurrió el toque. Ya que conocemos el centro de nuestro gamepad, ahora podemos calcular el ángulo del toque en radianes:

Para ello, usaremos la función de arctangente con dos argumentos. No te preocupes, es más fácil de lo que parece:

12345678910var radius = area.width()/2;var cX = area.offset().left+ radius;var cY = area.offset().top+ radius;area.on("touchmove",function(event){var pX = event. targetTouches[0].clientX;var pY = event.targetTouches[0].clientY;var angle =Math.PI/2+Math.atan2(pY - cY, pX - cX); record.set("bodyRotation", angle);});

javascript