En el último tutorial creado la estructura básica de un juego Bomberman. En este tutorial vamos a añadir un poco más contenido a la misma y que sea más divertido para jugar, con una condición de victoria. En este tutorial vamos a añadir lo siguiente:


  • Añadir objetivos que deben ser destruidos por el jugador para encontrar los objetivos y los anticipos
  • Adición de elementos, que se puede encontrar después de la explosión de azulejos
  • El control de la cantidad de bombas que el jugador puede caer

    Para leer este tutorial, es importante que usted está familiarizado con los conceptos siguientes:


    • Javascript y conceptos orientados a objetos.
    • conceptos básicos Phaser, tales como: estados, sprites, los grupos y la física de arcade
    • La creación de mapas usando el editor de mapas de baldosa

      Tabla de contenidos

      Aprender Phaser mediante la construcción de 15 juegos

      Si usted quiere dominar Phaser y aprender cómo publicar juegos Phaser como juegos nativas para iOS y Android se sienten libres para comprobar Zenva En línea En este supuesto The Complete el juego para móvil Curso de Desarrollo – Construir 15 juegos.

      Activos de derechos de autor

      Los activos utilizados en este tutorial fueron creados por Cem Kalyoncu / cemkalyoncu y Matt Hackett / richtaur y puestos a disposición por “usr_share” a través de los campos comunes creativos licencia, cosa que permite el uso comercial bajo la atribución. Puede descargarlos en http://opengameart.org/content/bomb-party-the-complete-set o descargando el código fuente.

      archivos de código fuente

      Puede descargar los archivos de código fuente tutorial aquí.

      Nuevos niveles

      En este tutorial vamos a añadir nuevos niveles en nuestro juego. Dado que el objetivo de este tutorial es en la creación del juego, no utilizando baldosa para crear los mapas, usted es libre de crear su dueño o utilizar las que se proporcionan con el código fuente. Las siguientes figuras muestran los niveles que voy a usar. Sólo recuerde que añadir las propiedades de los objetos y capas como se explica en el tutorial anterior.

      level1 nivel 2

      Mostrando el jugador vive

      En este tutorial nuestro jugador tendrá un número de partida de la vida, lo que disminuirá cada vez que muere. Cuando el número de vidas llega a cero, se acabó el juego. Además queremos mostrar el número restante de vida en la pantalla.

      En primer lugar, vamos a modificar el jugador prefabricada para mantener el seguimiento de su número de vidas. Para hacer eso, empezamos por la adición de una nueva propiedad en el constructor. Tenga en cuenta que, puesto que no queremos para restablecer el número de vidas en cada nivel, vamos a mantenerlo en la localStorage al cambiar los niveles, y el jugador recibirá su valor a partir de ahí, si está disponible. Cuando se carga el primer nivel, tenemos claro el almacenamiento local, por lo que el jugador va a restablecer el número de sus vidas. Los métodos en TiledState que cambian el localStorage son “init” y “next_level”, como se muestra a continuación, así.
      Bomberman.TiledState.prototype.init = function (level_data) { «utilizar estricta»; tileset_index var; this.level_data = level_data; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; sistema de física this.game.physics.startSystem (Phaser.Physics.ARCADE) // empezar; this.game.physics.arcade.gravity.y = 0; // crear el mapa y establecer conjunto de baldosas this.map = this.game.add.tilemap (level_data.map.key); tileset_index = 0; this.map.tilesets.forEach (función (conjunto de baldosas) {this.map.addTilesetImage (tileset.name, level_data.map.tilesets [tileset_index]); tileset_index + = 1;}, this); si (this.level_data.first_level) {localStorage.clear (); }}; Bomberman.TiledState.prototype.next_level = function () { «utilizar estricta»; localStorage.number_of_lives = this.prefabs.player.number_of_lives; localStorage.number_of_bombs = this.prefabs.player.number_of_bombs; this.game.state.start ( «BootState», verdadero, falso, this.level_data.next_level, «TiledState»);}; 1234567891011121314151617181920212223242526272829303132Bomberman.TiledState.prototype.init = function (level_data) { «utilizar estricta»; vartileset_index; este .level_data = level_data; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; // iniciar la física systemthis.game.physics.startSystem (Phaser.Physics.ARCADE ); this.game.physics.arcade.gravity.y = 0; // crear el mapa y conjunto tilesetthis.map = this.game.add.tilemap (level_data.map.key); tileset_index = 0; this.map.tilesets .forEach (función (conjunto de baldosas) {this.map.addTilesetImage (tileset.name, level_data.map.tilesets [tileset_index]); tileset_index + = 1;}, this); si (this.level_data.first_level) {localStorage.clear ( );}}; Bomberman.TiledState.prototype.next_level = function () { «utilizar estricta»; localStorage.number_of_lives = this.prefabs.player.number_of_lives; localStorage.number_of_bombs = this.prefabs.player.number_of_bombs; this.ga me.state.start ( «BootState», verdadero, falso, this.level_data.next_level, «TiledState»);};

      También tiene que añadir un método de “morir” en el prefabricada jugador, lo que disminuirá el jugador número de vidas y verificación de si sigue siendo mayor que 0. Si es así, sólo se restablece el reproductor a la posición inicial. De lo contrario, se acabó el juego. Los cambios en el jugador prefabricada se muestran abajo.
      var Bomberman = Bomberman || {}; Bomberman.Player = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.walking_speed = + properties.walking_speed; this.bomb_duration = + properties.bomb_duration; this.animations.add ( «walking_down», [1, 2, 3], 10, true); this.animations.add ( «walking_left», [4, 5, 6, 7], 10, true); this.animations.add ( «walking_right», [4, 5, 6, 7], 10, true); this.animations.add ( «walking_up», [0, 8, 9], 10, true); this.stopped_frames = [1, 4, 4, 0, 1]; this.game_state.game.physics.arcade.enable (this); this.body.setSize (14, 12, 0, 4); this.cursors = this.game_state.game.input.keyboard.createCursorKeys (); this.initial_position = new Phaser.Point (this.x, this.y); this.number_of_lives = localStorage.number_of_lives || + Properties.number_of_lives;}; Bomberman.Player.prototype.die = function () { «utilizar estricta»; // disminuir el número de vidas this.number_of_lives – = 1; si (this.game_state.prefabs.lives.number_of_lives <= 0) {// si no hay más vidas, se acabó el juego this.game_state.game_over (); } Else {// si hay vidas restantes, reiniciar la posición del jugador this.x = this.initial_position.x; this.y = this.initial_position.y; }}; 1234567891011121314151617181920212223242526272829303132333435363738394041varBomberman = Bomberman || {}; Bomberman.Player = function (game_state, nombre, posición, propiedades) { "utilizar estricta"; Bomberman.Prefab.call (Esto, game_state, nombre, posición, propiedades); esto. anchor.setTo (0,5); this.walking_speed = + properties.walking_speed; this.bomb_duration = + properties.bomb_duration; this.animations.add ( "walking_down", [1,2,3], 10, true); esto. animations.add ( "walking_left", [4,5,6,7], 10, true); this.animations.add ( "walking_right", [4,5,6,7], 10, true); esto. animations.add ( "walking_up", [0,8,9], 10, true); this.stopped_frames = [1,4,4,0,1]; this.game_state.game.physics.arcade.enable (esto ); this.body.setSize (14,12,0,4); this.cursors = this.game_state.game.input.keyboard.createCursorKeys (); this.initial_position = newPhaser.Point (this.x, this.y ); this.number_of_lives = localStorage.number_of_lives || + properties.number_of_lives;}; Bomberman.Player.prototype.die = function () { "uso estricto"; // disminuir el número de livesthis.number_of_lives- = 1; si ( this.gam e_state.prefabs.lives.number_of_lives <= 0) {// si no hay más vidas, es overthis.game_state.game_over juego ();} else {// si hay vidas restantes, reinicie el jugador positionthis.x = esta .initial_position.x; this.y = this.initial_position.y;}};

      Para mostrar el número de vidas jugador en la pantalla tendremos una Vives prefabricada. Este prefabricada mostrará una imagen del corazón con el número de vidas en el interior de la misma. Para hacer eso, creamos el texto en el constructor prefabricada con todas las propiedades necesarias y en el método de actualización de la cambiamos para mostrar el número actual de vida del jugador. Las vidas código prefabricada se muestra a continuación.
      var Bomberman = Bomberman || {}; Bomberman.Lives = función (game_state, nombre, posición, propiedades) { «utilizar estricta»; lives_text_position var, lives_text_style, lives_text_properties; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.fixedToCamera = true; this.anchor.setTo (0,5); this.scale.setTo (0,9); // crear una casa prefabricada de texto para mostrar el número de vidas lives_text_position = new Phaser.Point (this.position.x – 2, this.position.y + 5); lives_text_style = {font: «14px Arial», relleno: «#fff»}; lives_text_properties = {grupo: «HUD», texto: this.number_of_lives, estilo: lives_text_style}; this.lives_text = new Bomberman.TextPrefab (this.game_state, «lives_text», lives_text_position, lives_text_properties); this.lives_text.anchor.setTo (0,5);}; Bomberman.Lives.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Lives.prototype.constructor = Bomberman.Lives; Bomberman.Lives.prototype.update = function () { «utilizar estricta»; // actualización para mostrar el número actual de vidas this.lives_text.text = this.game_state.prefabs.player.number_of_lives;}; 12345678910111213141516171819202122232425262728varBomberman = Bomberman || {}; Bomberman.Lives = función (game_state, nombre, posición, propiedades) { «utilizar estricta»; varlives_text_position, lives_text_style, lives_text_properties; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.fixedToCamera = true; this.anchor.setTo (0,5); this.scale.setTo (0,9 ); // crear una casa prefabricada de texto para mostrar el número de liveslives_text_position = newPhaser.Point (this.position.x-2, this.position.y + 5); lives_text_style = {font: «14px Arial», relleno: «# fff «}; lives_text_properties = {grupo:» HUD», de texto: this.number_of_lives, el estilo: lives_text_style}; this.lives_text = newBomberman.TextPrefab (this.game_state, «lives_text», lives_text_position, lives_text_properties); this.lives_text.anchor .setTo (0,5);}; Bomberman.Lives.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Lives.prototype.constructor = Bomberman.Lives; Bomberman.Live s.prototype.update = function () { «uso estricto»; // actualizar para mostrar el número actual de livesthis.lives_text.text = this.game_state.prefabs.player.number_of_lives;};

      Ya se trate de jugar con la vida para comprobar si todo está funcionando.

      vidas

      Adición de objetivos y la meta

      En nuestro juego, para avanzar al siguiente nivel, el jugador debe destruir algunos objetivos en el nivel. Una vez que todos los objetivos se han destruido, un objetivo aparecerá en el nivel. Cuando el jugador toca el objetivo, avanza al siguiente nivel.

      Para hacer eso, vamos a crear una casa prefabricada de destino, que tiene un cuerpo físico y es inamovible. En el método de actualización, comprobamos por superposición con las explosiones y, si es así, que llamamos el método de matanza. Por último, sobreescribimos el método de matar a además de llamar al método Phaser.Sprite matanza, comprobando si éste era el último objetivo de estar. Si es así, debemos crear el objetivo. El código para el prefabricada Target se muestra a continuación:
      var Bomberman = Bomberman || {}; Bomberman.Target = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.game_state.game.physics.arcade.enable (this); this.body.immovable = true;}; Bomberman.Target.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Target.prototype.constructor = Bomberman.Target; Bomberman.Target.prototype.update = function () { «utilizar estricta»; this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.explosions, this.kill, null, este);}; Bomberman.Target.prototype.kill = function () { «utilizar estricta»; var goal_position, goal_properties, meta; Phaser.Sprite.prototype.kill.call (this); si (this.game_state.groups.targets.countLiving () === 0) {// crear meta goal_position = new Phaser.Point (this.game_state.game.world.width / 2, this.game_state.game.world. altura / 2); goal_properties = {textura: «goal_image», grupo: «metas»}; Objetivo = nueva Bomberman.Goal (this.game_state, «objetivo», goal_position, goal_properties); }}; 12345678910111213141516171819202122232425262728293031varBomberman = Bomberman || {}; Bomberman.Target = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); esto. anchor.setTo (0,5); this.game_state.game.physics.arcade.enable (this); this.body.immovable = true;}; Bomberman.Target.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman .Target.prototype.constructor = Bomberman.Target; Bomberman.Target.prototype.update = function () { «utilizar estricta»; this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.explosions, this.kill, null, este);}; Bomberman.Target.prototype.kill = function () { «utilizar estricta»; vargoal_position, goal_properties, meta; Phaser.Sprite.prototype.kill.call (this); si (esto .game_state.groups.targets.countLiving () === 0) {// crear goalgoal_position = newPhaser.Point (this.game_state.game.world.width / 2, this.game_state.game.world.height / 2); goal_properties = {textura: «goal_image», grupo: «metas»}; meta = newBomberman.Goal (this.game_ estado, «objetivo», goal_position, goal_properties);}};

      El prefabricada de objetivos es también simple, como se puede ver en el siguiente código. Tendrá un cuerpo físico inmuebles también, pero va a comprobar si hay solapamientos con el jugador. Cuando el jugador toca el objetivo, se llamará al método “next_level” de TiledState, que hará avanzar el nivel. El método “next_level” ya se demostró antes, ya que cambia la localStorage. Tenga en cuenta que este método utiliza una propiedad “next_level” del archivo JSON, por lo que hay que añadir que existe en consecuencia.
      var Bomberman = Bomberman || {}; Bomberman.Goal = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.scale.setTo (0,5); this.game_state.game.physics.arcade.enable (this); this.body.immovable = true;}; Bomberman.Goal.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Goal.prototype.constructor = Bomberman.Goal; Bomberman.Goal.prototype.update = function () { «utilizar estricta»; this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.players, this.reach_goal, null, este);}; Bomberman.Goal.prototype.reach_goal = function () { «utilizar estricta»; this.game_state.next_level ();}; 12345678910111213141516171819202122232425varBomberman = Bomberman || {}; Bomberman.Goal = función (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.scale.setTo (0,5); this.game_state.game.physics.arcade.enable (this); this.body.immovable = true;}; Bomberman. Goal.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Goal.prototype.constructor = Bomberman.Goal; Bomberman.Goal.prototype.update = function () { «utilizar estricta»; this.game_state.game. physics.arcade.overlap (esto, this.game_state.groups.players, this.reach_goal, null, este);}; Bomberman.Goal.prototype.reach_goal = function () { «utilizar estricta»; this.game_state.next_level ( );};.

      puede que ya intentar jugar con los objetivos y el objetivo, avanzando niveles y comprobar si están funcionando correctamente

      blancos

      Limitar el número de bombas que el jugador puede caer

      En este tutorial, vamos a limitar el número de bombas que el jugador puede caer de forma simultánea. Para ello vamos a cambiar la forma en que el control de la bomba cayendo al trabajo de la siguiente manera: hacemos un seguimiento del número total de bombas que el jugador puede caer y el índice de la bomba actual. Cuando se pulsa la barra espaciadora, buscamos en primer lugar si es posible dejar caer otra bomba comparando el índice de la bomba actual con el número total de bombas. Si es así, se nos cae la bomba sólo si no colisiona con un ya cayó uno. Por último, cuando se deja caer una bomba, hay que actualizar el índice de la bomba actual. El código siguiente muestra los cambios en el prefabricada jugador.
      var Bomberman = Bomberman || {}; Bomberman.Player = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.walking_speed = + properties.walking_speed; this.bomb_duration = + properties.bomb_duration; this.animations.add ( «walking_down», [1, 2, 3], 10, true); this.animations.add ( «walking_left», [4, 5, 6, 7], 10, true); this.animations.add ( «walking_right», [4, 5, 6, 7], 10, true); this.animations.add ( «walking_up», [0, 8, 9], 10, true); this.stopped_frames = [1, 4, 4, 0, 1]; this.game_state.game.physics.arcade.enable (this); this.body.setSize (14, 12, 0, 4); this.cursors = this.game_state.game.input.keyboard.createCursorKeys (); this.initial_position = new Phaser.Point (this.x, this.y); this.number_of_lives = localStorage.number_of_lives || + properties.number_of_lives; this.number_of_bombs = localStorage.number_of_bombs || + properties.number_of_bombs; this.current_bomb_index = 0;}; Bomberman.Player.prototype.update = function () { «utilizar estricta»; colliding_bombs var; this.game_state.game.physics.arcade.collide (Esto, this.game_state.layers.walls); this.game_state.game.physics.arcade.collide (Esto, this.game_state.layers.blocks); this.game_state.game.physics.arcade.collide (Esto, this.game_state.groups.bombs); this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.explosions, this.die, null, este); this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.enemies, this.die, null, este); si (this.cursors.left.isDown && this.body.velocity.x <= 0) {// mover hacia la izquierda this.body.velocity.x = -this.walking_speed; si (this.body.velocity.y === 0) {// cambiar la escala, ya que sólo tenemos una animación para izquierda y derecha this.scale.setTo direcciones (-1, 1); this.animations.play ( "walking_left"); }} Else if (this.cursors.right.isDown && this.body.velocity.x> = 0) {// movimiento correcto this.body.velocity.x = + this.walking_speed; si (this.body.velocity.y === 0) {// cambiar la escala, ya que sólo tenemos una animación para la izquierda y la derecha this.scale.setTo direcciones (1, 1); this.animations.play ( «walking_right»); }} Else {this.body.velocity.x = 0; } If (this.cursors.up.isDown && this.body.velocity.y <= 0) {// sube this.body.velocity.y = -this.walking_speed; si (this.body.velocity.x === 0) {this.animations.play ( "walking_up"); }} Else if (this.cursors.down.isDown && this.body.velocity.y> = 0) {// baja this.body.velocity.y = + this.walking_speed; si (this.body.velocity.x === 0) {this.animations.play ( «walking_down»); }} Else {this.body.velocity.y = 0; } If (this.body.velocity.x === === 0 && this.body.velocity.y 0) {// parada actual this.animations.stop animación (); this.frame = this.stopped_frames [this.body.facing]; } // si no se pulsa la barra espaciadora y es posible dejar caer otra bomba, trate de dejarlo si (this.game_state.input.keyboard.isDown (Phaser.Keyboard.SPACEBAR) && this.current_bomb_index = 0) {// movimiento correcto this.body.velocity.x = + this.walking_speed; si (this.body.velocity.y === 0) {// cambiar la escala, ya que sólo tenemos una animación para izquierda y derecha directionsthis.scale.setTo (1,1); this.animations.play ( «walking_right»);}} else {this.body.velocity.x = 0;} if (this.cursors.up.isDown && este .body.velocity.y <= 0) {// moverse hacia arriba this.body.velocity.y = -this.walking_speed; si (this.body.velocity.x === 0) {this.animations.play (" walking_up ");}} elseif (this.cursors.down.isDown && this.body.velocity.y> = 0) {// baja this.body.velocity.y = + this.walking_speed; si (this.body. velocity.x === 0) {this.animations.play ( «walking_down»);}} else {this.body.velocity.y = 0;} if (this.body.velocity.x === 0 && esto. body.velocity.y === 0) {// parada actual this.animations.stop animación (); this.frame = this.stopped_frames [this.body.facing];} // si no se pulsa la barra espaciadora y es posible dejar caer otra bomba, trate de dejar caer ITIF (this.game_state.input.keyboard.isDown (Phaser.Keyboard.SPACEBAR) && this.current_bomb_index < this.number_of_bombs) {colliding_bombs = this.game_state.game.physics.arcade.getObjectsAtLocation (this.x, this.y, this.game_state.groups.bombs); // lanzar la bomba sólo si no lo hace chocar con otra oneif (colliding_bombs.length === 0) {this.drop_bomb ();}}}; Bomberman.Player.prototype.drop_bomb = function () { "utilizar estricta"; varbomb, bomb_name, bomb_position, bomb_properties; // obtener la primera bomba de muertos desde el poolbomb_name = this.name + "_ _ bomba" + this.game_state.groups.bombs.countLiving (); bomb_position = newPhaser.Point (this.x, this.y); bomb_properties = { "textura": "bomb_spritesheet" , "grupo": "bombas", bomb_radius: 3}; bombas = Bomberman.create_prefab_from_pool (this.game_state.groups.bombs, Bomberman.Bomb.prototype.constructor, this.game_state, bomb_name, bomb_position, bomb_properties); this.current_bomb_index + = 1;};

      Además, tenemos que cambiar la bomba prefabricada para disminuir el índice de la bomba de corriente cuando explota. Esta modificación se muestra en el código de abajo.
      Bomberman.Bomb.prototype.explode = function () { «utilizar estricta»; this.kill (); var explosion_name, explosion_position, explosion_properties, explosión, wall_tile, block_tile; explosion_name = this.name + «_explosion_» + this.game_state.groups.explosions.countLiving (); explosion_position = nuevo Phaser.Point (this.position.x, this.position.y); explosion_properties = {textura: «explosion_image», grupo: «explosiones», duración: 0,5}; // crear una explosión en la explosión posición bomba = Bomberman.create_prefab_from_pool (this.game_state.groups.explosions, Bomberman.Explosion.prototype.constructor, this.game_state, explosion_name, explosion_position, explosion_properties); // crear explosiones en cada this.create_explosions de dirección (-1, -this.bomb_radius, -1, «x»); this.create_explosions (1, this.bomb_radius, 1, «x»); this.create_explosions (-1, -this.bomb_radius, -1 «y»); this.create_explosions (1, this.bomb_radius, 1 «y»); this.game_state.prefabs.player.current_bomb_index – = 1;}; 12345678910111213141516171819Bomberman.Bomb.prototype.explode = function () { «utilizar estricta»; this.kill (); varexplosion_name, explosion_position, explosion_properties, explosión, wall_tile, block_tile; explosion_name = this.name + «_ explosión _» + this.game_state.groups.explosions.countLiving (); explosion_position = newPhaser.Point (this.position.x, this.position.y); explosion_properties = {textura: «explosion_image», grupo : «explosiones», duración: 0,5}; // crear una explosión en el positionexplosion bomba = Bomberman.create_prefab_from_pool (this.game_state.groups.explosions, Bomberman.Explosion.prototype.constructor, this.game_state, explosion_name, explosion_position, explosion_properties) ; // crear explosiones en cada directionthis.create_explosions (-1, -this.bomb_radius, -1, «x»); this.create_explosions (1, this.bomb_radius, + 1, «x»); this.create_explosions (- 1, -this.bomb_radius, -1 «y»); this.create_explosions (1, this.bomb_radius, + 1 «y»); this.game_state.prefabs.player.current_bomb _index- = 1;};

      Trate de jugar ahora y ver si se puede controlar el número máximo de bombas lanzadas. Pruebe a cambiar y comprobar si funciona correctamente.

      bombas

      Adición de artículos

      Cuando un mosaico está destruido por una bomba, con el tiempo un artículo debería aparecer al jugador. Para ello, en primer lugar vamos a crear una casa prefabricada de artículos genéricos, como se muestra a continuación. Este prefabricada tendrá un cuerpo físico inmuebles, que se solapa con explosiones y el jugador. Cuando choca con una explosión, el elemento se destruye, y cuando choca con un jugador, se recoge. También escribimos un método predeterminado “collect_item”, que sólo mata a él.
      var Bomberman = Bomberman || {}; Bomberman.Item = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.game_state.game.physics.arcade.enable (this); = This.body.immovable verdaderos; this.scale.setTo (0,75);}; Bomberman.Item.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Item.prototype.constructor = Bomberman.Item; Bomberman.Item.prototype.update = function ( ) { «utilizar estricta»; this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.players, this.collect_item, null, este);}; Bomberman.Item.prototype.collect_item = function () { «utilizar estricta»; // por defecto, un elemento se destruye cuando se cobran this.kill ();}; 123456789101112131415161718192021222324252627varBomberman = Bomberman || {}; Bomberman.Item = función (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Prefab .call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.game_state.game.physics.arcade.enable (this); this.body.immovable = true; this.scale. setTo (0,75);}; Bomberman.Item.prototype = Object.create (Bomberman.Prefab.prototype); Bomberman.Item.prototype.constructor = Bomberman.Item; Bomberman.Item.prototype.update = función) { «uso ( estricta «; this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.players, this.collect_item, null, este);}; Bomberman.Item.prototype.collect_item = función) {(» uso estricto «; // por defecto, un elemento se destruye cuando collectedthis.kill ();};

      Ahora, vamos a crear otras casas prefabricadas que se extenderán de artículos y sobrescribe el‘método collect_item’. Vamos a crear dos elementos:
      1) Artículo vida, lo que aumentará el número de jugador de vidas
      2) Artículo de bomba, lo que aumentará el número de bombas que el jugador puede caer

      El código prefabricada LifeItem se muestra a continuación. Como ya tenemos nuestro prefabricada artículo genérico, sólo tenemos que sobreescribir el método “collect_item”, que aumentan el número de jugador de vidas.
      var Bomberman = Bomberman || {}; Bomberman.LifeItem = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Item.call (esto, game_state, nombre, posición, propiedades);}; Bomberman.LifeItem.prototype = Object.create (Bomberman.Item.prototype); Bomberman.LifeItem.prototype.constructor = Bomberman.LifeItem; Bomberman. LifeItem.prototype.collect_item = function (artículo, reproductor) { «use strict»; Bomberman.Item.prototype.collect_item.call (this); player.number_of_lives + = 1;}; 123456789101112131415varBomberman = Bomberman || {}; Bomberman.LifeItem = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Item.call (esto, game_state, nombre, posición , propiedades);}; Bomberman.LifeItem.prototype = Object.create (Bomberman.Item.prototype); Bomberman.LifeItem.prototype.constructor = Bomberman.LifeItem; Bomberman.LifeItem.prototype.collect_item = función (tema, al jugador) { «utilizar estricta»; Bomberman.Item.prototype.collect_item.call (this); player.number_of_lives + = 1;};

      El código prefabricada BombItem es similar y se muestra a continuación. En el método “collect_item” sólo tenemos que aumentar el número de jugador de bombas, limitado por un número máximo.
      var Bomberman = Bomberman || {}; Bomberman.BombItem = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Item.call (esto, game_state, nombre, posición, propiedades); this.MAXIMUM_NUMBER_OF_BOMBS = 5;}; Bomberman.BombItem.prototype = Object.create (Bomberman.Item.prototype); Bomberman.BombItem.prototype.constructor = Bomberman.BombItem; Bomberman.BombItem.prototype.collect_item = function (artículo, jugador ) { «utilizar estricta»; Bomberman.Item.prototype.collect_item.call (this); // aumenta el número de jugador de bombas, limitado por un máximo de player.number_of_bombs = Math.min (player.number_of_bombs + 1, this.MAXIMUM_NUMBER_OF_BOMBS);}; 123456789101112131415161718varBomberman = Bomberman || {}; Bomberman.BombItem = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Bomberman.Item.call (esto, game_state, nombre, posición, propiedades); this.MAXIMUM_NUMBER_OF_BOMBS = 5;}; Bomberman.BombItem.prototype = Object.create (Bomberman.Item .prototype); Bomberman.BombItem.prototype.constructor = Bomberman.BombItem; Bomberman.BombItem.prototype.collect_item = function (artículo, reproductor) { «use strict»; Bomberman.Item.prototype.collect_item.call (este); / / aumenta el número de jugador de bombas, limitado por un maximumplayer.number_of_bombs = Math.min (player.number_of_bombs + 1, this.MAXIMUM_NUMBER_OF_BOMBS);};

      por último, tenemos que crear los artículos cuando un azulejo se destruye. En primer lugar, vamos a añadir una propiedad en nuestra TiledState que contiene todos los artículos probabilidades y propiedades, como se muestra a continuación. Una cosa importante es que los elementos se ordenan por sus probabilidades, con el elemento de menor probabilidad de ser el primero.
      Bomberman.TiledState = function () { «utilizar estricta»; Phaser.State.call (this); this.prefab_classes = { «jugador»: Bomberman.Player.prototype.constructor, «enemigo»: Bomberman.Enemy.prototype.constructor, «objetivo»: Bomberman.Target.prototype.constructor, «life_item»: Bomberman.LifeItem.prototype .constructor, «bomb_item»: Bomberman.BombItem.prototype.constructor}; // Definir artículos disponibles this.items = {life_item: {de probabilidad: 0,1, propiedades: {textura: «life_item_image», del grupo: «elementos»}}, bomb_item: {de probabilidad: 0,3, propiedades: {textura: «bomb_item_image», grupo: «elementos»}}};}; 123456789101112131415161718Bomberman.TiledState = function () { «use strict»; Phaser.State.call (este); this.prefab_classes = { «jugador»: Bomberman.Player.prototype.constructor, «enemigo»: Bomberman.Enemy.prototype.constructor, «objetivo»: Bomberman.Target.prototype.constructor, «life_item»: Bomberman.LifeItem.prototype.constructor, «bomb_item»: Bomberman.BombItem.prototype.constructor}; / / definir itemsthis.items disponible = {life_item: {de probabilidad: 0,1, propiedades: {textura: «life_item_image», grupo: «artículos»}}, bomb_item: {probabilidad: 0,3, propiedades: {textura: «bomb_item_image», grupo: «elementos»}}};};

      Ahora, en el prefabricado de bomba, después de que destruyamos una baldosa tenemos que comprobar si se debe crear un artículo. Para ello, generamos un artículo al azar usando el generador Phaser aleatoria de datos (para más información, se puede consultar la documentación), e iterar a través de todos los elementos disponibles que comparan el número generado con la probabilidad artículo. Si el número generado es menor que la probabilidad de un artículo, lo creamos y detener el bucle. Dado que los artículos están clasificadas por la probabilidad, las menos probables tendrán prioridad. Las modificaciones de la bomba prefabricada se muestran a continuación. Tenga en cuenta que nosotros llamamos el método “check_item” al final de “create_explosions”, ane se utiliza un conjunto de objetos para crear los artículos.
      Bomberman.Bomb.prototype.create_explosions = function (initial_index, final_index, paso, eje y) { «utilizar estricta»; índice var, explosion_name, explosion_position, explosión, explosion_properties, wall_tile, block_tile; explosion_properties = {textura: «explosion_image», grupo: «explosiones», duración: 0,5}; para (índice = initial_index; Math.abs (índice) <= Math.abs (final_index); índice + = paso) {explosion_name = this.name + "_explosion_" + this.game_state.groups.explosions.countLiving (); // la posición es diferente accoring al eje si (eje === "x") {explosion_position = nuevo Phaser.Point (this.position.x + (índice * this.width), this.position.y); } Else {explosion_position = new Phaser.Point (this.position.x, this.position.y + (índice * this.height)); } Wall_tile = this.game_state.map.getTileWorldXY (explosion_position.x, explosion_position.y, this.game_state.map.tileWidth, this.game_state.map.tileHeight, "paredes"); block_tile = this.game_state.map.getTileWorldXY (explosion_position.x, explosion_position.y, this.game_state.map.tileWidth, this.game_state.map.tileHeight, "bloques"); if (! wall_tile &&! block_tile) {// crear una nueva explosión en la nueva posición explosión = Bomberman.create_prefab_from_pool (this.game_state.groups.explosions, Bomberman.Explosion.prototype.constructor, this.game_state, explosion_name, explosion_position, explosion_properties ); } Else {if (block_tile) {// cheque para el artículo para desovar this.check_for_item ({x: block_tile.x * block_tile.width, y: * block_tile.y block_tile.height}, {x: block_tile.width, y: block_tile.height}); this.game_state.map.removeTile (block_tile.x, block_tile.y, "bloques"); } rotura; }}}; Bomberman.Bomb.prototype.check_for_item = function (block_position, block_size) { "utilizar estricta"; var random_number, item_prefab_name, artículo, item_probability, item_name, item_position, item_properties, item_constructor, item_prefab; random_number = this.game_state.game.rnd.frac (); // buscar el primer elemento que puede ser generado por (item_prefab_name en this.game_state.items) {if (this.game_state.items.hasOwnProperty (item_prefab_name)) {item = this.game_state.items [item_prefab_name]; item_probability = item.probability; // desova un artículo si el número aleatorio es menor que la probabilidad artículo si (random_number Now you can try playing to see if the items are being created correctly, and if they’re having the correct effect in the game.

      item

      Acabado del juego

      And now we finished this tutorial! We added some nice content making it more fun to play. In the next tutorial we will make it multiplayer, adding another player to it! Let me know your opinion of this tutorial and what you would like to see in future ones.

      Mensajes relacionados
      The Complete Mobile Game Development Course – Platinum Edition

Deja una respuesta

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