En la primera parte de este tutorial, hemos creado nuestro servidor Node.js, establecer un juego básico Phaser, y añadió Socket.io para permitir la comunicación entre los dos. Si se ha perdido, puede encontrar la primera parte aquí. En este tutorial, vamos a centrarse en añadir el código del lado del cliente que: añadir y eliminar jugadores del juego, entrada del reproductor de mango, y permitirá a los jugadores recoger objetos de colección .

Si no se ha completado la primera parte y le gustaría continuar a partir de aquí, se puede encontrar el código para la primera parte aquí.

Se puede ver lo que se completará a continuación:


Puede descargar todos los archivos asociados con el código fuente aquí.

get Vamos a empezar!

Tabla de contenidos

Aprender Phaser 3 con nuestro nuevo mini-Grado

El desarrollo del juego HTML5 Mini-Grado ya está disponible para pre-pedido en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3!

El acceso al instante temprano

Adición de jugadores – Cliente

Con nuestro código de servidor para añadir jugadores en su lugar, ahora vamos a trabajar en el código del lado del cliente. Lo primero que tenemos que hacer es cargar el activo que se utilizará para el jugador. Para este tutorial, vamos a utilizar algunas imágenes de paquete de activos Space Shooter Redux de Kenny. La ventaja para el juego se puede descargar aquí.

En la carpeta pública, crear una nueva carpeta llamada activos y colocar la imagen allí. Para cargar la imagen en nuestro juego, tendrá que añadir la siguiente línea dentro de la función de precarga en game.js:
this.load.image ( ‘buque’, ‘Activos / spaceShips_001.png’); 1this.load.image ( ‘barco’ ‘activos / spaceShips_001.png’);

Con la imagen del barco cargado, podemos ahora crear el reproductor en nuestro juego. En la primera parte de este tutorial, hemos creado la conexión Socket.io para emitir un evento currentPlayers en cualquier momento un nuevo reproductor conectado al juego, y en este caso, también pasamos un jugadores de objeto que contiene todos los jugadores actuales. Vamos a utilizar este evento para crear nuestro jugador.

Actualización de la función en game.js crear para que coincida con lo siguiente:
función Crear () {self var = esta; this.socket = io (); this.socket.on (función », currentPlayers (jugadores) {Object.keys (jugadores) .forEach (function (id) {if (jugadores [id] .playerId === self.socket.id) {addPlayer (auto , los jugadores [id]);}});});} 1234567891011functioncreate () {varself = esta; this.socket = io (); this.socket.on (función ‘currentPlayers’, (jugadores) {Object.keys ( jugadores) .forEach (function (id) {if (jugadores [id] .playerId === self.socket.id) {addPlayer (sí, los jugadores [id]);}});});}

