recursal/MDN huggingface dataset:
Técnicas para el desarrollo de juegos web
=========================================

Esta página muestra las técnicas básicas esenciales para cualquiera que quiera desarrollar juego web usando tecnologías web abiertas.

* Utilizar scripts asíncronos para asm.js (en-US)
    + : Especialmente cuando se trabaje en juegos medianos y grandes, los scripts asíncronos son una técnica esencial de la que aprovecharse, para poder compilar JavaScript fuera del hilo principal y que pueda ser almacenado en caché para próximos usos, resultando en una mejora significativa del rendimiento para los usuarios. Este artículo explica cómo.
* Mejorando rendimiento inicial
    + : Cómo asegurarse de que un juego se inicia rápidamente, sin dificultad y sin parecer que bloquea el navegador o el dispositivo del usuario.
* Utilizar canales de datos peer-to-peer WebRTC
    + : Además de proporcionar soporte para comunicaciones de audio y video, WebRTC permite al desarrollador configurar canales de datos *peer-to-peer* para intercambiar activamente texto o datos binarios entre usuarios. Este artículo explica lo que esto puede significar, y muestra como usar librerías que facilitan el trabajo.
* Audio para juegos web (en-US)
    + : El audio es una parte importante de cualquier juego - añade ambiente y retroalimentación para el usuario. El audio basado en web está creciendo rápidamente, pero aún hay muchas diferencias entre navegadores con las que tratar. Este artículo proporciona una guía detallada de cómo implementar audio para juegos web, mirando que funciona actualmente para la mayor cantidad de plataformas posible.
    + Detección de colisiones en 2D
    + : Una introducción breve a la detección de colisiones en un juego en 2D.
* Mapa de baldosas (Tilemap) (en-US)
    + : El uso de baldosas (tiles) es una técnica muy popular para contruir el mundo de juego en 2D. Estos artículos proporcionan una introducción al uso de mapas de baldosas y cómo implimentarlos con la API Canvas.
Juego breakout en 2D usando Phaser
==================================

* Siguiente » (en-US)

En este tutorial paso a paso, creamos un sencillo juego móvil: **MDN Breakout**, escrito en JavaScript, utilizando el framework Phaser.

Cada paso tiene muestras editables y en vivo disponibles para jugar, para que puedas ver cómo deberían ser las etapas intermedias. Aprenderás los fundamentos del uso del framework Phaser para implementar mecánicas de juego fundamentales como la renderización y el movimiento de imágenes, la detección de colisiones, los mecanismos de control, las funciones de ayuda específicas del framework, las animaciones y los tweens, y los estados de victoria y derrota.

Para sacar el máximo provecho de esta serie de artículos, deberías tener conocimientos básicos o intermedios de JavaScript. Después de terminar este tutorial, deberías ser capaz de construir tus propios juegos web simples con Phaser.

![Pantalla de juego del juego MDN Breakout creado con Phaser en el que se puede utilizar la paleta para hacer rebotar la pelota y destruir el campo de ladrillos, manteniendo registro de los puntos y las vidas](/es/docs/Games/Tutorials/2D_breakout_game_Phaser/mdn-breakout-phaser.png)

Detalles de la lección
----------------------

Todas las lecciones - y las diferentes versiones del juego MDN Breakout que estamos construyendo juntos - están disponibles en GitHub:

1. Inicializar el framework
2. Escalar
3. Cargar los archivos e imprimirlos en pantalla (en-US)
4. Mover la bola
5. Físicas (en-US)
6. Rebote en las paredes
7. Paleta y controles del jugador (en-US)
8. Fin del juego
9. Construir el campo de ladrillos (en-US)
10. Detección de colisiones
11. Puntuación
12. Ganar la partida
13. Vidas extra
14. Animaciones y keyframes intermedios
15. Botones
16. Aleatorización del juego (en-US)

Como nota sobre las vías de aprendizaje - comenzar con JavaScript puro es la mejor manera de obtener un conocimiento sólido del desarrollo de juegos web. Si aún no estás familiarizado con el desarrollo de juegos en JavaScript puro, te sugerimos que primero trabajes con la contraparte de esta serie, Breakout: juego en 2D usando JavaScript puro.

Después de eso, puedes elegir cualquier framework que te guste y usarlo para tus proyectos; nosotros hemos elegido Phaser porque es un buen framework sólido, con un buen soporte y comunidad disponible, y un buen conjunto de plugins. Los frameworks aceleran el tiempo de desarrollo y ayudan a ocuparse de las partes aburridas, permitiéndote concentrarte en las cosas divertidas. Sin embargo, los frameworks no siempre son perfectos, así que si sucede algo inesperado o quieres escribir alguna funcionalidad que el framework no proporciona, necesitarás algunos conocimientos de JavaScript puro.

