From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../2d_breakout_game_phaser/botones/index.html | 106 --------------------- .../bounce_off_the_walls/index.html | 51 ++++++++++ .../2d_breakout_game_phaser/buttons/index.html | 106 +++++++++++++++++++++ .../rebotar_en_las_paredes/index.html | 51 ---------- 4 files changed, 157 insertions(+), 157 deletions(-) delete mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html delete mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html (limited to 'files/es/games/tutorials/2d_breakout_game_phaser') diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html deleted file mode 100644 index 672d7528a6..0000000000 --- a/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Botones -slug: Games/Tutorials/2D_breakout_game_Phaser/Botones -tags: - - 2D - - Botones - - JavaScript - - Lienzo - - Phaser - - Principiante - - Tutorial - - juegos -translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

- -
-

Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

-
- -

En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.

- -

Variables nuevas

- -

Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:

- -
var playing = false;
-var startButton;
-
- -

Cargando el botón de spritesheet

- -

Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función preload():

- -
game.load.spritesheet('button', 'img/button.png', 120, 40);
-
- -

El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.

- -

También se debe tomar el botón de spritesheet de Github, y guardarlo en el directorio /img.

- -

Añadiendo el botón al juego

- -

Para añadir el botón al juego usaremos el método add.button. Añade las siguientes lineas del botón a la función create():

- -
startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
-startButton.anchor.set(0.5);
-
- -

Los parámetros del método button() son los siguientes:

- - - -
-

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.

-
- -

Ahora necesitamos definir la función startGame() referenciada en el siguiente código:

- -
function startGame() {
-    startButton.destroy();
-    ball.body.velocity.set(150, -150);
-    playing = true;
-}
-
- -

Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable playing a true.

- -

Para terminar con esta sección, vuelve a la función create(), encuentra la linea ball.body.velocity.set(150, -150);, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.

- -

Mantener la paleta inmóvil antes de que comience el juego

- -

Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función update() así:

- -
function update() {
-    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
-    game.physics.arcade.collide(ball, bricks, ballHitBrick);
-    if(playing) {
-        paddle.x = game.input.x || game.world.width*0.5;
-    }
-}
-
- -

De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.

- -

Compara tu código

- -

Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}

- -

Siguientes pasos

- -

La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..0276d5dc7f --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html @@ -0,0 +1,51 @@ +--- +title: Rebotar en las paredes +slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes +tags: + - 2D + - Canvas + - JavaScript + - Phaser + - Principiante + - Tutorial + - fuerte + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

+ +
+

Este es el paso 6 de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente como debería verse después de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson06.html.

+
+ +

Ahora que las físicas han sido introducidas,podemos empezar a implementar la detección de colisión en el juego — primero miraremos las paredes.

+ +

Rebotando en las fronteras del mundo

+ +

La forma más fácil de hacer que nuestra bola rebote en las paredes es decirle al marco que queremos tratar los límites del elemento  {{htmlelement("canvas")}} como paredes y no dejar que la pelota pase por ellos.  En Phaser esto se puede puede lograr usando la propiedad collideWorldsBound. Añade esta linea justo después de la llamada al método game.physics.enable() existente:

+ +
ball.body.collideWorldBounds = true;
+
+ +

Ahora la bola se detendrá en el borde de la pantalla en lugar de desaparecer, pero no rebota. Para que esto ocurra tenemos que configurar su rebote. Añade la siguiente línea debajo de la anterior:

+ +
ball.body.bounce.set(1);
+
+ +

Intenta recargar index.html otra vez — ahora deberías ver la pelota rebotando en todas las paredes y moviéndose dentro del área del lienzo.

+ +

Compara tu código

+ +

Puedes consultar el código terminado para esta lección en la demostración en vivo a continuación, y jugar con él para comprender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}

+ +

Próximos pasos

+ +

Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos reproductor de paletas y controles.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html new file mode 100644 index 0000000000..672d7528a6 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html @@ -0,0 +1,106 @@ +--- +title: Botones +slug: Games/Tutorials/2D_breakout_game_Phaser/Botones +tags: + - 2D + - Botones + - JavaScript + - Lienzo + - Phaser + - Principiante + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

+ +
+

Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

+
+ +

En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.

+ +

Variables nuevas

+ +

Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:

+ +
var playing = false;
+var startButton;
+
+ +

Cargando el botón de spritesheet

+ +

Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función preload():

+ +
game.load.spritesheet('button', 'img/button.png', 120, 40);
+
+ +

El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.

+ +

También se debe tomar el botón de spritesheet de Github, y guardarlo en el directorio /img.

+ +

Añadiendo el botón al juego

+ +

Para añadir el botón al juego usaremos el método add.button. Añade las siguientes lineas del botón a la función create():

+ +
startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
+startButton.anchor.set(0.5);
+
+ +

Los parámetros del método button() son los siguientes:

+ + + +
+

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.

+
+ +

Ahora necesitamos definir la función startGame() referenciada en el siguiente código:

+ +
function startGame() {
+    startButton.destroy();
+    ball.body.velocity.set(150, -150);
+    playing = true;
+}
+
+ +

Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable playing a true.

+ +

Para terminar con esta sección, vuelve a la función create(), encuentra la linea ball.body.velocity.set(150, -150);, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.

+ +

Mantener la paleta inmóvil antes de que comience el juego

+ +

Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función update() así:

+ +
function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    if(playing) {
+        paddle.x = game.input.x || game.world.width*0.5;
+    }
+}
+
+ +

De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.

+ +

Compara tu código

+ +

Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}

+ +

Siguientes pasos

+ +

La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html deleted file mode 100644 index 0276d5dc7f..0000000000 --- a/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Rebotar en las paredes -slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes -tags: - - 2D - - Canvas - - JavaScript - - Phaser - - Principiante - - Tutorial - - fuerte - - juegos -translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

- -
-

Este es el paso 6 de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente como debería verse después de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson06.html.

-
- -

Ahora que las físicas han sido introducidas,podemos empezar a implementar la detección de colisión en el juego — primero miraremos las paredes.

- -

Rebotando en las fronteras del mundo

- -

La forma más fácil de hacer que nuestra bola rebote en las paredes es decirle al marco que queremos tratar los límites del elemento  {{htmlelement("canvas")}} como paredes y no dejar que la pelota pase por ellos.  En Phaser esto se puede puede lograr usando la propiedad collideWorldsBound. Añade esta linea justo después de la llamada al método game.physics.enable() existente:

- -
ball.body.collideWorldBounds = true;
-
- -

Ahora la bola se detendrá en el borde de la pantalla en lugar de desaparecer, pero no rebota. Para que esto ocurra tenemos que configurar su rebote. Añade la siguiente línea debajo de la anterior:

- -
ball.body.bounce.set(1);
-
- -

Intenta recargar index.html otra vez — ahora deberías ver la pelota rebotando en todas las paredes y moviéndose dentro del área del lienzo.

- -

Compara tu código

- -

Puedes consultar el código terminado para esta lección en la demostración en vivo a continuación, y jugar con él para comprender mejor cómo funciona:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}

- -

Próximos pasos

- -

Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos reproductor de paletas y controles.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

-- cgit v1.2.3-54-g00ecf