initial commit

12 files changed, 906 insertions, 0 deletions

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html
new file mode 100644
index 0000000000..4528f0c95f
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html
@@ -0,0 +1,117 @@
+---
+title: Animaciones e interpolaciones
+slug: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens
+tags:
+  - 2D
+  - Animacion
+  - Canvas
+  - Interpolaciones
+  - JavaScript
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>14</strong> de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y cómo quedaría al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson14.html">Gamedev-Phaser-Content-Kit/demos/lesson14.html</a>.</p>
+</div>
+
+<p>Para hacer el juego más vistoso y vivo, podemos usar animaciones e interpolaciones. Esto provocará una experencia de juego mejor y más entretenida.  Exploraremos cómo implementar animaciones e interpolaciones Phaser en nuestro juego.</p>
+
+<h2 id="Animaciones">Animaciones</h2>
+
+<p>En Phaser, las animaciones implican tomar una hoja de sprites externa y mostrar los sprites de forma secuencial. Como ejemplo, haremos que una bola se tambalee cuando toque algo.</p>
+
+<p>En primer lugar toma la hoja de sprites de Github y guardala en el directorio <code>/img</code>.</p>
+
+<p>A continuación, cargaremos la hoja de cálculo : coloca la siguiente linea en la parte inferior de su función <code>preload()</code>:</p>
+
+<pre class="brush: js">game.load.spritesheet('ball', 'img/wobble.png', 20, 20);
+</pre>
+
+<p>En lugar de cargar una sola imagen de la bola, podemos cargar toda la hoja de cálculo, una colección de imágenes diferentes. Mostraremos los sprites de forma secuencial para crear la ilusión de animación. Los dos parámetros adicionales del método <code>spritesheet()</code> determinan el ancho y la altura de cada fotograma en el archivo de spritesheet dado, indicando al programa cómo cortarlo para obtener los marcos individuales.</p>
+
+<h2 id="Cargando_la_animación">Cargando la animación</h2>
+
+<p>A continuación ve a tu función create(), encuentra la linea que carga el sprite de la bola, y debajo coloca la linea que llama a <code>animations.add()</code> que se muestra a continuación:</p>
+
+<pre class="brush: js">ball = game.add.sprite(50, 250, 'ball');
+ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24);
+</pre>
+
+<p>Para añadir una animación al objeto usaremos el método <code>animations.add()</code>, que contiene los siguientes parámetros:</p>
+
+<ul>
+ <li>El nombre que elegimos para la animación.</li>
+ <li>Una matriz que define el orden en que se muestran los cuadros durante la animación. Si miras de nuevo la imagen <code>wobble.png</code>, verás que hay tres marcos. Phaser extrae estos y almacena las referencias en una matriz: posiciones 0,1, y 2. La matriz anterior dice que estamos mostrando los fotogramas 0, luego 1, después 0, etc.</li>
+ <li>La tasa de frames, en fps. Ya que estamos ejecutando la animación en 24fps y hay 9 cuadros, la animación se mostrará tres veces por segundo.</li>
+</ul>
+
+<h2 id="Aplicando_la_animación_cuando_la_pelota_golpea_el_remo">Aplicando la animación cuando la pelota golpea el remo</h2>
+
+<p>En la llamada al método <code>arcade.collide()</code> que maneja la colisión entre la pelota y la paleta (la primera linea dentro de  <code>update()</code>, ver abajo) podemos agregar un parámetro adicional que especifica una función que se ejecutará cada vez que ocurra la colisión, de la misma manera que la función <code>ballHitBrick()</code>. Actualiza la primera linea dentro de <code>update()</code> como se muestra a continuación:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+</pre>
+
+<p>Luego podemos crear la función <code>ballHitPaddle()</code> (con <code>ball</code> y <code>paddle</code> como parámetros por defecto), reproduciendo la animación de oscilación cuando se llama. Añade la función justo antes de la etiqueta de cierre <code>&lt;/script&gt;</code>:</p>
+
+<pre class="brush: js">function ballHitPaddle(ball, paddle) {
+    ball.animations.play('wobble');
+}
+</pre>
+
+<p>La animación se muestra cada vez que la pelota golpea la paleta. También puedes agregar la llamada a <code>animations.play()</code> dentro de la función <code>ballHitBrick()</code>, si crees que el juego se verá mejor.</p>
+
+<h2 id="Interpolaciones">Interpolaciones</h2>
+
+<p>Mientras que las animaciones reproducen sprites externos secuencialmente, las interpolaciones animan suavemente las propiedades de un objeto en el mundo del juego como el ancho o la opacidad.</p>
+
+<p>Agreguemos una interpolación a nuestro juego para hacer que los ladrillos desaparezcan suavemente cuando son golpeados por la pelota. Ve a la función <code>ballhitBrick()</code>, busca la linea <code>brick.kill();</code> , y reemplazala por lo siguiente:</p>
+
+<pre class="brush: js">var killTween = game.add.tween(brick.scale);
+killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None);
+killTween.onComplete.addOnce(function(){
+    brick.kill();
+}, this);
+killTween.start();
+</pre>
+
+<p>Veamos esto para que puedas saber lo que está pasando:</p>
+
+<ol>
+ <li>Al definir una nueva interpolación, debes especificar qué propiedad se interpolará; en nuestro caso, en lugar de ocultar los ladrillos instantáneamente cuando la bola los golpea, haremos que su ancho y altura se ajusten a cero, por lo que desaparecerán. Al final usamos el método, <code>add.tween()</code>, especificando <code>brick.scale</code>  como el argumento, ya que esto es lo que queremos interpolar.</li>
+ <li>El método <code>to()</code> define el estado del objeto al final de la interpolación. Toma un objeto que contenga los valores finales deseados del parámetro elegido (la escala toma un valor de escala, 1 es 100% del tamaño, 0 es 0% del tamaño, etc.), el tiempo de interpolación en milisegundos y el tipo de interpolación.</li>
+ <li>También añadiremos el controlador de eventos opcional <code>onComplete</code>, que define una función que se ejecutará cuando finalice la interpolación.</li>
+ <li>Lo último que debe hacer es iniciar la interpolación de inmediato utilizando <code>start()</code>.</li>
+</ol>
+
+<p>Esa es la versión expandida de la definición de interpolación, pero también podemos usar la sintaxis abreviada:</p>
+
+<pre class="brush: js">game.add.tween(brick.scale).to({x:2,y:2}, 500, Phaser.Easing.Elastic.Out, true, 100);
+</pre>
+
+<p>Esta interpolación duplicará la escala del ladrillo en medio segundo con el uso de Elastic easing, se iniciará automáticamente, y tendrá un retardo de 100 milisegundos.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comprobar el código final de esta lección en la demo de abajo, y probarlo para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/9o4pakrb/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Las animaciones y las interpolaciones se ven muy bien, pero podemos agregar más a nuestro juego. En la siguiente lección veremos cómo manejar los botones.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}</p>
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
new file mode 100644
index 0000000000..672d7528a6
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/botones/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
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>paso 15 </strong>de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson15.html">Gamedev-Phaser-Content-Kit/demos/lesson15.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">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.</span></p>
+
+<h2 id="Variables_nuevas">Variables nuevas</h2>
+
+<p>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:</p>
+
+<pre class="brush: js">var playing = false;
+var startButton;
+</pre>
+
+<h2 id="Cargando_el_botón_de_spritesheet">Cargando el botón de spritesheet</h2>
+
+<p>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 <code>preload()</code>:</p>
+
+<pre class="brush: js">game.load.spritesheet('button', 'img/button.png', 120, 40);
+</pre>
+
+<p>El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.</p>
+
+<p>También se debe tomar el botón de spritesheet de <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/button.png">Github</a>, y guardarlo en el directorio <code>/img</code>.</p>
+
+<h2 id="Añadiendo_el_botón_al_juego">Añadiendo el botón al juego</h2>
+
+<p>Para añadir el botón al juego usaremos el método <code>add.button</code>. Añade las siguientes lineas del botón a la función <code>create()</code>:</p>
+
+<pre class="brush: js">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);
+</pre>
+
+<p>Los parámetros del método <code>button()</code> son los siguientes:</p>
+
+<ul>
+ <li>Las coordenadas x e y del botón.</li>
+ <li>El nombre del elemento gráfico que se mostrará en el botón.</li>
+ <li>Una función de callback que se ejecutará cuando se presione el botón.</li>
+ <li>Una referencia a <code>this</code> para especificar el contexto de ejecución.</li>
+ <li>Los marcos que usaremos para los eventos <em>over</em>, <em>out</em> and <em>down</em>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: 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.</p>
+</div>
+
+<p>Ahora necesitamos definir la función <code>startGame()</code> referenciada en el siguiente código:</p>
+
+<pre class="brush: js">function startGame() {
+    startButton.destroy();
+    ball.body.velocity.set(150, -150);
+    playing = true;
+}
+</pre>
+
+<p>Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable <code>playing</code> a <code>true</code>.</p>
+
+<p>Para terminar con esta sección, vuelve a la función <code>create()</code>, encuentra la linea <code>ball.body.velocity.set(150, -150);</code>, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.</p>
+
+<h2 id="Mantener_la_paleta_inmóvil_antes_de_que_comience_el_juego">Mantener la paleta inmóvil antes de que comience el juego</h2>
+
+<p>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 <code>playing</code> y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función <code>update()</code> así:</p>
+
+<pre class="brush: js">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;
+    }
+}
+</pre>
+
+<p>De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}</p>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>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.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html
new file mode 100644
index 0000000000..e2fa08acf6
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html
@@ -0,0 +1,61 @@
+---
+title: Collision detection
+slug: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
+tags:
+  - 2D
+  - Deteccion de colision
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}</p>
+
+<div class="summary">
+<p>Este es el paso<strong> 10 </strong>de un total de 16, del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser.</a> Puedes encontrar el código fuente tal y cómo queda al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson10.html">Gamedev-Phaser-Content-Kit/demos/lesson10.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Ahora en el próximo desafío: la detección de colisiones entre la bola y los ladrillos. Por suerte, podemos usar el motor de física para verificar las colisiones no solo entre objetos individuales (como la pelota y la paleta), sino también entre un objeto y el grupo.</span></p>
+
+<h2 id="Detección_de_colisión_ladrillobola">Detección de colisión ladrillo/bola</h2>
+
+<p>El motor de físicas hace que todo sea mucho más fácil - solo necesitamos agregar dos simples fragmentos de código. Primero, añade una nueva línea dentro de la función  <code>update()</code> que verifique la detección de las colisiones entre la bola y los ladrillos, como se muestra a continuación:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+</pre>
+
+<p>La posición de la bola se calcula contra las posiciones de todos los ladrillos del grupo. El tercer parámetro opcional es la función que se ejecuta cuando se produce una colisión: <code>ballHitBrick()</code>. Crea esta nueva función en la parte inferior de tu código, justo antes de la etiqueta de cierre <code>&lt;/script&gt;</code>, como sigue:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+}
+</pre>
+
+<p>¡Y ya está! Vuelve a cargar el código, y verás que la nueva detección de colisión funciona correctamente.</p>
+
+<p>Gracias a Phaser, se pasan dos parámetros a la función: el primero es la bola, que definimos explícitamente en el método de colisión, y el segundo es el único bloque del grupo de ladrillos con el que la bola está colisionando. Dentro de la función, eliminamos el bloque en cuestión de la pantalla ejecutando el método<code>kill()</code> en él.</p>
+
+<p>Seguro que esperarabas tener que escribir muchos más cálculos para implementar la detección de colisiones cuando se utiliza<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection"> JavaScript</a> puro. Esa es la belleza de usar el marco: puedes dejar un montón de código aburrido a Phaser, y enfocarte en las partes más divertidas e interesantes de hacer un juego.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes consultar el código terminado para esta lección en la demo que aparece a continuación, y jugar con él para comprender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/wwneakwf/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Podemos golpear los ladrillos y eliminarlos, lo cual sería una buena adición al juego. Sería incluso mejor contar los ladrillos destruidos incrementando la puntuación como resultado.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
new file mode 100644
index 0000000000..83811d20e2
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
@@ -0,0 +1,127 @@
+---
+title: Extra lives
+slug: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives
+tags:
+  - 2D
+  - JavaScript
+  - Lienzo
+  - Lona
+  - Phaser
+  - Principiante
+  - Tutorial
+  - Vidas
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>número 13</strong> de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y cómo queda al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson13.html">Gamedev-Phaser-Content-Kit/demos/lesson13.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Podemos hacer que el juego sea divertido por más tiempo añadiendo vidas. En este artículo implementaremos un sistema de vidas, para que el jugador pueda seguir jugando hasta que haya perdido tres vidas, no solo una.</span></p>
+
+<h2 id="Nuevas_variables">Nuevas variables</h2>
+
+<p>Añade las siguientes líneas debajo de las ya existentes en tú código:</p>
+
+<pre class="brush: js">var lives = 3;
+var livesText;
+var lifeLostText;
+</pre>
+
+<p>Estas almacenarán las vidas, el texto que muestra el número de vidas restante, y el texto que se muestra en pantalla cuando el jugador pierde todas sus vidas.</p>
+
+<h2 id="Definiendo_las_nuevas_etiquetas_de_texto">Definiendo las nuevas etiquetas de texto</h2>
+
+<p>Definir los textos es parecido a algo que ya hicimos en la lección de la <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score"> puntuación</a>. Añade las siguientes líneas debajo de la definición de <code>scoreText</code> dentro de la función <code>create()</code>:</p>
+
+<pre class="brush: js">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' });
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+</pre>
+
+<p>Los objetos <code>livesText</code> y <code>lifeLostText</code> se parecen mucho al <code>scoreText</code> — definen una posición en la pantalla, el texto actual a mostrar, y el estilo de la fuente. El primero está anclado en el borde superior derecho para alinearse con la pantalla y el segundo está centrado, ambos usan <code>anchor.set()</code>.</p>
+
+<p>El texto <code>lifeLostText</code> se mostrará solamente cuando se pierda la vida, así que su visibilidad al principio será <code>false</code>.</p>
+
+<h3 id="Haciendo_nuestro_estilo_de_texto_DRY">Haciendo nuestro estilo de texto DRY</h3>
+
+<p>Cómo probablemente hayas notado, estamos usando el mismo estilo para los tres textos: <code>scoreText</code>, <code>livesText</code> y <code>lifeLostText</code>. Si quisiéramos cambiar el tamaño de la fuente o el color tendríamos que hacerlo en muchos lugares. Para hacer eso más fácil de mantener en el futuro podemos crear una variable separada que almacenará nuestro estilo, la llamaremos <code>textStyle</code> y la colocaremos después de las definiciones de los textos:</p>
+
+<pre class="brush: js">textStyle = { font: '18px Arial', fill: '#0095DD' };
+</pre>
+
+<p>Ahora podemos usar esta variable para dar estilo a nuestros textos — actualiza tú código para que cada una de las múltiples instancias de estilo de tú texto sean reemplazadas por la variable:</p>
+
+<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
+livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle);
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle);
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+</pre>
+
+<p>De esta manera cambiando la fuente en una variable aplicará los cambios en todos los sitios donde se esté usando.</p>
+
+<h2 id="El_código_de_manejo_de_vidas">El código de manejo de vidas</h2>
+
+<p>Para implementar las vidas en nuestro juego, primero cambiaremos la función de bote de la pelota por el evento <code>onOutOfBounds</code>.En lugar de ejecutar una función anónima y mostrar un mensaje de alerta :</p>
+
+<pre class="brush: js"><s>ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);</s>
+</pre>
+
+<p>Vamos a asignar una nueva función llamada <code>ballLeaveScreen</code>; borra el manejador de evento anterior (mostrado arriba) y sustitúyelo por la siguiente línea:</p>
+
+<pre class="brush: js">ball.events.onOutOfBounds.add(ballLeaveScreen, this);
+</pre>
+
+<p>Queremos decrementar el número de vidas cada vez que la pelota abandone el lienzo.Añade la definición de la función <code>ballLeaveScreen()</code> al final de tu código :</p>
+
+<pre class="brush: js">function ballLeaveScreen() {
+    lives--;
+    if(lives) {
+        livesText.setText('Lives: '+lives);
+        lifeLostText.visible = true;
+        ball.reset(game.world.width*0.5, game.world.height-25);
+        paddle.reset(game.world.width*0.5, game.world.height-5);
+        game.input.onDown.addOnce(function(){
+            lifeLostText.visible = false;
+            ball.body.velocity.set(150, -150);
+        }, this);
+    }
+    else {
+        alert('You lost, game over!');
+        location.reload();
+    }
+}
+</pre>
+
+<p>En lugar de mostrar el mensaje de alerta cuando pierdes una vida, primero quitaremos una vida del número actual y comprobaremos que no sea cero. Si lo es, quiere decir que el jugador tiene todavía algunas vidas y puede continuar jugando — verá el mensaje de pérdida de vida, las posiciones de la pelota y la paleta se reiniciarán en la pantalla y en la siguiente entrada (click o toque) el mensaje se ocultará y la pelota comenzará a moverse de nuevo.</p>
+
+<p>Cuando el número de vidas disponibles alcanza el cero, el juego termina y se muestra un mensaje de "game over".</p>
+
+<h2 id="Eventos">Eventos</h2>
+
+<p>Probablemente hayas notado las llamadas a los métodos <code>add()</code> y <code>addOnce()</code> en los dos bloques de código de arriba y te hayas preguntado en qué se diferencian. La diferencia es que el método <code>add()</code> vincula la función dada y hace que se ejecute cada vez que se produce el evento, mientras que  <code>addOnce()</code>  es útil cuando deseas que la función enlazada se ejecute solo una vez y luego se desvincule para que no se ejecute otra vez. En nuestro caso, en cada evento <code>outOfBounds</code> el <code>ballLeaveScreen</code> se ejecutará, pero cuando la pelota abandona la pantalla  solo queremos quitar el mensaje de la pantalla una sola vez.</p>
+
+<h2 id="Compare_tu_código">Compare tu código</h2>
+
+<p>Puedes consultar el código terminado de esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/yk1c5n0b/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Las vidas hacen el juego más indulgente — si pierdes una vida, todavía tienes dos más con las que continuar jugando. Ahora expandiremos la apariencia del juego añadiendo <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">animaciones e interpolaciones</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html
new file mode 100644
index 0000000000..1b948ac63e
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html
@@ -0,0 +1,55 @@
+---
+title: Game over
+slug: Games/Tutorials/2D_breakout_game_Phaser/Game_over
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - Principiante
+  - Tutorial
+  - game over
+  - juego
+  - juego terminado
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Game_over
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}}</p>
+
+<div class="summary">
+<p>Este es el paso numero <strong>ocho </strong>de los 16 del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente de como debería verse, después de haber completado esta lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson08.html">Gamedev-Phaser-Content-Kit/demos/lesson08.html</a>.</p>
+</div>
+
+<p>Para hacer el juego más interesante podemos introducir la habilidad de perder --- si no golpeas la pelota antes de que alcance el borde inferior de la pantalla, se acabará el juego.</p>
+
+<h2 id="Cómo_perder">Cómo perder</h2>
+
+<p>Para proporcionar la habilidad de perder, deberemos inhabilitar las bolas que colisionen con el borde inferior de la pantalla. Añade el siguiente código dentro de la función <code>create()</code>; justo después de definir los atributos de las bolas está bien:</p>
+
+<pre class="brush: js">game.physics.arcade.checkCollision.down = false;
+</pre>
+
+<p>Esto hará que a las tres paredes(arriba, izquierda y derecha) les rebote la bola, pero la cuarta pared (abajo) desaparecerá, dejando que la bola caiga fuera de la pantalla si la pala no lo alcanza. Necesitamos una forma de detectar esto y actuar en consecuencia. Añade las siguientes lineas justo debajo de la nueva linea, añadida anteriormente:</p>
+
+<pre class="brush: js">ball.checkWorldBounds = true;
+ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);
+</pre>
+
+<p>Añadiendo esas lineas conseguiremos que la bola compruebe los límites de su mundo(en nuestro caso la pantalla) y ejecute la función vinculada al evento <code>onOutOfBounds</code>. Cuando hagas click en el mensaje de alerta resultante, la página se reseteará, asi podrás jugar otra vez.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comprobar el código final para esta lección en la demo de abajo, y jugar con ello para entender mejor como funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/436bckb7/","","400")}}</p>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>Ahora el juego básico está hecho, hagamos mas interesante el caso introduciendo ladrillos para romper --- es hora de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">construir el campo de ladrillos</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/index.html
new file mode 100644
index 0000000000..5d539b7442
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/index.html
@@ -0,0 +1,63 @@
+---
+title: 2D breakout game using Phaser
+slug: Games/Tutorials/2D_breakout_game_Phaser
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - Phaser
+  - TopicStub
+  - Tutorial
+translation_of: Games/Tutorials/2D_breakout_game_Phaser
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
+
+<p class="summary">In this step-by-step tutorial we create a simple mobile <strong>MDN Breakout</strong> game written in JavaScript, using the <a href="http://phaser.io/">Phaser</a> framework.</p>
+
+<p>Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.</p>
+
+<p>To get the most out of this series of articles you should already have basic to intermediate <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Lesson_details">Lesson details</h2>
+
+<p>All the lessons — and the different versions of the <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">MDN Breakout game</a> we are building together — are <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">available on GitHub</a>:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Scaling</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Load the assets and print them on screen</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Move the ball</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physics</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">Bounce off the walls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">Player paddle and controls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Game over</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">Build the brick field</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection">Collision detection</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">The score</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Win the game</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra lives</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations and tweens</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Buttons</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Randomizing gameplay</a></li>
+</ol>
+
+<p>As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p>
+
+<p>After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This series of articles can be used as material for hands-on game development workshops. You can also make use of the <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> based on this tutorial if you want to give a talk about game development with Phaser.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Ok, let's get started! Head to the first part of the series — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
new file mode 100644
index 0000000000..efa8dc6cd9
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
@@ -0,0 +1,81 @@
+---
+title: Inicializar el framework
+slug: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}</p>
+
+<div class="summary">
+<p>Este es el primero de los 16 tutoriales para aprender a usar <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Luego de completar este tutorial, puede encontrar el código fuente de esta sección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html">Gamedev-Phaser-Content-Kit/demos/lesson01.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Antes de que podamos comenzar a escribir la funcionalidad del juego, necesitamos crear una estructura básica para procesarlo. Esto podemos hacerlo usando HTML — el framework de Phaser va a generar el elemento {{htmlelement("canvas")}} requerido.</span></p>
+
+<h2 id="El_HTML_del_juego">El HTML del juego</h2>
+
+<p>La estructura del elemento HTML es bastante simple, ya que el juego va ser renderizado por completo en el elemento {{htmlelement("canvas")}} generado por el framework. Utilizando su editor de texto favorito, cree un nuevo documento HTML, guárdelo como <code>index.html</code>, en una ubicación sensata y agregue el siguiente código:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Gamedev Phaser Workshop - lesson 01: Initialize the framework&lt;/title&gt;
+    &lt;style&gt;* { padding: 0; margin: 0; }&lt;/style&gt;
+    &lt;script src="js/phaser.min.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+    var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
+      preload: preload, create: create, update: update
+    });
+    function preload() {}
+    function create() {}
+    function update() {}
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Descargando_el_código_de_Phaser">Descargando el código de Phaser</h2>
+
+<p>A continuación, necesitamos pasar por el proceso de descargar el código fuente de Phaser y aplicarlo a nuestro documento HTML.</p>
+
+<ol>
+ <li>Ir a la página de descarga del <a href="http://phaser.io/download/stable">Phaser download page</a>.</li>
+ <li>Elegir la opción que mas le convenga — Recomendaría la opción <em>min.js</em> ya que mantiene el codigo más pequeño, y es poco probable que tenga que pasar por el código fuente de todos modos.</li>
+ <li>Guarde el código Phaser dentro de un directorio<code>/js</code> en la misma ubicación que su archivo <code>index.html</code>.</li>
+ <li>Actualice el valor <code>src</code> del primer elemento {{htmlelement("script")}} como se muestra arriba.</li>
+</ol>
+
+<h2 id="Caminando_a_través_de_lo_que_tenemos_hasta_ahora">Caminando a través de lo que tenemos hasta ahora</h2>
+
+<p>En este punto, tenemos un <code>charset</code> definido, {{htmlelement("title")}} y algunos CSS básicos en el encabezado para restablecer el <code>margin</code> y el <code>padding</code>. También tenemos un elemento {{htmlelement("script")}} para aplicar el código fuente del Phaser a la página. El cuerpo contiene un segundo elemento {{htmlelement("script")}}, donde vamos a escribir el codigo JavaScript para renderizar el juego y controlarlo.</p>
+
+<p>El elemento {{htmlelement("canvas")}} es generado automaticamente por el framework. Estamos inicializandolo creando un nuevo objeto <code>Phaser.Game</code> y asignandolo a la variable del juego. Los parametros son:</p>
+
+<ul>
+ <li>El ancho y el alto para configurar el {{htmlelement("canvas")}}.</li>
+ <li>El método de renderizado. Las otras tres opciones son <code>AUTO</code>, <code>CANVAS</code> y <code>WEBGL</code>. Podemos establecer uno de los dos últimos explícitamente o usar <code>AUTO</code> para dejar que Phaser decida cuál usar. Usualmente usa WebGL si está disponible en el navegador, volviendo a Canvas 2D si no es así.</li>
+ <li>El <code>id</code> del {{htmlelement("canvas")}} se utilizará para renderizar si ya existe en la pagina (hemos especificado null porque queremos que Phaser cree el suyo propio).</li>
+ <li>Los nombres que se usarán para las tres funciones claves del Phaser que cargan e incian el juego, y actualizan el bucle del juego en cada fotograma; usaremos los mismos nombres para mantenerlo limpio.
+  <ul>
+   <li><code>preload</code> se encargará de precargar los assets</li>
+   <li><code>create</code> se ejecuta una vez cuando todo está cargado y listo</li>
+   <li><code>update</code> se ejecuta en cada fotograma.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/h6cwzv2b/","","400")}}</p>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Ahora hemos configurado el HTML básico y aprendido un poco sobre la inicialización de Phaser, continuemos con la segunda lección y aprendamos sobre <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">scaling</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html
new file mode 100644
index 0000000000..c211b0512d
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html
@@ -0,0 +1,51 @@
+---
+title: Move the ball
+slug: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball
+tags:
+  - 2D
+  - Emocionante
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>4º </strong>paso sobre 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y como quedaría al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson04.html">Gamedev-Phaser-Content-Kit/demos/lesson04.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Tenemos a nuestra pelota azul pintada en la pantalla, pero sin hacer nada — Estaría bien hacerla moverse de algún modo. Este artículo muestra como hacerlo.</span></p>
+
+<h2 id="Actualizando_la_posición_de_la_pelota_en_cada_marco">Actualizando la posición de la pelota en cada marco</h2>
+
+<p>¿Recuerdas la función <code>update()</code> y su definición? El código del interior del cuadro se ejecuta en cada cuadro, así que ese es el mejor lugar para colocar el código que actualiza la posición de la pelota en la pantalla. Añade las siguientes lineas a la función <code>update()</code>, como se muestra a continuación:</p>
+
+<pre class="brush: js">function update() {
+    ball.x += 1;
+    ball.y += 1;
+}
+</pre>
+
+<p>El código de arriba incrementa en 1 las propiedades <code>x</code> e <code>y</code> , las cuales representan las coordenadas de la pelota en el lienzo, en cada cuadro. Vuelve a cargar el index.html y deberías ver la pelota rodando a través de la pantalla.</p>
+
+<h2 id="Compara_tú_código">Compara tú código</h2>
+
+<p>Puedes comprobar el código terminado de esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/g1cfp0vv/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>El siguiente paso es añadir una detección básica de colisión, para que la pelota pueda rebotar con las paredes.Esto nos llevará unas cuántas líneas de código — un paso significativamente más complejo que lo que hemos visto hasta ahora especialmente si queremos añadir la paleta y colisiones con los ladrillos — pero afortunadamente Phaser nos permite hacerlo de una forma mucho más sencilla que si lo quisieramos hacer usando JavaScript puro.</p>
+
+<p>En cualquier caso, antes de hacer todo esto debemos introducir los motores de Física de Phaser y hacer un poco de trabajo de configuración.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}</p>
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
new file mode 100644
index 0000000000..0276d5dc7f
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/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
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>paso 6</strong> de 16 del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">tutorial de Gamedev Phaser</a>. Puedes encontrar el código fuente como debería verse después de completar esta lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson06.html">Gamedev-Phaser-Content-Kit/demos/lesson06.html</a>.</p>
+</div>
+
+<p>Ahora que las físicas han sido introducidas,<span class="seoSummary">podemos empezar a implementar la detección de colisión en el juego — </span>primero miraremos las paredes<span class="seoSummary">.</span></p>
+
+<h2 id="Rebotando_en_las_fronteras_del_mundo">Rebotando en las fronteras del mundo</h2>
+
+<p>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 <code>collideWorldsBound</code>. Añade esta linea justo después de la llamada al método <code>game.physics.enable()</code> existente:</p>
+
+<pre class="brush: js">ball.body.collideWorldBounds = true;
+</pre>
+
+<p>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:</p>
+
+<pre class="brush: js">ball.body.bounce.set(1);
+</pre>
+
+<p>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.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>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:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">reproductor de paletas y controles</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html
new file mode 100644
index 0000000000..bec5641a07
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html
@@ -0,0 +1,56 @@
+---
+title: Scaling
+slug: Games/Tutorials/2D_breakout_game_Phaser/Scaling
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Scaling
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>2do paso</strong> de los 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser tutorial</a>. Puede encontrar el código fuente como debería verse luego de completar esta lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson02.html">Gamedev-Phaser-Content-Kit/demos/lesson02.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Scaling se refiere a como el lienzo del juego se escalará en diferentes tamaños de pantalla. Podemos hacer que la escala del juego se ajuste automáticamente a cualquier tamaño de pantalla durante la etapa de precarga por lo que no debemos preocuparnos más tarde.</span></p>
+
+<h2 id="El_objeto_scale_de_Phaser">El objeto scale de Phaser</h2>
+
+<p>Hay un objeto especial <code>scale</code> disponible en Phaser con algunos métodos prácticos y propiedades disponibles. Actualice su función <code>preload()</code> existente de la siguiente manera:</p>
+
+<pre class="brush: js">function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+}
+</pre>
+
+<p><code>scaleMode</code> tiene algunas opciones diferentes disponibles para ver como se puede escalar el Canvas (lienzo):</p>
+
+<ul>
+ <li><code>NO_SCALE</code> — nada está escalado.</li>
+ <li><code>EXACT_FIT</code> — escala el lienzo para llenar todo el espacio disponible tanto vertical como horizontalmente, sin conservar la relación de aspecto.</li>
+ <li><code>SHOW_ALL</code> — escala el lienzo, pero mantiene intacta la relación de aspecto, por lo que las imagenes no se verán sesgadas como en el modo anterior. Puede haber franjas negras visibles en los bordes de la pantalla, pero podemos vivir con eso.</li>
+ <li><code>RESIZE</code> — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode.</li>
+ <li><code>USER_SCALE</code> — le permite tener una escala dinámica personalizada, calculando el tamaño, la escala y la relación por su cuenta; de nuevo, esto es mas un modo avanzado. </li>
+</ul>
+
+<p>Las otras dos lineas de código en la función <code>preload()</code> son responsables de alinear el elemento canvas horizontal y verticalmente, por lo que siempre se centra en la pantalla independientemente del tamaño.</p>
+
+<h2 id="Agregar_un_color_de_fondo_de_lienzo_personalizado">Agregar un color de fondo de lienzo personalizado</h2>
+
+<p>También podemos agregar un color de fondo personalizado a nuestro lienzo, por lo que no se mantendrá negro. El objeto <code>stage</code> tiene una propiedad <code>backgroundColor</code> para este propósito, que podemos establecer usando la sintaxis de definición de color de CSS. Agregue la siguiente línea debajo de las otras tres que agregó anteriormente:</p>
+
+<pre class="brush: js">game.stage.backgroundColor = '#eee';
+</pre>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes verificar el código final de esta lección en la demostración en vivo a continuación, y jugar con la misma para entender mejor como trabaja:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/6a64vecL/","","400")}}</p>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Ahora que hemos configurado el escalamiento de nuestro juego, continuemos con la tercera lección y descubramos cómo <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">cargar los assets e imprimirlos en la pantalla</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html
new file mode 100644
index 0000000000..77c688cc77
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html
@@ -0,0 +1,78 @@
+---
+title: The score
+slug: Games/Tutorials/2D_breakout_game_Phaser/The_score
+tags:
+  - 2D
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiantes
+  - Puntuación
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>11</strong><strong>º </strong>de 16 del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y como quedaría al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html">Gamedev-Phaser-Content-Kit/demos/lesson11.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Tener puntuación puede hacer el juego más interesante — puedes intentar batir tu mejor puntuación, a la de tus amigos. En este artículo añadiremos un sistema de puntuación al juego.</span></p>
+
+<p>Usaremos una variable separada para almacenar la puntuación y el método  <code>text()</code> de Phaser para mostrarla en la pantalla.</p>
+
+<h2 id="Nuevas_variables">Nuevas variables</h2>
+
+<p>Añade dos nuevas variables justo después de la definición de las anteriores:</p>
+
+<pre class="brush: js">// ...
+var scoreText;
+var score = 0;
+</pre>
+
+<h2 id="Añadir_el_texto_de_puntuación_a_la_pantalla_del_juego">Añadir el texto de puntuación a la pantalla del juego</h2>
+
+<p>Ahora añade esta línea al final de la función <code>create()</code>:</p>
+
+<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
+</pre>
+
+<p>El método <code>text()</code> puede tomar cuatro parámetros:</p>
+
+<ul>
+ <li>Las coordenadas x e y dónde escribir el texto.</li>
+ <li>El texto que se mostrará.</li>
+ <li>El estilo de la fuente con la que se representará el texto.</li>
+</ul>
+
+<p>El último parámetro se parece mucho a los estilos de CSS. En nuestro caso, el texto de la puntuación será azul, con un tamaño de 18 pixeles y usará como estilo de fuente Arial.</p>
+
+<h2 id="Actualizar_el_juego_cuando_los_ladrillos_se_han_destruido">Actualizar el juego cuando los ladrillos se han destruido</h2>
+
+<p>Incrementaremos el número de puntos cada vez que la pelota golpee en un ladrillo y actualizaremos el <code>scoreText</code> para mostrar la puntuación actual. Esto, lo podremos hacer usando el método <code>setText()</code>  — añade las dos siguientes líneas a la función<code> ballHitBrick()</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+}
+</pre>
+
+<p>Eso es todo por ahora — recarga tu <code>index.html</code> y comprueba que la puntuación se actualiza por cada golpe al ladrillo.</p>
+
+<h2 id="Compare_su_código">Compare su código</h2>
+
+<p>Puede comprobar el código terminado de esta lección en la demo que aparece a continuación, y jugar para entender mejor cómo funciona el juego:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ya tenemos un sistema de puntuación, pero para qué sirve jugar y mantener la puntuación si no se puede ganar.  Veremos cómo podemos añadir la victoria, permitiendonos así ganar el juego.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html
new file mode 100644
index 0000000000..06b45f5b2b
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html
@@ -0,0 +1,60 @@
+---
+title: Win the game
+slug: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game
+tags:
+  - 2D
+  - JavaS
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - ganando
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>12º </strong>del tutorial 16 de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y como queda al completar el tutorial en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson12.html">Gamedev-Phaser-Content-Kit/demos/lesson12.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Implementar las victorias en nuestro juego es fácil: si destruyes todos los ladrillos, ganas.</span></p>
+
+<h2 id="¿Cómo_ganar">¿Cómo ganar?</h2>
+
+<p>Añade el siguiente código a la función <code>ballHitBrick()</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+
+    var count_alive = 0;
+    for (i = 0; i &lt; bricks.children.length; i++) {
+      if (bricks.children[i].alive == true) {
+        count_alive++;
+      }
+    }
+    if (count_alive == 0) {
+      alert('You won the game, congratulations!');
+      location.reload();
+    }
+}
+</pre>
+
+<p>Recorremos los ladrillos del grupo usando <code>bricks.children</code>, verificando la vida de cada uno con el método <code>.alive() </code>. Si no quedan más ladrillos con vida, mostramos un mensaje de victoria, reiniciando el juego una vez que la alerta desaparezca.</p>
+
+<h2 id="Compare_su_código">Compare su código</h2>
+
+<p>Puedes comprobar el código terminado de esta lección en la siguiente demo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/u8waa4Lx/1/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ganar y perder están implementados, por lo que la jugabilidad de nuestro juego está terminada. Ahora añadiremos algo extra — vamos a dar al jugador tres vidas en lugar de una.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}}</p>