**Nota:** Esta serie de artículos puede utilizarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del Gamedev Phaser Content Kit basado en este tutorial si quieres dar una charla sobre desarrollo de juegos con Phaser.

Próximos pasos
--------------

¡Comencemos! Dirígete a la primera parte de la serie - Inicializar el framework.

* Siguiente » (en-US)
Famoso juego 2D usando JavaScript puro
======================================

* Siguiente »

En este tutorial paso a paso creamos un juego de la MDN, sencillo y muy famoso, escrito íntegramente en JavaScript puro. Todos los elementos gráficos aparecerán dentro de la etiqueta `<canvas>` de HTML5.

Cada paso tiene ejemplos editables y listos para ejecutar, para que puedas ver qué aspecto debería tener el ejercicio en cada momento. Apenderás a utilizar el elemento `<canvas>` para implementar mecánicas de juego fundamentales como la representación de imágenes, el movimiento, la detección de colisiones, los mecanismos de control y el final del juego ganando o perdiendo.

Para aprovechar al máximo esta serie de artículos necesitas tener ya un conocimiento básico o intermedio de JavaScript. Cuando termines este tutorial serás capaz de construir tus propios juegos Web.

![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](/es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/mdn-breakout-gameplay.png)

Detalle de las lecciones
------------------------

Todas las lecciones y las diferentes versiones del famoso juego MDN que estamos construyendo juntos están disponibles en GitHub:

1. Crea el lienzo (canvas) y dibuja en él
2. Mueve la bola
3. Rebota en las paredes
4. Control de la pala y el teclado
5. Fin del juego
6. Construye el muro de ladrillos
7. Detección de colisiones
8. Cuenta los puntos y gana
9. Controles del ratón
10. Finalizando

Empezar con JavaScript puro es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier entorno de desarrollo (framework) que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero sobre el mismo lenguaje para saber exactamente qué es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en JavaScript puro.

**Nota:** Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, famoso juego 2D usando Phaser (en-US).

**Nota:** Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del kit de contenido canvas Gamedev basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.

Siguientes pasos
----------------

Vale, ¡vamos a empezar! Dirígete hacia el primer tema — Crea el lienzo (canvas) y dibuja en él.

* Siguiente »
Rebotar en las paredes
======================

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el **paso 6** de 16 del tutorial de Gamedev Phaser (en-US). 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 `<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:


```js
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:


```js
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:

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 (en-US).

* « Anterior (en-US)
* Siguiente » (en-US)
Collision detection
===================

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el **paso 10** de un total de 16, del tutorial de Gamedev Phaser (en-US). Puedes encontrar el código fuente tal y cómo queda al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson10.html.

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.

Detección de colisión ladrillo/bola
-----------------------------------

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 `update()` que verifique la detección de las colisiones entre la bola y los ladrillos, como se muestra a continuación:


```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;
}
```


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: `ballHitBrick()`. Crea esta nueva función en la parte inferior de tu código, justo antes de la etiqueta de cierre `</script>`, como sigue:


```js
function ballHitBrick(ball, brick) {
  brick.kill();
}
```


¡Y ya está! Vuelve a cargar el código, y verás que la nueva detección de colisión funciona correctamente.

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 `kill()` en él.

Seguro que esperarabas tener que escribir muchos más cálculos para implementar la detección de colisiones cuando se utiliza JavaScript (en-US) 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.

Compara tu código
-----------------

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:

Próximos pasos
--------------

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.

* « Anterior (en-US)
* Siguiente » (en-US)
The score
=========

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el paso **11º** de 16 del tutorial de Gamedev Phaser (en-US). Puedes encontrar el código fuente tal y como quedaría al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson11.html.

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.

Usaremos una variable separada para almacenar la puntuación y el método `text()` de Phaser para mostrarla en la pantalla.

Nuevas variables
----------------

Añade dos nuevas variables justo después de la definición de las anteriores:


```js
// ...
var scoreText;
var score = 0;
```

Añadir el texto de puntuación a la pantalla del juego
-----------------------------------------------------

Ahora añade esta línea al final de la función `create()`:


```js
scoreText = game.add.text(5, 5, "Points: 0", {
  font: "18px Arial",
  fill: "#0095DD",
});
```


El método `text()` puede tomar cuatro parámetros:

* Las coordenadas x e y dónde escribir el texto.
* El texto que se mostrará.
* El estilo de la fuente con la que se representará el texto.

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.

Actualizar el juego cuando los ladrillos se han destruido
---------------------------------------------------------

Incrementaremos el número de puntos cada vez que la pelota golpee en un ladrillo y actualizaremos el `scoreText` para mostrar la puntuación actual. Esto, lo podremos hacer usando el método `setText()` — añade las dos siguientes líneas a la función `ballHitBrick()`:


```js
function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText("Points: " + score);
}
```


Eso es todo por ahora — recarga tu `index.html` y comprueba que la puntuación se actualiza por cada golpe al ladrillo.

Compare su código
-----------------

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:

Próximos pasos
--------------

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.

* « Anterior (en-US)
* Siguiente » (en-US)
Move the ball
=============

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el **4º** paso sobre 16 del tutorial Gamedev Phaser (en-US). Puedes encontrar el código fuente tal y como quedaría al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson04.html.

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.

Actualizando la posición de la pelota en cada marco
---------------------------------------------------

¿Recuerdas la función `update()` 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 `update()`, como se muestra a continuación:


```js
function update() {
  ball.x += 1;
  ball.y += 1;
}
```


El código de arriba incrementa en 1 las propiedades `x` e `y` , 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.

Compara tú código
-----------------

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

Próximos pasos
--------------

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.

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.

* « Anterior (en-US)
* Siguiente » (en-US)
Win the game
============

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el paso **12º** del tutorial 16 de Gamedev Phaser (en-US). Puedes encontrar el código fuente tal y como queda al completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson12.html.

Implementar las victorias en nuestro juego es fácil: si destruyes todos los ladrillos, ganas.

¿Cómo ganar?
------------

Añade el siguiente código a la función `ballHitBrick()`:


```js
function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText("Points: " + score);

  var count_alive = 0;
  for (i = 0; i < bricks.children.length; i++) {
    if (bricks.children[i].alive == true) {
      count_alive++;
    }
  }
  if (count_alive == 0) {
    alert("You won the game, congratulations!");
    location.reload();
  }
}
```


Recorremos los ladrillos del grupo usando `bricks.children`, verificando la vida de cada uno con el método `.alive()`. Si no quedan más ladrillos con vida, mostramos un mensaje de victoria, reiniciando el juego una vez que la alerta desaparezca.

Compare su código
-----------------

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

Próximos pasos
--------------

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.

* « Anterior (en-US)
* Siguiente » (en-US)
Game over
=========

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el paso numero **ocho** de los 16 del tutorial de Gamedev Phaser (en-US). Puedes encontrar el código fuente de como debería verse, después de haber completado esta lección en Gamedev-Phaser-Content-Kit/demos/lesson08.html.

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.

Cómo perder
-----------

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 `create()`; justo después de definir los atributos de las bolas está bien:


```js
game.physics.arcade.checkCollision.down = false;
```


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:


```js
ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(function () {
  alert("Game over!");
  location.reload();
}, this);
```


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 `onOutOfBounds`. Cuando hagas click en el mensaje de alerta resultante, la página se reseteará, asi podrás jugar otra vez.

Compara tu código
-----------------

Puedes comprobar el código final para esta lección en la demo de abajo, y jugar con ello para entender mejor como funciona:

Siguientes pasos
----------------

Ahora el juego básico está hecho, hagamos mas interesante el caso introduciendo ladrillos para romper --- es hora de construir el campo de ladrillos (en-US).

* « Anterior (en-US)
* Siguiente » (en-US)
Scaling
=======

* « Anterior (en-US)
* Siguiente » (en-US)

Este es el **2do paso** de los 16 del tutorial Gamedev Phaser tutorial (en-US). Puede encontrar el código fuente como debería verse luego de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson02.html.

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.

El objeto scale de Phaser
-------------------------

Hay un objeto especial `scale` disponible en Phaser con algunos métodos prácticos y propiedades disponibles. Actualice su función `preload()` existente de la siguiente manera:


```js
function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW\_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
}
```


`scaleMode` tiene algunas opciones diferentes disponibles para ver como se puede escalar el Canvas (lienzo):

* `NO_SCALE` — nada está escalado.
* `EXACT_FIT` — escala el lienzo para llenar todo el espacio disponible tanto vertical como horizontalmente, sin conservar la relación de aspecto.
* `SHOW_ALL` — 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.
* `RESIZE` — 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.
* `USER_SCALE` — 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.

Las otras dos lineas de código en la función `preload()` son responsables de alinear el elemento canvas horizontal y verticalmente, por lo que siempre se centra en la pantalla independientemente del tamaño.

Agregar un color de fondo de lienzo personalizado
-------------------------------------------------

También podemos agregar un color de fondo personalizado a nuestro lienzo, por lo que no se mantendrá negro. El objeto `stage` tiene una propiedad `backgroundColor` 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:


```js
game.stage.backgroundColor = "#eee";
```

Compara tu código
-----------------

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:

Pasos siguientes
----------------

Ahora que hemos configurado el escalamiento de nuestro juego, continuemos con la tercera lección y descubramos cómo cargar los assets e imprimirlos en la pantalla (en-US).

* « Anterior (en-US)
* Siguiente » (en-US)