Vamos de revisar el código que acabamos de añadir:


  • Se utilizó socket.on para detectar el evento currentPlayers, y cuando se activa este evento, la función que proporcionamos será llamada con los jugadores objetan que pasamos de nuestro servidor.
  • Cuando esta función se llama, el ciclo que recorre cada uno de los jugadores y comprobar para ver si de ese jugador ID coincida Identificación del zócalo del jugador actual.
  • Para recorrer los jugadores, utilizamos Object.keys () para crear una matriz de todas las teclas en el objeto que se pasa. Con la matriz que se devuelve utilizamos el método forEach () para recorrer cada elemento en la matriz.
  • Por último, se llama la función addPlayer () y se lo pasó la información del jugador actual, y una referencia a la escena actual.

    Ahora, vamos a añadir la función addPlayer a game.js. Agregue el código siguiente al final del archivo:
    función addPlayer (self, del jugador) {self.ship = self.physics.add.image (playerInfo.x, playerInfo.y, ‘buque’) setOrigin (0.5, 0.5) .setDisplaySize (53, 40).; si (playerInfo.team === ‘azul’) {self.ship.setTint (0x0000FF); } Else {self.ship.setTint (0xff0000); } Self.ship.setDrag (100); self.ship.setAngularDrag (100); self.ship.setMaxVelocity (200);.} 1234567891011functionaddPlayer (self, del jugador) {self.ship = self.physics.add.image (playerInfo.x, playerInfo.y, ‘buque’) setOrigin (0.5,0.5) .setDisplaySize (53,40), si (playerInfo.team === ‘azul’) {self.ship.setTint (0x0000FF);} else {self.ship.setTint (0xff0000);} self.ship.setDrag (100); self.ship.setAngularDrag (100); self.ship.setMaxVelocity (200);}

    En el código anterior que:


    • Creado el barco de nuestro jugador mediante el uso de las coordenadas X e Y que generamos en nuestro código del servidor.
    • En lugar de usar sólo self.add.image para crear el barco de nuestro jugador, que utiliza self.physics.add.image el fin de permitir que el objeto de juego para utilizar la física de juegos electrónicos.
    • Se utilizó setOrigin () para establecer el origen del objeto de juego para estar en el centro del objeto en lugar de la parte superior izquierda. La razón por la que hizo esto porque, cuando se gira un objeto de juego, se puede girar alrededor del punto de origen.
    • Se utilizó setDisplaySize () para cambiar el tamaño y la escala del objeto de juego. Originalmente, nuestra imagen del barco fue de 106 × 80 píxeles, que era un poco grande para nuestro juego. Después de llamar a setDisplaySize () la imagen es ahora 53 × 40 px en el juego.
    • Se utilizó setTint () para cambiar el color del objeto juego de naves, y elegir el color en función del equipo que se generó cuando creamos nuestra información de jugador en el servidor.
    • Por último, hemos utilizado setDrag, setAngularDrag y setMaxVelocity a modificar cómo reacciona el objeto del juego a la física de juegos electrónicos. Tanto setDrag y setAngularDrag se utilizan para controlar la cantidad de resistencia del objeto se enfrentará cuando se está moviendo. setMaxVelocity se utiliza para controlar la velocidad máxima del objeto juego puede alcanzar.

      Si actualiza su navegador, debería ver la nave de su reproductor aparece en la pantalla. Si el servidor no está en ejecución, puede iniciarlo, vaya hasta la carpeta del proyecto en la línea de comandos y ejecute el comando siguiente:. Server.js nodo


      Además, si actualiza su juego, usted debe consultar a su nave aparece en diferentes lugares, y debe ser al azar rojo o azul.

      Adición de otros jugadores

      Ahora que tenemos nuestro jugador que aparece en el juego, que se sumará la lógica para la visualización de otros jugadores en nuestro juego. En la primera parte del tutorial, también fijamos Socket.io para emitir un newPlayer y un evento de desconexión. Vamos a utilizar estos dos eventos, y nuestra lógica actual para el evento currentPlayers para añadir y eliminar a otros jugadores de nuestro juego. Para ello, actualice la función de crear para que coincida con lo siguiente:
      función Crear () {self var = esta; this.socket = io (); this.otherPlayers = this.physics.add.group (); this.socket.on (función », currentPlayers (jugadores) {Object.keys (jugadores) .forEach (function (id) {if (jugadores [id] .playerId === self.socket.id) {addPlayer (auto , los jugadores [id]);} else {addOtherPlayers (sí, los jugadores [id]);}});}); this.socket.on ( ‘newPlayer’, de función (del jugador) {addOtherPlayers (self, del jugador);}); this.socket.on ( ‘desconexión’, la función (playerId) {self.otherPlayers.getChildren () forEach (function (otherPlayer) {if (playerId === otherPlayer.playerId) {otherPlayer.destroy ();.}}) ;});} 123456789101112131415161718192021222324functioncreate () {varself = este; this.socket = io (); this.otherPlayers = this.physics.add.group (); this.socket.on (función ‘currentPlayers’, (jugadores) { Object.keys (jugadores) .forEach (función (id) {if (jugadores [id] .playerId === self.socket.id) {addPlayer (sí, los jugadores [id]);} else {addOtherPlayers (self, los jugadores [ID]);}});}); this.socket.on ( ‘newPlayer’, function (del jugador) {addOtherPlayers (self, del jugador);}); this.socket.on ( ‘desconexión’, de función (playerId ) {self.otherPlayers.getChildren () forEach (function (otherPlayer.) {if (playerId === otherPlayer.playerId) {otherPlayer.destroy ();}});});}

      Repasemos el código que acaba de añadir:


      • Hemos creado un nuevo grupo llamado otherPlayers, que se utiliza para gestionar todos los otros jugadores en nuestro juego. Si usted no está familiarizado con los grupos de Phaser, son una manera de gestionar los objetos del juego similares y controlarlos como una unidad. Un ejemplo es, en lugar de tener que comprobar las colisiones en cada uno de los objetos del juego por separado, se puede comprobar si hay colisión entre el grupo y otros objetos del juego.
      • Se ha actualizado la función que se llama cuando el evento se emite a currentPlayers ahora llaman los addOtherPlayers funcionan cuando bucle a través de los jugadores oponerse si ese jugador no es el jugador actual.
      • Se utilizó socket.on () para escuchar los eventos newPlayer y desconexión.
      • Cuando se dispara el evento newPlayer, llamamos a la addOtherPlayers función para añadir que el nuevo jugador para nuestro juego.
      • Cuando se dispara el evento de desconexión, tomamos Identificación de ese jugador y eliminar la nave de que el jugador del juego. Hacemos esto mediante una llamada al método getChildren () en nuestro grupo otherPlayers. Los getChildren () método devolverá una matriz de todos los objetos del juego que se encuentran en ese grupo, y desde allí utilizamos el método forEach () para bucle a través de la matriz.
      • Por último, utilizamos el método destroy () para eliminar ese objeto del juego del juego.

        Ahora, vamos a añadir la función addOtherPlayers a nuestro juego. Agregue el código siguiente a la parte inferior de game.js:
        addOtherPlayers de función (self, del jugador) {const otherPlayer = self.add.sprite (playerInfo.x, playerInfo.y, ‘otherPlayer’) setOrigin (0.5, 0.5) .setDisplaySize (53, 40).; si (playerInfo.team === ‘azul’) {otherPlayer.setTint (0x0000FF); } Else {otherPlayer.setTint (0xff0000); } OtherPlayer.playerId = playerInfo.playerId; self.otherPlayers.add (otherPlayer);} 12345678910functionaddOtherPlayers (self, del jugador) {constotherPlayer = self.add.sprite (playerInfo.x, playerInfo.y, ‘otherPlayer’) setOrigin (0.5,0.5) .setDisplaySize (53,40. ); si (playerInfo.team === ‘azul’) {otherPlayer.setTint (0x0000FF);} else {otherPlayer.setTint (0xff0000);} otherPlayer.playerId = playerInfo.playerId; self.otherPlayers.add (otherPlayer); }

        Este código es muy similar al código que añadimos en la función addPlayer (). La diferencia principal es que hemos añadido objeto del juego del otro jugador a nuestro grupo otherPlayers.

        La última cosa que necesitamos hacer antes de que podamos probar nuestra lógica del juego para añadir a los otros jugadores es, tenemos que cargar un activo para estos jugadores. Puede encontrar ese activo aquí.

        tendrá que ser colocado en la carpeta de los activos de esta imagen. Una vez que la imagen está ahí, podemos cargar esta imagen en nuestro juego. En la función de precarga, agregue la siguiente línea:
        this.load.image ( ‘otherPlayer’, ‘activos / enemyBlack5.png’); 1this.load.image ( ‘otherPlayer’, ‘Activos / enemyBlack5.png’);

        Ahora, si actualiza su juego en el navegador, se debe todavía ver el barco de su reproductor. Si abre otra pestaña o navegador y vaya a su juego, debería ver varios sprites aparecen en la ventana de juego, y si cierra uno de esos juegos que deben ver que desaparecen de sprites de los otros juegos.

        Manejo de entrada reproductor

        Con la lógica para la visualización de todos los jugadores en el juego en su lugar, vamos a pasar a controlar las entradas de jugador y permitir que nuestro jugador se mueva. Vamos a manejar la entrada reproductor mediante gestor de teclado incorporado de Phaser. Para ello, agregue la siguiente línea al final de la función de crear en game.js:
        this.cursors = this.input.keyboard.createCursorKeys (); 1this.cursors = this.input.keyboard.createCursorKeys ();

        Esto rellenará los cursores objeto con nuestros cuatro principales objetos Key (arriba, abajo, izquierda, y derecha), que se unirá a las flechas del teclado. Entonces, sólo tenemos que ver si estas teclas están llevando a cabo en la función de actualización.

        Agregue el código siguiente a la función de actualización en game.js:
        si (this.ship) {if (this.cursors.left.isDown) {this.ship.setAngularVelocity (-150); } Else if (this.cursors.right.isDown) {this.ship.setAngularVelocity (150); } Else {this.ship.setAngularVelocity (0); } If (this.cursors.up.isDown) {this.physics.velocityFromRotation (this.ship.rotation + 1.5, 100, this.ship.body.acceleration); } Else {this.ship.setAcceleration (0); } This.physics.world.wrap (this.ship, 5); } 1234567891011121314151617if (this.ship) {if (this.cursors.left.isDown) {this.ship.setAngularVelocity (-150);} elseif (this.cursors.right.isDown) {this.ship.setAngularVelocity (150); } else {this.ship.setAngularVelocity (0);} if (this.cursors.up.isDown) {this.physics.velocityFromRotation (this.ship.rotation + 1.5,100, this.ship.body.acceleration);} else {this.ship.setAcceleration (0);} this.physics.world.wrap (this.ship, 5);}

        En el código anterior, se hizo lo siguiente:


        • Estamos comprobando si la izquierda, derecha, arriba o abajo se pulsan las teclas.
        • Si se pulsa la tecla izquierda o derecha, a continuación, actualizamos la velocidad angular del jugador llamando setAngularVelocity (). La velocidad angular permitirá a la nave a izquierda y derecha de rotación.
        • Si se pulsan las teclas ni la izquierda oa la derecha, a continuación, hemos restablecido la parte posterior velocidad angular a 0.
        • Si se pulsa la tecla de arriba, a continuación, actualizamos la velocidad de la nave, de lo contrario, lo ponemos a 0.
        • Por último, si el barco se fuera de la pantalla que queremos que aparezca en el otro lado de la pantalla. Hacemos esto llamando physics.world.wrap () y le pasamos el objeto juego que queremos para envolver y un desplazamiento.

          Si actualiza su juego, ahora debería ser capaz de mover tu nave alrededor de la pantalla.

          Manejo de otros movimientos jugador

          Ahora que nuestro jugador es capaz de mover, vamos a pasar a manejar el movimiento de otros jugadores en nuestro juego. Con el fin de realizar un seguimiento de los movimientos de otros jugadores, y mover sus sprites en nuestro juego, tendremos que emitir un nuevo evento en cualquier momento un jugador se mueve. En la función de actualización de game.js añadir el siguiente código dentro de la instrucción if:
          // Emit jugador movementvar x = this.ship.x; var y = this.ship.y; var r = this.ship.rotation; if (! This.ship.oldPosition && (x == this.ship.oldPosition. x || y == == r || this.ship.oldPosition.y this.ship.oldPosition.rotation)) {this.socket.emit ( ‘playerMovement’, {x:!! this.ship.x, y : this.ship.y, rotación: this.ship.rotation});} // Guardar la posición antigua datathis.ship.oldPosition = {x: this.ship.x, y: this.ship.y, rotación: esto. ship.rotation}; // 1234567891011121314 jugador emiten movementvarx = this.ship.x; variar = this.ship.y; Varr = this.ship.rotation; si (this.ship.oldPosition && (x == this.ship!. oldPosition.x || y == == r || this.ship.oldPosition.y this.ship.oldPosition.rotation)) {this.socket.emit ( ‘playerMovement’, {x:!! this.ship.x , y: this.ship.y, rotación: this.ship.rotation});} // Guardar la posición antigua datathis.ship.oldPosition = {x: this.ship.x, y: this.ship.y, la rotación: this.ship.rotation};

          Repasemos el código que acabamos de añadir:


          • Hemos creado tres nuevas variables y los utilizan para almacenar información sobre el jugador.
          • a continuación, comprobar para ver si la rotación o la posición del jugador ha cambiado mediante la comparación de estas variables a la rotación y la posición anterior del jugador. Si la posición o rotación de los jugadores ha cambiado, entonces emitimos un nuevo evento llamado playerMovement y pasamos la información del jugador.
          • Por último, almacenamos la rotación y la posición actual del jugador.

            A continuación, tendrá que actualizar el código Socket.io en server.js para escuchar el nuevo evento playerMovement. En server.js, añada el siguiente código debajo de la socket.io ( ‘desconexión’) código:
            // cuando un jugador se mueve, actualizar el reproductor datasocket.on ( ‘playerMovement’, function (movementData) {[jugadores] .x = socket.id movementData.x, los jugadores [socket.id] .y = movementData.y; jugadores [socket.id] .rotation = movementData.rotation; // emitir un mensaje a todos los jugadores sobre el jugador que socket.broadcast.emit movido ( ‘playerMoved’, los jugadores [socket.id]);}); // 12345678 cuando un jugador se mueve, actualizar el reproductor datasocket.on ( ‘playerMovement’, function (movementData) {[jugadores socket.id] .x = movementData.x, los jugadores [socket.id] .y = movementData.y; jugadores [socket. id] .rotation = movementData.rotation; // emiten un mensaje a todos los jugadores sobre el jugador que movedsocket.broadcast.emit ( ‘playerMoved’, los jugadores [socket.id]);});

            Cuando el evento es playerMovement recibida en el servidor, actualizamos la información de ese jugador que se almacena en el servidor, emitir un nuevo evento llamado playerMoved a todos los otros jugadores, y en este caso se pasa la información actualizada de los jugadores.

            Por último, tendremos que actualizar el código del lado del cliente para detectar este nuevo evento, y cuando se emite este evento, tendremos que actualizar el sprite de ese jugador en el juego. En la función de crear en game.js agregue el código siguiente:
            this.socket.on ( ‘playerMoved’, function (del jugador) {self.otherPlayers.getChildren (). forEach (function (otherPlayer) {if (playerInfo.playerId === otherPlayer.playerId) {otherPlayer.setRotation (playerInfo.rotation ); otherPlayer.setPosition (playerInfo.x, playerInfo.y);}});});. 12345678this.socket.on ( ‘playerMoved’, function (del jugador) {self.otherPlayers.getChildren () forEach (function (otherPlayer ) {if (playerInfo.playerId === otherPlayer.playerId) {otherPlayer.setRotation (playerInfo.rotation); otherPlayer.setPosition (playerInfo.x, playerInfo.y);}});});

            Ahora, si reiniciar el servidor y abrir el juego en dos pestañas o navegadores diferentes, y mover uno de los jugadores, debería ver que el jugador se mueven en el otro partido.

            recogiendo las estrellas

            Con el juego ahora el manejo de otros movimientos de los jugadores, tenemos que dar a los jugadores un objetivo. Para este tutorial, vamos a añadir un objeto de colección estrella para el juego para que los jugadores recogen, y cuando lo hacen, a su equipo a conseguir puntos de diez. Para ello, tendremos que añadir unos cuantos más eventos Socket.IO a nuestro juego, y vamos a comenzar con la lógica de servidor en primer lugar.

            En primer lugar, vamos a añadir dos nuevas variables a nuestro servidor: Estrella y anota. La estrella variable se utiliza para almacenar la posición de nuestra colección de la estrella, y la variable puntuaciones se utilizará para realizar un seguimiento de la puntuación de ambos equipos. En server.js, añada el siguiente código debajo de la varplayers = {}; línea:
            estrella var = {x: Math.floor (Math.random () * 700) + 50, y: Math.floor (Math.random () * 500) + 50}; anota var = {azul: 0, rojo: 0 }; 12345678varstar = {x: Math.floor (Math.random () * 700) + 50, y: Math.floor (Math.random () * 500) 50}; varscores = {azules: 0, rojo: 0 };

            a continuación, se emitirá dos nuevos eventos cuando se conecta un nuevo jugador en el juego, starLocation y scoreUpdate. Vamos a utilizar estos dos eventos para enviar el nuevo jugador de la ubicación de la colección estrella, y clasificación de ambos equipos. En server.js, añada el siguiente código debajo de la socket.emit ( », currentPlayers jugadores); línea:
            // enviar el objeto estrella para el nuevo playersocket.emit ( ‘starLocation’, estrella); // enviar el scoressocket.emit actual ( ‘scoreUpdate’, puntajes); 1234 // enviar el objeto estrella para el nuevo playersocket.emit ( ‘starLocation’, estrella); // enviar el scoressocket.emit actual ( ‘scoreUpdate’, puntajes);

            por último, vamos a escuchar un nuevo evento llamado starCollected, que se activa cuando un jugador recoge la estrella . Cuando se recibe este evento, tendremos que actualizar la puntuación del equipo correcto, generar una nueva ubicación para la estrella, y cada jugador de conocimiento acerca de las puntuaciones actualizadas y las estrellas nueva ubicación.

            En server.js, añadir el siguiente código debajo de la socket.on ( ‘playerMovement’) código:
            socket.on ( ‘starCollected’, function () {if (jugadores [socket.id] .team === ‘rojo’) {scores.red + = 10;} else {scores.blue + = 10;} estrella. x = Math.floor (Math.random () * 700) + 50; star.y = Math.floor (Math.random () * 500) + 50; io.emit ( ‘starLocation’, estrella); io.emit ( ‘scoreUpdate’, las puntuaciones);}); 1234567891011socket.on ( ‘starCollected’, function () {if (jugadores [socket.id] .team === ‘rojo’) {scores.red + = 10;} else { scores.blue + = 10;} star.x = Math.floor (Math.random () * 700) 50; star.y = Math.floor (Math.random () * 500) 50; io.emit (‘ starLocation’, estrella); io.emit ( ‘scoreUpdate’, puntajes);});

            Ahora que nuestra lógica de servidor se ha actualizado, que tendrá que actualizar el código del lado del cliente en game.js. Con el fin de mostrar las dos puntuaciones de los equipos, vamos a utilizar objetos de texto juego de Phaser. En la función de crear, agregar el siguiente código en la parte inferior de la función:
            this.blueScoreText = this.add.text (16, 16, », {fontSize: » de relleno,: ’32px # 0000FF’}); this.redScoreText = this.add.text (584, 16, », {fontSize: ’32px’, relleno: ‘# FF0000’}); this.socket.on ( ‘scoreUpdate’, function () {puntuaciones self.blueScoreText.setText ( ‘Blue:’ + scores.blue); self.redScoreText.setText ( ‘Red:’ + scores.red);}); 1234567this.blueScoreText = this.add.text (16,16 », {fontSize: » de relleno,: ’32px # 0000FF’}); this.redScoreText = this.add.text (584,16, », {fontSize: ’32px’, relleno: ‘# FF0000’}); this.socket.on ( ‘scoreUpdate’, function (puntuaciones) {self.blueScoreText.setText ( ‘Blue:’ + scores.blue); self.redScoreText .setText ( ‘Red:’ + scores.red);});

            Repasemos el código que acabamos de añadir:


            • Hemos creado dos nuevos objetos de texto juego llamando this.add.text (). Cuando creamos estos dos objetos, pasamos la ubicación en la que se coloca el objeto, el texto predeterminado del objeto, y el tamaño de fuente y de relleno que se utiliza para el objeto de texto.
            • Cuando se recibe el evento scoreUpdate, que a continuación, actualizar el texto de los objetos del juego llamando al método setText (), y pasamos la puntuación del equipo para cada objeto.

              Si actualiza su juego, usted debe ver puntuación de cada equipo:


              Finalmente, la última cosa que necesitamos es añadir la lógica para la colección de estrellas. En primer lugar, tendrá que cargar el activo para la colección de estrellas en la función de precarga. La ventaja para el juego se puede descargar aquí.

              En la función de precarga, añadir el siguiente código:
              this.load.image ( ‘estrella’, ‘activos / star_gold.png’); 1this.load.image ( ‘estrella’, ‘activos / star_gold.png’);

              A continuación, en la función de crear, añadir el siguiente código debajo del código de actualización del marcador que acabamos de añadir:
              this.socket.on ( ‘starLocation’, function (starLocation) {if self.star) self.star.destroy ((); self.star = self.physics.add.image (starLocation.x, starLocation.y, ‘ estrella ‘); self.physics.add.overlap (self.ship, self.star, function () {this.socket.emit (‘ starCollected ‘);}, null, auto);}); 1234567this.socket.on ( ‘starLocation’, function (starLocation) {if (self.star) self.star.destroy (); self.star = self.physics.add.image (starLocation.x, starLocation.y, ‘estrella’); auto .physics.add.overlap (self.ship, self.star, function () {this.socket.emit ( ‘starCollected’);}, null, auto);});

              En el código anterior hemos escuchado por starLocation caso, y cuando se recibe hacemos lo siguiente:


              • Se comprueba si existe el objeto estrella, y si lo hace, que lo destruyen.
              • Añadimos un nuevo objeto del juego estrella para el juego del jugador, y usamos la información que se pasa al evento para poblar su ubicación.
              • Por último, hemos añadido una comprobación para ver si la nave del jugador y el objeto estrella se solapan, y si lo son, entonces emite el evento starCollected. Llamando physics.add.overlap, Phaser comprobará automáticamente la superposición y ejecutar la función proporcionada cuando hay una superposición.

                Si actualiza su juego, ahora debería ver la colección estrella en la pantalla:

                Conclusión

                Con la colección estrella añadido al juego, que trae este tutorial a su fin. En resumen, este tutorial te mostró cómo crear un juego multijugador básica en el uso de Phaser Socket.io y Node.js.

                espero que hayan disfrutado de este tutorial y lo encontró muy útil. Si tienes alguna pregunta o sugerencia sobre lo que debemos cubrir próxima, vamos a saber en los comentarios a continuación.

                Mensajes relacionados
                > <img src =

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *