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 --- files/es/games/herramients/asm.js/index.html | 29 -- files/es/games/herramients/index.html | 46 --- files/es/games/introduccion/index.html | 167 -------- .../index.html" | 108 ----- files/es/games/introduction/index.html | 167 ++++++++ .../index.html | 108 +++++ .../publishing_games/game_monetization/index.html | 100 +++++ .../monetizaci\303\263n_de_los_juegos/index.html" | 100 ----- files/es/games/tools/asm.js/index.html | 29 ++ files/es/games/tools/index.html | 46 +++ .../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 --- .../bounce_off_the_walls/index.html | 101 +++++ .../build_the_brick_field/index.html | 126 ++++++ .../collision_detection/index.html | 128 ++++++ .../create_the_canvas_and_draw_on_it/index.html | 108 +++++ .../finishing_up/index.html | 95 +++++ .../game_over/index.html | 75 ++++ .../2d_breakout_game_pure_javascript/index.html | 52 +++ .../mouse_controls/index.html | 53 +++ .../move_the_ball/index.html | 154 ++++++++ .../paddle_and_keyboard_controls/index.html | 130 ++++++ .../track_the_score_and_win/index.html | 92 +++++ .../index.html | 437 +++++++++++++++++++++ files/es/games/tutorials/index.html | 10 + .../bounce_off_the_walls/index.html | 101 ----- .../construye_grupo_bloques/index.html | 126 ------ .../control_pala_y_teclado/index.html | 130 ------ .../controles_raton/index.html | 53 --- .../create_the_canvas_and_draw_on_it/index.html | 108 ----- .../deteccion_colisiones/index.html | 128 ------ .../fin_del_juego/index.html | 75 ---- .../index.html | 52 --- .../mueve_la_bola/index.html | 154 -------- .../terminando/index.html | 95 ----- .../track_the_score_and_win/index.html | 92 ----- .../index.html | 437 --------------------- files/es/games/workflows/index.html | 10 - 40 files changed, 2168 insertions(+), 2168 deletions(-) delete mode 100644 files/es/games/herramients/asm.js/index.html delete mode 100644 files/es/games/herramients/index.html delete mode 100644 files/es/games/introduccion/index.html delete mode 100644 "files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" create mode 100644 files/es/games/introduction/index.html create mode 100644 files/es/games/introduction_to_html5_game_development/index.html create mode 100644 files/es/games/publishing_games/game_monetization/index.html delete mode 100644 "files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" create mode 100644 files/es/games/tools/asm.js/index.html create mode 100644 files/es/games/tools/index.html 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 create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html create mode 100644 files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/es/games/tutorials/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html delete mode 100644 files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html delete mode 100644 files/es/games/workflows/index.html (limited to 'files/es/games') diff --git a/files/es/games/herramients/asm.js/index.html b/files/es/games/herramients/asm.js/index.html deleted file mode 100644 index bd41ed70a3..0000000000 --- a/files/es/games/herramients/asm.js/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: asm.js -slug: Games/Herramients/asm.js -tags: - - JavaScript - - asm.js -translation_of: Games/Tools/asm.js ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
-

Asm.js es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.

-
- -

¿Qué es asm.js exactamente?

- -

Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.

- -

Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.

- -

También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.

- -

Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.

- -

Resumen del lenguaje asm.js

- -

asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.

diff --git a/files/es/games/herramients/index.html b/files/es/games/herramients/index.html deleted file mode 100644 index e09812b07d..0000000000 --- a/files/es/games/herramients/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Herramientas para desarrolladores de juegos -slug: Games/Herramients -tags: - - NeedsContent - - NeedsTranslation - - aplicaciones - - juegos -translation_of: Games/Tools ---- -
{{GamesSidebar}}
-

En esta pagina puedes encontrar enlaces a nuestros articulos de desarrollo de juegos, que enventualmente apuenta a cubrir frameworks, compiladores y herramientas de depuracion.

-
-
-
- asm.js
-
- asm.js es una subconjunto muy limitado del lenguaje Javascript que puede ser en gran medida optimizado y correr en modo compilador ahead-of-time (AOT) para un mejor rendimiento que el rendimiento tipico de JavaScript. Este es, por supuesto, bueno para juegos.
-
- Emscripten
-
-

Un compilador LLVM a JavaScript; con Emscripten, tu puedes compilar C++ y otros lenguajes que se pueden compilar a LLVM y luego a JavaScript de alto rendimiento. Es una buena herramiente para portar aplicaciones a la Web! Aqui hay un util tutorial sobre Emscripten disponible en la wiki. Estamos mirando cubrir Emscripten en su propia seccion de MDN.

-
-
- Gecko profiler
-
- Gecko profiler es una extension que te permite perfilar tu codigo para ayudar donde tienes errores de rendimiento, asi puedes hacer que tu juego corra a velocidad maxima.
-
- Motores de juegos y herramientas
-
- Una lista de motores, plantillas y tecnologias utiles para los desarrolladores de juegos.
-
- Shumway
-
- Shumway es un renderizador para Adobe Flash construido completamente con JavaScript, WebGL, entre otros, haciendo una brecha entre Flash y los estandares Web. Este articulo muestra como hacer uso de Shumway y como contribuir arreglos y errores al proyecto.
-
- Cadena de herramientas para desarrollar y depurar juegos
-
- Como difieren de depurar una Web app normal? Que herramientas especializadas estan disponibles? Un lote de esto va a ser cubierto por Will en herramientas, pero aqui te vamos a proveer una cadena de herramientas practicas para depurar juegos con links a las cosas de Will: -
    -
  • Basic tools overview
    • -
  • Shader editor
    • -
  • Performance tools (still in production, estimated early 2014)
    • -
-
-
diff --git a/files/es/games/introduccion/index.html b/files/es/games/introduccion/index.html deleted file mode 100644 index b19ea1a61e..0000000000 --- a/files/es/games/introduccion/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Introduccion para desarrollo de juegos para la Web -slug: Games/Introduccion -tags: - - Firefox OS - - juegos - - moviles -translation_of: Games/Introduction ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.
- -
- -
El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D shooters de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en JavaScript  con tecnologia de compilación just-in-time y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos HTML5 como Firefox OS) sin problemas.
- -

La plataforma de juegos HTML5

- -

Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionTecnología
AudioWeb Audio API
GraficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, device sensors, WebRTC, Full Screen API, Pointer Lock API
LenguajeJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
RedesWebRTC and/or WebSockets
AlmacenamientoIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (y mucho más!)
- -

El caso de Exito

- -
Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.
- -
- -
    -
  1. -
    El alcance de la Web es enorme; está en todas partes. Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.
    -
    2. -
  2. Se mejoran la comercialización y la detección. No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.
    3. -
  3. Usted tiene control donde importa: Pagos. Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.
    4. -
  4. Una vez más con más control, puedes actualizar tu juego cuando quieras. No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.
    5. -
  5. ¡Controla tus análisis! En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.
    6. -
  6. Usted consigue manejar su relación del cliente más de cerca, en su propia manera. No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. Involucrarse con sus clientes de la manera que desee, sin un intermediario.
    7. -
  7. Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento. Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.
    8. -
- -

Tecnologías web para desarrolladores de juegos Edit

- -

Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:

- -
-
-
API de pantalla completa
-
Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.
-
API de Gamepad
-
Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.
-
HTML y CSS
-
Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego. Parte de HTML es el elemento <canvas> , que proporciona una forma de hacer gráficos 2D.
-
Audio HTML
-
El elemento <audio> te permite reproducir fácilmente efectos de sonido y música sencillos. Si sus necesidades están más involucradas, echa un vistazo a la API de audio web para obtener potencia de procesamiento de audio real.
-
IndexedDB
-
Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo. Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario. También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).
-
JavaScript
-
JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido. Usa su poder para escribir el código para tu juego, o mira usando tecnologías como Emscripten o Asm.js para portar fácilmente tus juegos existentes.
-
API de bloqueo de puntero
-
La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.
-
SVG (Gráficos Vectoriales Escalables)
-
Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
-
Matrices Arrays
-
Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript; Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.
-
API de audio web
-
Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.
-
WebGL
-
Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web. Se trata de una implementación Web de OpenGL ES 2.0.
-
WebRTC
-
La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios. ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos? Esta es la API para usted.
-
WebSockets
-
La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.
-
Trabajadores de la Web
-
Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.
-
XMLHttpRequest y API de archivos
-
La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web. Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.
-
-
- - - -
-
- -
- -
-

Etiquetas y colaboradores del documento

- -
Etiquetas: - - -
- -
Colaboradores en esta página: Albizures , atlas7jean
- -
Última actualización por: Albizures ,
-
-
- -
- -
diff --git "a/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" "b/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" deleted file mode 100644 index dcbaca6422..0000000000 --- "a/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Introducción al desarrollo de juegos HTML5 (resumen) -slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) -tags: - - Firefox OS - - HTML5 - - Móvil - - juegos -translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
-

Ventajas

- -
    -
  1. Los juegos hechos con HTML5 funcionan en smartphones, tabletas, PCs y Smart TVs.
    2. -
  2. Anuncia y promociona tu juego en toda la web, así como en otros medios.
    3. -
  3. Pagos. Carga lo que quieras y usa el servicio de procesamiento de pagos que desees.
    4. -
  4. Actualiza tu juego cuando quieras.
    5. -
  5. ¡Colecciona tus propios análisis!
    6. -
  6. Conécta con tus clientes más de cerca.
    7. -
  7. Los jugadores pueden jugar el juego en cualquier lugar, en cualquier momento.
    8. -
- -

Tecnologías Web

-
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadTecnología
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, sensores del dispositivo, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
NetworkingWebRTC y/o WebSockets
StorageIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (¡y muchos más!)
- -
-
-
Full Screen API
-
Juego de pantalla completa.
-
Gamepad API
-
Utiliza gamepads u otros controladores de juego.
-
HTML y CSS
-
Crea, diseña y diseña la interfaz de usuario de tu juego.
-
HTML audio
-
Juega fácilmente efectos de sonido simples y música.
-
IndexedDB
-
Almacena los datos del usuario en tu propio ordenador o dispositivo.
-
JavaScript
-
Rápido lenguaje de programación web para escribir el código de tu juego.
- Para portar fácilmente tus juegos existentes en Emscripten o Asm.js
-
Pointer Lock API
-
Bloquea el ratón u otro dispositivo señalador dentro de la interfaz de tu juego.
-
SVG (Scalable Vector Graphics)
-
Cree gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
-
Typed Arrays
-
Accede a datos binarios sin procesar desde JavaScript; Manipula texturas GL, datos de juegos, o cualquier otra cosa.
-
Web Audio API
-
Controla la reproducción, síntesis y manipulación del audio en tiempo real.
-
WebGL
-
Cree gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento. OpenGL ES 2.0.
-
WebRTC
-
Las comunicaciones en tiempo real para controlar los datos de audio y video, incluidas las teleconferencias y la transmisión de datos de otras aplicaciones entre dos usuarios, como el chat.
-
WebSockets
-
Conecte tu aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juegos multijugador, servicios de chat, etc.
-
Web Workers
-
Genere hilos de fondo ejecutando tu propio código JavaScript para procesadores multi-core.
-
XMLHttpRequest y File API
-
Envía y recibe cualquier tipo de información que desees desde un servidor web, como descargar nuevos niveles de juego y material gráfico para transmitir información de estado del juego en tiempo no real.
-
-
- -

 

diff --git a/files/es/games/introduction/index.html b/files/es/games/introduction/index.html new file mode 100644 index 0000000000..b19ea1a61e --- /dev/null +++ b/files/es/games/introduction/index.html @@ -0,0 +1,167 @@ +--- +title: Introduccion para desarrollo de juegos para la Web +slug: Games/Introduccion +tags: + - Firefox OS + - juegos + - moviles +translation_of: Games/Introduction +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.
+ +
+ +
El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D shooters de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en JavaScript  con tecnologia de compilación just-in-time y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos HTML5 como Firefox OS) sin problemas.
+ +

La plataforma de juegos HTML5

+ +

Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionTecnología
AudioWeb Audio API
GraficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, device sensors, WebRTC, Full Screen API, Pointer Lock API
LenguajeJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
RedesWebRTC and/or WebSockets
AlmacenamientoIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (y mucho más!)
+ +

El caso de Exito

+ +
Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.
+ +
+ +
    +
  1. +
    El alcance de la Web es enorme; está en todas partes. Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.
    +
    2. +
  2. Se mejoran la comercialización y la detección. No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.
    3. +
  3. Usted tiene control donde importa: Pagos. Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.
    4. +
  4. Una vez más con más control, puedes actualizar tu juego cuando quieras. No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.
    5. +
  5. ¡Controla tus análisis! En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.
    6. +
  6. Usted consigue manejar su relación del cliente más de cerca, en su propia manera. No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. Involucrarse con sus clientes de la manera que desee, sin un intermediario.
    7. +
  7. Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento. Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.
    8. +
+ +

Tecnologías web para desarrolladores de juegos Edit

+ +

Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:

+ +
+
+
API de pantalla completa
+
Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.
+
API de Gamepad
+
Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.
+
HTML y CSS
+
Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego. Parte de HTML es el elemento <canvas> , que proporciona una forma de hacer gráficos 2D.
+
Audio HTML
+
El elemento <audio> te permite reproducir fácilmente efectos de sonido y música sencillos. Si sus necesidades están más involucradas, echa un vistazo a la API de audio web para obtener potencia de procesamiento de audio real.
+
IndexedDB
+
Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo. Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario. También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).
+
JavaScript
+
JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido. Usa su poder para escribir el código para tu juego, o mira usando tecnologías como Emscripten o Asm.js para portar fácilmente tus juegos existentes.
+
API de bloqueo de puntero
+
La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.
+
SVG (Gráficos Vectoriales Escalables)
+
Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
+
Matrices Arrays
+
Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript; Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.
+
API de audio web
+
Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.
+
WebGL
+
Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web. Se trata de una implementación Web de OpenGL ES 2.0.
+
WebRTC
+
La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios. ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos? Esta es la API para usted.
+
WebSockets
+
La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.
+
Trabajadores de la Web
+
Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.
+
XMLHttpRequest y API de archivos
+
La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web. Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.
+
+
+ + + +
+
+ +
+ +
+

Etiquetas y colaboradores del documento

+ +
Etiquetas: + + +
+ +
Colaboradores en esta página: Albizures , atlas7jean
+ +
Última actualización por: Albizures ,
+
+
+ +
+ +
diff --git a/files/es/games/introduction_to_html5_game_development/index.html b/files/es/games/introduction_to_html5_game_development/index.html new file mode 100644 index 0000000000..dcbaca6422 --- /dev/null +++ b/files/es/games/introduction_to_html5_game_development/index.html @@ -0,0 +1,108 @@ +--- +title: Introducción al desarrollo de juegos HTML5 (resumen) +slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) +tags: + - Firefox OS + - HTML5 + - Móvil + - juegos +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Ventajas

+ +
    +
  1. Los juegos hechos con HTML5 funcionan en smartphones, tabletas, PCs y Smart TVs.
    2. +
  2. Anuncia y promociona tu juego en toda la web, así como en otros medios.
    3. +
  3. Pagos. Carga lo que quieras y usa el servicio de procesamiento de pagos que desees.
    4. +
  4. Actualiza tu juego cuando quieras.
    5. +
  5. ¡Colecciona tus propios análisis!
    6. +
  6. Conécta con tus clientes más de cerca.
    7. +
  7. Los jugadores pueden jugar el juego en cualquier lugar, en cualquier momento.
    8. +
+ +

Tecnologías Web

+
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadTecnología
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, sensores del dispositivo, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
NetworkingWebRTC y/o WebSockets
StorageIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (¡y muchos más!)
+ +
+
+
Full Screen API
+
Juego de pantalla completa.
+
Gamepad API
+
Utiliza gamepads u otros controladores de juego.
+
HTML y CSS
+
Crea, diseña y diseña la interfaz de usuario de tu juego.
+
HTML audio
+
Juega fácilmente efectos de sonido simples y música.
+
IndexedDB
+
Almacena los datos del usuario en tu propio ordenador o dispositivo.
+
JavaScript
+
Rápido lenguaje de programación web para escribir el código de tu juego.
+ Para portar fácilmente tus juegos existentes en Emscripten o Asm.js
+
Pointer Lock API
+
Bloquea el ratón u otro dispositivo señalador dentro de la interfaz de tu juego.
+
SVG (Scalable Vector Graphics)
+
Cree gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
+
Typed Arrays
+
Accede a datos binarios sin procesar desde JavaScript; Manipula texturas GL, datos de juegos, o cualquier otra cosa.
+
Web Audio API
+
Controla la reproducción, síntesis y manipulación del audio en tiempo real.
+
WebGL
+
Cree gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento. OpenGL ES 2.0.
+
WebRTC
+
Las comunicaciones en tiempo real para controlar los datos de audio y video, incluidas las teleconferencias y la transmisión de datos de otras aplicaciones entre dos usuarios, como el chat.
+
WebSockets
+
Conecte tu aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juegos multijugador, servicios de chat, etc.
+
Web Workers
+
Genere hilos de fondo ejecutando tu propio código JavaScript para procesadores multi-core.
+
XMLHttpRequest y File API
+
Envía y recibe cualquier tipo de información que desees desde un servidor web, como descargar nuevos niveles de juego y material gráfico para transmitir información de estado del juego en tiempo no real.
+
+
+ +

 

diff --git a/files/es/games/publishing_games/game_monetization/index.html b/files/es/games/publishing_games/game_monetization/index.html new file mode 100644 index 0000000000..1549b222da --- /dev/null +++ b/files/es/games/publishing_games/game_monetization/index.html @@ -0,0 +1,100 @@ +--- +title: Monetización de videojuegos +slug: Games/Publishing_games/Monetización_de_los_juegos +tags: + - HTLM5 + - JavaScript + - Licencias + - anuncios + - juegos + - marca + - monetización +translation_of: Games/Publishing_games/Game_monetization +--- +
{{GamesSidebar}}
+ +

Cuando empleas tu tiempo en crear un juego, distribuirlo y promocionarlo deberías considerar ganar un poco de dinero con ello. Si tu trabajo es un esfuerzo serio en tu camino para ser un desarrollador independiente de juegos capaz de ganarse la vida, sigue leyendo y verás cuales son tus opciones. La tecnología es lo suficientemente madura; ahora es cuestión de elegir el enfoque adecuado.

+ +

Juegos de pago

+ +

Lo primero, la opción más obvia que probablemente venga a tu mente, podría ser vender los juegos de la forma en que se realiza para grandes títulos AAA ---- con un precio fijado por adelantado. Aunque el mercado digital es clave y no necesitas imprimir portadas y sacar tu juego en una tienda física, para ganar un dinero decente vendiendo tus juegos con un precio fijo, tienes que invertir tu tiempo y dinero en marketing. Solo con los mejores juegos se recupera o gana más de lo que costo hacerlo, y necesitas un montón de suerte para ello.

+ +

Cuanto ganes por tu jugo depende del mercado, la calidad de tu juego y otros tantos pequeños factores. Un título de arcade para iOS puede venderse por 0,99 USD, pero un juego de escritorio estilo RPG más largo, en Steam, puede venderse por 20 USD; ambos precios están bien. Tienes que seguir el mercado y tu propia investigación --- aprender rápido de tus errores es importante.

+ +

Compras en la aplicación

+ +

En lugar de que la gente pague por tu juego por adelantado, puedes ofrecer un juego de forma gratuita con compras dentro de la aplicación. En este caso, el juego puede ser adquirido sin gastarse un centavo --- dar el juego a los jugadores, pero ofreciendo monedas del juego, bonus extra  o beneficios por dinero real. Ejemplos específicos pueden ser, incluir bonus de nivel, mejores armas o hechizos, o volver a llenar la energía necesaria para jugar. Diseñar un buen sistema de compras en la aplicación es un arte propio.

+ +

Recuerda que necesitas miles de descargas de tu juego para hacer efectivas/rentables las compras en la aplicación --- solo una pequeña parte de los jugadores pagará por las compras en la aplicación. ¿Cómo de pequeña? Varía, pero alrededor de una persona por cada mil es aproximadamente la media. Cuantas más personas jueguen a tu juego, mayor será la probabilidad de que alguien pague, o sea que tus beneficios dependen en gran medida de tus actividades de promoción.

+ +

Freemium

+ +

Los juegos que ofrecen compras en el juego, a menudo se refieren a freemium --- un juego freemium puede ser adquirido y jugado gratis, pero puedes pagar por características extra (premium), bienes virtuales u otros beneficios. La palabra en sí, adquirió una connotación negativa después de que las grandes compañías se centraran en crear juegos, cuyo objetivo principal era ganar el máximo dinero posible de los jugadores, en lugar de proporcionar una experiencia divertida. Los peores casos fueron cuando podías utilizar dinero real para obtener ventajas sobre otros jugadores, o cuando restringían el acceso a las siguientes etapas del juego, a menos que los jugadores pagaran. El término "pagar para ganar" fue acuñado y este enfoque no gustó a muchos jugadores  y desarrolladores. Si quieres implementar compras dentro del juego asegúrate de que intenten añadir valor al juego con algo que los jugadores disfruten, en lugar de sacarlo y luego cobrarlo.

+ +

Complementos y DLCs

+ +

 

+ +

Los complementos y el contenido descargable son una buena manera de proporcionar un valor extra a un juego ya lanzado, pero recuerda que tendrás que ofrecer contenido decente y entretenido para atraer a la gente a comprarlo. Un conjunto totalmente nuevo de niveles con nuevos personajes, armas e historia es un buen material para DLC, pero para tener suficientes ventas el juego en sí debe ser popular, o de lo contrario no habrá jugadores interesados ​​en gastar su dinero duramente ganado. eso.

+ +

En lugar de vender activamente los juegos, también puede intentar obtener un ingreso pasivo: mostrar anuncios y confiar en actividades anteriores relacionadas con la promoción de su juego puede ser beneficioso, pero su juego debe ser adictivo, lo cual no es tan fácil como parece. Todavía necesitas planearlo, y en algún momento también necesitarás un poco de suerte. Si su juego se vuelve viral y la gente comienza a compartirlo, puede obtener muchas descargas y dinero de los anuncios.

+ +

Hay muchas compañías que ofrecen sistemas de publicidad: usted se registra y les permite mostrar anuncios a cambio de un porcentaje de las ganancias. Se dice que Google AdSense es el más efectivo, pero no está diseñado para juegos y es una práctica bastante mala usarlo para ese propósito. En lugar de arriesgarse a que se cierre su cuenta y se bloquee todo el dinero, intente utilizar los portales habituales de gamedev como LeadBolt. Ofrecen sistemas fáciles de implementar para mostrar los anuncios en sus juegos y dividir las ganancias con usted.

+ +

Los anuncios de video son cada vez más populares, especialmente en forma de pre-roll: se muestran al principio de su juego mientras aún se está cargando. Y sobre el tema de dónde colocar los anuncios en tu juego, realmente depende de ti. Debería ser lo más sutil posible para no molestar demasiado a los jugadores, pero lo suficientemente visible como para hacerles clic o al menos tomar nota. Adición de anuncios entre sesiones de juego en juego sobre pantallas es un enfoque popular.

+ +

 

+ +

Licencias

+ +

Hay un enfoque que puede funcionar como un modelo de monetización por sí mismo, y es vendiendo licencias para la distribución de tu juego. Existen más y más portales interesados en enseñar tu juego en sus páginas web. Ellos siguen varias estrategias para ganar dinero, gracias a tus juegos, pero no te tienes que preocuparte sobre eso, ya que la venta de la licencia suele ser un contrato único. Tu consigues el dinero y ellos pueden ser creativos con el uso de tu juego para hacer dinero con él.

+ +

Encontrar editores puede ser difícil la primera vez --- intenta buscarlos en los foros HTML5 Gamedevs. Si eres bien conocido, los editores llegarán a ti. La mayoria de las ofertas se realizan a través de correos electrónicos cuando se habla con una persona dedicada en el lado del editor. Algunos editores de sitios web tienen esa información a la vista, mientras que para contactar con otros editores es más difícil. Cuando busques un editor intenta ser amable e ir directo al grano --- son gente ocupada.

+ +

Licencias exclusivas

+ +

La licencia exclusiva es un tipo de licencia para un editor --- has creado un juego y vendes todos sus derechos a una única entidad junto con los derechos para redistribuirla ---- Softgames es un ejemplo de tal editor. No puedes vender el juego otra vez de ninguna forma mientras que el editor tenga los derechos --- esto es por lo que las ofertas exclusivas valen mucho dinero. ¿Cuánto exactamente? Depende de la calidad del juego, el género, el editor, y otros tantos factores, pero habitualmente puede estar entre los 2000 y 5000 USD. Un vez que vendiste una licencia exclusiva puedes olvidarte de promocionar ese juego en particular, ya que no ganarás más dinero con él, así que acepta tal oferta solo si estas seguro de que es lo suficientemente rentable.

+ +

Licencias no exclusivas

+ +

Este enfoque es menos estricto --- puedes vender una misma licencia a varios editores. Este es el enfoque más popular entre os editores nuevos (y los editores están apareciendo constantemente), puedes vender tus juegos con unos términos no exclusivos. Recuerda que con esta licencia el editor no puede redistribuirlo más --- a menudo se le llama un acuerdo de sitio cerrado cuando compran el derecho de publicar el juego en su propio portal. El coste normal de una licencia no exclusiva esta alrededor de 500 USD.

+ +

Subscripciones

+ +

También hay una opción para obtener un dinero pasivo mensual, a través de un acuerdo de subscripción. En lugar de obtener un único pago, puedes obtener pequeños pagos de dinero por juego, por mes --- puede estar entorno a 20-50 USD por mes, por juego. Normalmente depende de ti, si quieres ganar todo el dinero en un solo pago o ganarlo por meses. Recuerda que puede ser cancelado, o sea que no es una solución que funcione indefinidamente.

+ +

Ingresos por publicidad

+ +

Puedes implementar anuncios en tu juego tu mismo e intentar encontrar el tráfico adecuado para ganar un poco de dinero, pero también puedes hacer un acuerdo de reparto de ingresos con un editor. Los editores se encargarán de dirigir el tráfico y de dividir los beneficios --- habitualmente los acuerdos son de 70/30% o 50/50%, ganado por mes.

+ +

Recuerda que muchos nuevos editores de baja calidad querrán coger tu juego con ingresos por anuncios, en lugar de licencia, porque será más barato para ellos y podrías terminar con beneficios de 2 USD por juego por trato completado. Ten cuidado cuando contrates con nuevos editores --- algunas veces es mejor reducir el coste de la licencia a un editor conocido, en lugar de que te defraude un nuevo editor por más dinero.

+ +

Los editores cogen tus juegos para la participación en los beneficios, y/o licenciar podrá requerir implementar sus propias APIs, lo cual dará un trabajo extra, asi que considera eso en tu precio final.

+ +

Marca

+ +

Puedes vender los derechos de usar tu juego para la marca, o hacerlo tu mismo.  En el primer caso, es casi como una licencia no exclusiva, pero el cliente normalmente compra derechos para el código e implementarán sus propios gráficos. En el segundo caso, es como un trato independiente, pero estas reutilizando el código y añadiendo gráficos proporcionados por los clientes, algunas veces implementándolos como ellos te enseñen. Por ejemplo, si tu tienes un juego donde un jugador golpea los artículos de comida, podrías cambiar la comida a los productos del cliente para darles publicidad. Los precios en este modelo varían mucho dependiendo de la marca, cliente, y las horas que le eches.

+ +

Otras estrategias de monetización no enfocadas al juego

+ +

Hay otros caminos en los que puedes ganar dinero cuando haces juegos HTML5, y ni siquiera tiene que estar relacionado con el juego.

+ +

Venta de recursos

+ +

Si eres un diseñador gráfico, puedes vender los bienes de los juegos que has creado, o algo completamente nuevo exclusivamente para ese propósito en tiendas online como  Envato Market. No es mucho, pero si eres un diseñador conocido, puede ser una forma de ganar un dinero extra.

+ +

Escribir artículos y tutoriales

+ +

Es posible escribir artículos sobre tus juegos y que te paguen por ello. La promoción del juego y la monetización al mismo tiempo es un ganar-ganar, y si no abusas de ello con muchos anuncios, los lectores disfrutarán leyendo los artículos y aprenderán una o dos cosas. Si te enfocas en compartir el conocimiento primero y usas tus juegos solo como ejemplos, estará bien. Visita Tuts+ Game Development o sitios web similares para tener oportunidades donde escribir artículos.

+ +

Mercancías

+ +

Puedes vender camisetas, pegatinas o otros objetos --- algunos desarrolladores ganan más dinero con las mercancías que con sus propios juegos, pero solo funciona en juegos muy populares y reconocidos, como Angry Birds. Todavía, puede ser otra forma de ganar un poco de dinero. Cuanto más diversificados sean tus ingresos, mejor será tu estabilidad comercial.

+ +

Donaciones

+ +

Cuando todo lo demás falla puedes intentar poner un botón de donaciones en la página de tu juego y pedir apoyo de la comunidad. Algunas veces funciona, pero solo si el jugador te conoce y siente que te ayudará. Este es el porque de que manejar cuidadosamente la comunidad es tan importante. Funcionó con la competición de js13kGames --- todos los participantes obtuvieron una camiseta gratis, y algunos incluso dieron unos cuantos dólares para ayudarlo a seguir funcionado en los próximos años.

+ +

Resumen

+ +

Hay muchas maneras de ganar dinero --- todo lo que se aplica al mundo de los juegos AAA "normalmente" puede ser, más o menos, aplicable a los juegos casuales HTML5. Sin embargo, también podrías enfocarte en vender licencias, hacer marcas, o ganar unos beneficios compartidos de los anuncios. Depende totalmente de ti, que camino vas a seguir.

diff --git "a/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" "b/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" deleted file mode 100644 index 1549b222da..0000000000 --- "a/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Monetización de videojuegos -slug: Games/Publishing_games/Monetización_de_los_juegos -tags: - - HTLM5 - - JavaScript - - Licencias - - anuncios - - juegos - - marca - - monetización -translation_of: Games/Publishing_games/Game_monetization ---- -
{{GamesSidebar}}
- -

Cuando empleas tu tiempo en crear un juego, distribuirlo y promocionarlo deberías considerar ganar un poco de dinero con ello. Si tu trabajo es un esfuerzo serio en tu camino para ser un desarrollador independiente de juegos capaz de ganarse la vida, sigue leyendo y verás cuales son tus opciones. La tecnología es lo suficientemente madura; ahora es cuestión de elegir el enfoque adecuado.

- -

Juegos de pago

- -

Lo primero, la opción más obvia que probablemente venga a tu mente, podría ser vender los juegos de la forma en que se realiza para grandes títulos AAA ---- con un precio fijado por adelantado. Aunque el mercado digital es clave y no necesitas imprimir portadas y sacar tu juego en una tienda física, para ganar un dinero decente vendiendo tus juegos con un precio fijo, tienes que invertir tu tiempo y dinero en marketing. Solo con los mejores juegos se recupera o gana más de lo que costo hacerlo, y necesitas un montón de suerte para ello.

- -

Cuanto ganes por tu jugo depende del mercado, la calidad de tu juego y otros tantos pequeños factores. Un título de arcade para iOS puede venderse por 0,99 USD, pero un juego de escritorio estilo RPG más largo, en Steam, puede venderse por 20 USD; ambos precios están bien. Tienes que seguir el mercado y tu propia investigación --- aprender rápido de tus errores es importante.

- -

Compras en la aplicación

- -

En lugar de que la gente pague por tu juego por adelantado, puedes ofrecer un juego de forma gratuita con compras dentro de la aplicación. En este caso, el juego puede ser adquirido sin gastarse un centavo --- dar el juego a los jugadores, pero ofreciendo monedas del juego, bonus extra  o beneficios por dinero real. Ejemplos específicos pueden ser, incluir bonus de nivel, mejores armas o hechizos, o volver a llenar la energía necesaria para jugar. Diseñar un buen sistema de compras en la aplicación es un arte propio.

- -

Recuerda que necesitas miles de descargas de tu juego para hacer efectivas/rentables las compras en la aplicación --- solo una pequeña parte de los jugadores pagará por las compras en la aplicación. ¿Cómo de pequeña? Varía, pero alrededor de una persona por cada mil es aproximadamente la media. Cuantas más personas jueguen a tu juego, mayor será la probabilidad de que alguien pague, o sea que tus beneficios dependen en gran medida de tus actividades de promoción.

- -

Freemium

- -

Los juegos que ofrecen compras en el juego, a menudo se refieren a freemium --- un juego freemium puede ser adquirido y jugado gratis, pero puedes pagar por características extra (premium), bienes virtuales u otros beneficios. La palabra en sí, adquirió una connotación negativa después de que las grandes compañías se centraran en crear juegos, cuyo objetivo principal era ganar el máximo dinero posible de los jugadores, en lugar de proporcionar una experiencia divertida. Los peores casos fueron cuando podías utilizar dinero real para obtener ventajas sobre otros jugadores, o cuando restringían el acceso a las siguientes etapas del juego, a menos que los jugadores pagaran. El término "pagar para ganar" fue acuñado y este enfoque no gustó a muchos jugadores  y desarrolladores. Si quieres implementar compras dentro del juego asegúrate de que intenten añadir valor al juego con algo que los jugadores disfruten, en lugar de sacarlo y luego cobrarlo.

- -

Complementos y DLCs

- -

 

- -

Los complementos y el contenido descargable son una buena manera de proporcionar un valor extra a un juego ya lanzado, pero recuerda que tendrás que ofrecer contenido decente y entretenido para atraer a la gente a comprarlo. Un conjunto totalmente nuevo de niveles con nuevos personajes, armas e historia es un buen material para DLC, pero para tener suficientes ventas el juego en sí debe ser popular, o de lo contrario no habrá jugadores interesados ​​en gastar su dinero duramente ganado. eso.

- -

En lugar de vender activamente los juegos, también puede intentar obtener un ingreso pasivo: mostrar anuncios y confiar en actividades anteriores relacionadas con la promoción de su juego puede ser beneficioso, pero su juego debe ser adictivo, lo cual no es tan fácil como parece. Todavía necesitas planearlo, y en algún momento también necesitarás un poco de suerte. Si su juego se vuelve viral y la gente comienza a compartirlo, puede obtener muchas descargas y dinero de los anuncios.

- -

Hay muchas compañías que ofrecen sistemas de publicidad: usted se registra y les permite mostrar anuncios a cambio de un porcentaje de las ganancias. Se dice que Google AdSense es el más efectivo, pero no está diseñado para juegos y es una práctica bastante mala usarlo para ese propósito. En lugar de arriesgarse a que se cierre su cuenta y se bloquee todo el dinero, intente utilizar los portales habituales de gamedev como LeadBolt. Ofrecen sistemas fáciles de implementar para mostrar los anuncios en sus juegos y dividir las ganancias con usted.

- -

Los anuncios de video son cada vez más populares, especialmente en forma de pre-roll: se muestran al principio de su juego mientras aún se está cargando. Y sobre el tema de dónde colocar los anuncios en tu juego, realmente depende de ti. Debería ser lo más sutil posible para no molestar demasiado a los jugadores, pero lo suficientemente visible como para hacerles clic o al menos tomar nota. Adición de anuncios entre sesiones de juego en juego sobre pantallas es un enfoque popular.

- -

 

- -

Licencias

- -

Hay un enfoque que puede funcionar como un modelo de monetización por sí mismo, y es vendiendo licencias para la distribución de tu juego. Existen más y más portales interesados en enseñar tu juego en sus páginas web. Ellos siguen varias estrategias para ganar dinero, gracias a tus juegos, pero no te tienes que preocuparte sobre eso, ya que la venta de la licencia suele ser un contrato único. Tu consigues el dinero y ellos pueden ser creativos con el uso de tu juego para hacer dinero con él.

- -

Encontrar editores puede ser difícil la primera vez --- intenta buscarlos en los foros HTML5 Gamedevs. Si eres bien conocido, los editores llegarán a ti. La mayoria de las ofertas se realizan a través de correos electrónicos cuando se habla con una persona dedicada en el lado del editor. Algunos editores de sitios web tienen esa información a la vista, mientras que para contactar con otros editores es más difícil. Cuando busques un editor intenta ser amable e ir directo al grano --- son gente ocupada.

- -

Licencias exclusivas

- -

La licencia exclusiva es un tipo de licencia para un editor --- has creado un juego y vendes todos sus derechos a una única entidad junto con los derechos para redistribuirla ---- Softgames es un ejemplo de tal editor. No puedes vender el juego otra vez de ninguna forma mientras que el editor tenga los derechos --- esto es por lo que las ofertas exclusivas valen mucho dinero. ¿Cuánto exactamente? Depende de la calidad del juego, el género, el editor, y otros tantos factores, pero habitualmente puede estar entre los 2000 y 5000 USD. Un vez que vendiste una licencia exclusiva puedes olvidarte de promocionar ese juego en particular, ya que no ganarás más dinero con él, así que acepta tal oferta solo si estas seguro de que es lo suficientemente rentable.

- -

Licencias no exclusivas

- -

Este enfoque es menos estricto --- puedes vender una misma licencia a varios editores. Este es el enfoque más popular entre os editores nuevos (y los editores están apareciendo constantemente), puedes vender tus juegos con unos términos no exclusivos. Recuerda que con esta licencia el editor no puede redistribuirlo más --- a menudo se le llama un acuerdo de sitio cerrado cuando compran el derecho de publicar el juego en su propio portal. El coste normal de una licencia no exclusiva esta alrededor de 500 USD.

- -

Subscripciones

- -

También hay una opción para obtener un dinero pasivo mensual, a través de un acuerdo de subscripción. En lugar de obtener un único pago, puedes obtener pequeños pagos de dinero por juego, por mes --- puede estar entorno a 20-50 USD por mes, por juego. Normalmente depende de ti, si quieres ganar todo el dinero en un solo pago o ganarlo por meses. Recuerda que puede ser cancelado, o sea que no es una solución que funcione indefinidamente.

- -

Ingresos por publicidad

- -

Puedes implementar anuncios en tu juego tu mismo e intentar encontrar el tráfico adecuado para ganar un poco de dinero, pero también puedes hacer un acuerdo de reparto de ingresos con un editor. Los editores se encargarán de dirigir el tráfico y de dividir los beneficios --- habitualmente los acuerdos son de 70/30% o 50/50%, ganado por mes.

- -

Recuerda que muchos nuevos editores de baja calidad querrán coger tu juego con ingresos por anuncios, en lugar de licencia, porque será más barato para ellos y podrías terminar con beneficios de 2 USD por juego por trato completado. Ten cuidado cuando contrates con nuevos editores --- algunas veces es mejor reducir el coste de la licencia a un editor conocido, en lugar de que te defraude un nuevo editor por más dinero.

- -

Los editores cogen tus juegos para la participación en los beneficios, y/o licenciar podrá requerir implementar sus propias APIs, lo cual dará un trabajo extra, asi que considera eso en tu precio final.

- -

Marca

- -

Puedes vender los derechos de usar tu juego para la marca, o hacerlo tu mismo.  En el primer caso, es casi como una licencia no exclusiva, pero el cliente normalmente compra derechos para el código e implementarán sus propios gráficos. En el segundo caso, es como un trato independiente, pero estas reutilizando el código y añadiendo gráficos proporcionados por los clientes, algunas veces implementándolos como ellos te enseñen. Por ejemplo, si tu tienes un juego donde un jugador golpea los artículos de comida, podrías cambiar la comida a los productos del cliente para darles publicidad. Los precios en este modelo varían mucho dependiendo de la marca, cliente, y las horas que le eches.

- -

Otras estrategias de monetización no enfocadas al juego

- -

Hay otros caminos en los que puedes ganar dinero cuando haces juegos HTML5, y ni siquiera tiene que estar relacionado con el juego.

- -

Venta de recursos

- -

Si eres un diseñador gráfico, puedes vender los bienes de los juegos que has creado, o algo completamente nuevo exclusivamente para ese propósito en tiendas online como  Envato Market. No es mucho, pero si eres un diseñador conocido, puede ser una forma de ganar un dinero extra.

- -

Escribir artículos y tutoriales

- -

Es posible escribir artículos sobre tus juegos y que te paguen por ello. La promoción del juego y la monetización al mismo tiempo es un ganar-ganar, y si no abusas de ello con muchos anuncios, los lectores disfrutarán leyendo los artículos y aprenderán una o dos cosas. Si te enfocas en compartir el conocimiento primero y usas tus juegos solo como ejemplos, estará bien. Visita Tuts+ Game Development o sitios web similares para tener oportunidades donde escribir artículos.

- -

Mercancías

- -

Puedes vender camisetas, pegatinas o otros objetos --- algunos desarrolladores ganan más dinero con las mercancías que con sus propios juegos, pero solo funciona en juegos muy populares y reconocidos, como Angry Birds. Todavía, puede ser otra forma de ganar un poco de dinero. Cuanto más diversificados sean tus ingresos, mejor será tu estabilidad comercial.

- -

Donaciones

- -

Cuando todo lo demás falla puedes intentar poner un botón de donaciones en la página de tu juego y pedir apoyo de la comunidad. Algunas veces funciona, pero solo si el jugador te conoce y siente que te ayudará. Este es el porque de que manejar cuidadosamente la comunidad es tan importante. Funcionó con la competición de js13kGames --- todos los participantes obtuvieron una camiseta gratis, y algunos incluso dieron unos cuantos dólares para ayudarlo a seguir funcionado en los próximos años.

- -

Resumen

- -

Hay muchas maneras de ganar dinero --- todo lo que se aplica al mundo de los juegos AAA "normalmente" puede ser, más o menos, aplicable a los juegos casuales HTML5. Sin embargo, también podrías enfocarte en vender licencias, hacer marcas, o ganar unos beneficios compartidos de los anuncios. Depende totalmente de ti, que camino vas a seguir.

diff --git a/files/es/games/tools/asm.js/index.html b/files/es/games/tools/asm.js/index.html new file mode 100644 index 0000000000..bd41ed70a3 --- /dev/null +++ b/files/es/games/tools/asm.js/index.html @@ -0,0 +1,29 @@ +--- +title: asm.js +slug: Games/Herramients/asm.js +tags: + - JavaScript + - asm.js +translation_of: Games/Tools/asm.js +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Asm.js es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.

+
+ +

¿Qué es asm.js exactamente?

+ +

Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.

+ +

Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.

+ +

También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.

+ +

Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.

+ +

Resumen del lenguaje asm.js

+ +

asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.

diff --git a/files/es/games/tools/index.html b/files/es/games/tools/index.html new file mode 100644 index 0000000000..e09812b07d --- /dev/null +++ b/files/es/games/tools/index.html @@ -0,0 +1,46 @@ +--- +title: Herramientas para desarrolladores de juegos +slug: Games/Herramients +tags: + - NeedsContent + - NeedsTranslation + - aplicaciones + - juegos +translation_of: Games/Tools +--- +
{{GamesSidebar}}
+

En esta pagina puedes encontrar enlaces a nuestros articulos de desarrollo de juegos, que enventualmente apuenta a cubrir frameworks, compiladores y herramientas de depuracion.

+
+
+
+ asm.js
+
+ asm.js es una subconjunto muy limitado del lenguaje Javascript que puede ser en gran medida optimizado y correr en modo compilador ahead-of-time (AOT) para un mejor rendimiento que el rendimiento tipico de JavaScript. Este es, por supuesto, bueno para juegos.
+
+ Emscripten
+
+

Un compilador LLVM a JavaScript; con Emscripten, tu puedes compilar C++ y otros lenguajes que se pueden compilar a LLVM y luego a JavaScript de alto rendimiento. Es una buena herramiente para portar aplicaciones a la Web! Aqui hay un util tutorial sobre Emscripten disponible en la wiki. Estamos mirando cubrir Emscripten en su propia seccion de MDN.

+
+
+ Gecko profiler
+
+ Gecko profiler es una extension que te permite perfilar tu codigo para ayudar donde tienes errores de rendimiento, asi puedes hacer que tu juego corra a velocidad maxima.
+
+ Motores de juegos y herramientas
+
+ Una lista de motores, plantillas y tecnologias utiles para los desarrolladores de juegos.
+
+ Shumway
+
+ Shumway es un renderizador para Adobe Flash construido completamente con JavaScript, WebGL, entre otros, haciendo una brecha entre Flash y los estandares Web. Este articulo muestra como hacer uso de Shumway y como contribuir arreglos y errores al proyecto.
+
+ Cadena de herramientas para desarrollar y depurar juegos
+
+ Como difieren de depurar una Web app normal? Que herramientas especializadas estan disponibles? Un lote de esto va a ser cubierto por Will en herramientas, pero aqui te vamos a proveer una cadena de herramientas practicas para depurar juegos con links a las cosas de Will: +
    +
  • Basic tools overview
    • +
  • Shader editor
    • +
  • Performance tools (still in production, estimated early 2014)
    • +
+
+
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")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..d168aa0102 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -0,0 +1,101 @@ +--- +title: Rebota en las paredes +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+

{{IncludeSubnav("/es/docs/Games")}}

+
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

+ +
+

Este es el tercer paso de 10 del  tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código fuente y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson3.html.

+
+ +

Es agradable ver nuestra bola moviéndose, pero desaparece rápidamente de la pantalla, limitando la diversión que podemos tener con ella. Para superar esto, implementaremos una detección de colisión muy simple (que se explicará más adelante con más detalle) para hacer que la pelota rebote en los cuatro bordes del Canvas.

+ +

Detección de colisión simple

+ +

Para detectar la colisión verificamos si la bola está tocando (chocando con) la pared y si es así, cambiaremos la dirección de su movimiento en consecuencia.

+ +

Para facilitar los cálculos, definamos una variable llamada ballRadius que mantendrá el radio del círculo dibujado y se utilizará para los cálculos. Añade esto a tu código, en algún lugar por debajo de las declaraciones de variables existentes:

+ +
var ballRadius = 10;
+ +

Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto:

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Rebotando arriba y abajo

+ +

Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto:

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Si el valor de y de la posición de la bola es menor que cero, cambie la dirección del movimiento en el eje y, estableciéndolo igual a sí mismo, invertido. Si la pelota se movía hacia arriba con una velocidad de 2 píxeles por fotograma, ahora se moverá "arriba" con una velocidad de -2 píxeles, lo que en realidad equivale a bajar a una velocidad de 2 píxeles por fotograma.

+ +

El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior:

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

Si la posición y de la pelota es mayor que la altura del canvas (recuerde que contamos los valores y desde la parte superior izquierda, de modo que el borde superior empieza en 0 y el borde inferior está en 480 píxeles, la altura del canvas), entonces rebota del borde inferior invirtiendo el movimiento del eje y como antes.

+ +

Podríamos fusionar esas dos sentencias en una para ahorrar código:

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la pelota.

+ +

Rebotando en la izquierda y derecha

+ +

Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y:

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

En este punto, debe insertar el bloque de código anterior en la función draw(), justo antes de la llave de cierre.

+ +

¡La pelota sigue desapareciendo en la pared!

+ +

Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos una pelota que rebotó en los cuatro bordes del canvas! Pero tenemos otro problema sin embargo - cuando la bola golpea cada pared se hunde en ella levemente antes de cambiar la dirección:

+ +

+ +

Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Cuando la distancia entre el centro de la bola y el borde de la pared es exactamente igual que el radio de la pelota, cambiará la dirección del movimiento. Restando el radio de un ancho del eje y añadiéndolo al otro nos da la impresión de una adecuada detección de colisiones - la pelota rebota de las paredes como debería hacerlo.

+ +

Compara tu código

+ +

Chequea el código acabado para esta parte con el tuyo, y juega:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

+ +
+

Ejercicio: cambia el color de la bola a un color al azar, cada vez que golpea una pared.

+
+ +

Siguientes pasos

+ +

Ahora hemos llegado al punto donde nuestra pelota se mueve y permanece en el tablero de juego. En el capítulo cuarto, veremos la implementación del control de una pala - vea Control de Pala y teclado.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html new file mode 100644 index 0000000000..99c944764b --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -0,0 +1,126 @@ +--- +title: Construye el muro de ladrillos +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

+ +
+

Este es el sexto paso de 10 del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson6.html.

+
+ +

Hemos cambiado la mecánica del juego y ahora ya podemos perder. Esto es genial porque significa que el juego finalmente se comporta como un juego. Sin embargo, pronto resultará aburrido si todo lo que puedes conseguir es hacer rebotar la pelota en las paredes y en la pala. Lo que el juego necesitamos es romper ladrillos con la bola. Ahora vamos a dibujar los ladrillos.

+ +

Declarar e inicializar las variables de los ladrillos

+ +

El propósito principal de esta lección consiste en escribir unas pocas líneas de código para los ladrillos, utilizando un bucle anidado que recorra una matriz bidimensional. Pero, antes, necesitamos preparar unas variables que definan la información sobre los ladrillos, como su ancho y alto, filas y columnas, etc. Añade estas líneas a tu programa, debajo de las otras variables que has definido antes:

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

Aquí hemos definido el número de filas (Row) y columnas (Column) de ladrillos, su ancho (Width) y alto (Height), el hueco entre los ladrillos para que no se toquen (Padding), y un margen superior (Top) e izquierdo (Left) para que no se dibujen tocando los bordes.

+ +

Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las columnas (c) de los ladrillos. Cada columna contendrá, a su vez, toda la fila (r) de ladrillos. Cada ladrillo se va a representar con un objeto con las posiciones "x" e "y" en las que se dibujará. Añade esto detrás de las definiciones de las variables:

+ +
var bricks = [];
+for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

El código anterior pasará por las filas y las columnas y creará los ladrillos. TEN EN CUENTA que esos objetos que representan a los ladrillos también se utilizarán para detectar colisiones más adelante.

+ +

Por si no lo terminas de entender... bricks[0][0] es el primer ladrillo (columna 0, fila 0) y se dibujará en "x" 0 e "y" 0. El siguiente ladrillo será el brick[0][1] (columna 0, fila 1) y se dibujará también en (0,0). Así, continuaremos hasta el final de la primera columna, que será el ladrillo bricks[0][2] porque hay 3 filas, de la 0 a la 2. Terminará así el bucle de dentro y seguirá el de fuera, valiendo ahora la "c" 1. Seguiremos recorriendo bricks[] hasta llegar a bricks[2][4], que es el último ladrillo.

+ +

Dibujar los bloques

+ +

Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+
+ +

Viene a ser lo mismo de antes, sólo que hemos añadido ctx.rect() para dibujar un rectángulo por cada ladrillo, además de otras llamadas a funciones para que, efectivamente, se dibuje el rectángulo.

+ +

Cada ladrillo se dibujará en la posición (0, 0), tendrá un ancho brickWidth y un alto de brickHeight.

+ +

Estupendo pero... ¡estamos dibujando todos los ladrillos en el mismo sitio! ¡Eso no puede ser!

+ +

Vamos a calcular en qué posición "x" e "y" se tiene que dibujar cada ladrillo así:

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+
+ +

El primer ladrillo se dibujará arriba a la izquierda, concretamente en (brickoffsetLeft, brickOffsetTop), porque c y r valen 0.

+ +

El siguiente ladrillo (columna 0, fila 1) se dibujará más abajo.

+ +

Intenta hacer tú mismo los cálculos y verás cómo cada ladrillo de la misma columna se dibujará más abajo o más arriba según en qué fila se encuentre.

+ +

También verás cómo cada ladrillo de la misma fila se dibujará más a la izquierda o a la derecha según en qué columna se encuentre.

+ +

Vamos a terminar la función drawBricks() para que quede así:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Dibujar los bloques (ahora sí)

+ +

Lo estamos haciendo muy bien, pero si has probado te habrás dado cuenta de que no se dibuja nada. ¿Qué es lo que falla?

+ +

Pues, sencillamente, que tenemos definida la función drawBricks() pero no la llamamos desde ningún sitio.

+ +

Añade drawBricks() dentro de draw(), justo antes de drawBall ():

+ +
drawBricks();
+
+ +

Compara tu código

+ +

Compara tu código con este:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}

+ +
+

Ejercicio: Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).

+
+ +

Pasos siguientes

+ +

¡Así que ahora tenemos ladrillos! Un gran avance pero... la pelota no los rompe, simplemente los atraviesa. En el siguiente capítulo lo arreglaremos: Detección de colisiones.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html new file mode 100644 index 0000000000..e6d950b834 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -0,0 +1,128 @@ +--- +title: Detección de colisiones +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

+ +
+

Este es el séptimo paso de los 10 del juego "Gamedev Canvas tutorial". Puedes encontrar el código como deberá quedar después de completar la leción en Gamedev-Canvas-workshop/lesson7.html.

+
+ +

Ya tenemos los ladrillos en la pantalla pero el juego todavía no es muy interesante, porque la bola los atraviesa. Tenemos que pensar una manera de detectar colisiones para que la bola pueda rebotar en los ladrillos y romperlos.

+ +

Nosotros decidimos cómo implementar esto, por supuesto, pero puede ser complicado calcular si la bola está tocando el rectángulo o no, porque no hay funciones del <canvas> que sirvan para saberlo. En este tutorial vamos a hacerlo de la manera más fácil que existe: comprobaremos si el centro de la bola está tocando (colisionando) con cualquiera de los ladrillos. No siempre funcionará a la perfección y hay formas de detectar colisiones más sofisticadas que funcionan mejor, pero no nos interesa verlas porque estamos aprendiendo y tenemos que hacer las cosas fáciles.

+ +

Una función para detectar colisiones

+ +

Para lograr nuestro objetivo vamos a definir una función que, con un bucle, recorrerá todos los ladrillos y comparará la posición de cada uno con la posición de la bola, cada vez que se dibuje un fotograma. Para que el código sea más legible definiremos la variable "b" que almacenará el objeto ladrillo en cada vuelta de bucle:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}
+ +

Si el centro de la bola está dentro de las coordenadas de uno de nuestros ladrillos, cambiaremos la dirección de la bola. Se cumplirá que el centro de la bola está dentro de ladrillo si se cumplen al mismo tiempo estas cuatro condiciones:

+ + + +

Traducimos esto a JavaScript:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Añade lo anterior a tu código, debajo de la función keyUpHandler().

+ +

Hacer que los ladrillos desaparezcan cuando reciben un golpe

+ +

El código anterior funcionará correctamente y la bola cambiará de dirección. El problema es que los ladrillos siguen donde están. Tenemos que imaginar una forma de ocuparnos de los que ya hemos golpeado con la bola. Podemos hacerlo añadiendo un parámetro extra para indicar si queremos pintar cada ladrillo en la pantalla o no. En la parte del código donde inicializamos los ladrillos, añadiremos una propiedad status a cada ladrillo. Cambia tu código fijándote en la línea que está resaltada:

+ +
var bricks = [];
+for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

A continuación consultaremos el "status" de cada ladrillo para saber si lo tenemos que dibujar o no. Si "status" vale 1, lo dibujaremos. Si vale 0, no lo dibujaremos porque habrá sido golpeado por la bola. Actualiza tu función drawBricks() para que quede así:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

Actualizar el "status" en la función de detección de colisiones

+ +

Ahora tenemos que ocuparnos del valor de "status" en la función collisionDetection(): si el ladrillo está activo (status 1) comprobaremos si hay colisión. Si hay colisión, pondremos el "status" de ese ladrillo a 0 para no volver a pintarlo. Actualiza collisionDetection() así:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activar la función de detección de colisiones

+ +

Ya sólo falta llamar a la función collisionDetection() desde la función draw(). Añade la línea siguiente dentro de draw() function, justo después de la llamada a drawPaddle():

+ +
collisionDetection();
+
+ +

Compara tu código

+ +

Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concretamente, miramos si la bola colisiona con cada ladrillo. ¡Ahora ya podemos romper ladrillos! :-

+ +

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}

+ +
+

Ejercicio: cambia el color de la bola cada vez que choque con un ladrillo.

+
+ +

Pasos siguientes

+ +

Definitivamente, lo estamos consiguiendo. ¡Adelanteeee! En el capítulo octavo nos ocuparemos de la Puntuación y fin del juego ganando.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..59703d3bc7 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,108 @@ +--- +title: Crea el lienzo (canvas) y dibuja en él +slug: >- + Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

+ +
+

Este es el primero de los 10 pasos del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson1.html.

+
+ +

Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento  {{htmlelement("canvas")}} .

+ +

El HTML del juego

+ +

La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como index.html en un lugar adecuado, y escribe el siguiente código:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</html>
+
+ +

En la cabecera (head) tenemos un charset, el título de la página {{htmlelement("title")}} y un poco de CSS básico. El {{htmlelement("body")}} contiene los elementos{{htmlelement("canvas")}} y {{htmlelement("script")}}. Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento  {{htmlelement("canvas")}} tiene el id myCanvas para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <script> y </script>.

+ +

El lienzo (canvas)

+ +

Para que podamos visualizar los gráficos en el elemento {{htmlelement("canvas")}}, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <script>:

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

Aquí estamos guardando una referencia al elemento {{htmlelement("canvas")}} en la variable canvas. Después estamos creando la variable ctx para guardar el contexto de gráficos 2D, que es la herramienta  que realmente utilizaremos para dibujar.

+ +

Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo index.html con un navegador para comprobar que funciona:

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

Todas las instrucciones están entre los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Estamos definiendo un rectángulo utilizando {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y  los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} guarda un color que utilizará el método {{domxref("CanvasRenderingContext2D.fill()","fill()")}} para pintar el cuadrado que, en nuestro caso, será rojo.

+ +

Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Como puedes ver, estamos utilizando otra vez los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. De lo que hay en medio, la parte más importante del código anterior es el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Tiene seis parámetros:

+ + + +

La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función rgba(), o cualquiera de los otros métodos de descripción de color que existen.

+ +

En lugar de utilizar {{domxref("CanvasRenderingContext2D.fill()","fill()")}} y rellenar las formas con colores, podemos utilizar {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función rgba(), que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.

+ +

Compara tu código

+ +

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +
+

Ejercicio: cambia el tamaño y el color de las figuras.

+
+ +

Pasos siguientes

+ +

Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (Mueve la bola).

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html new file mode 100644 index 0000000000..a3bd5e2c2e --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -0,0 +1,95 @@ +--- +title: Terminando +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

+ +
+

Este es el último de los 10 pasos del Gamedev Canvas tutorial. Puedes encontrar el código fuente tal y como quedará al terminar esta lección en Gamedev-Canvas-workshop/lesson10.html.

+
+ +

Siempre es posible mejorar cualquier juego que hagamos. Por ejemplo, podemos dar vidas al jugador. Así, aunque pierda la bola una o dos veces, todavía puede intentar derribar todo el muro. También podemos mejorar los aspectos gráficos.

+ +

Dar vidas al jugador

+ +

Dar vidas es bastante sencillo. Primero, añade una variable para guardar el número de vidas que tiene en cada momento. Ponla después de las que ya tienes:

+ +
var lives = 3;
+ +

Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar el contador de puntos. Añade la función siguiente detrás de la función drawScore():

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

En lugar de terminar el juego inmediatamente, restaremos una vida hasta que ya no quede ninguna. También podemos colocar la bola y la paleta en la posición inicial cuando el jugador empiece con la vida siguiente. En la función draw() cambia las dos líneas siguientes...

+ +
alert("GAME OVER");
+document.location.reload();
+ +

... por estas otras:

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

Ahora, cuando la bola toca el fondo, restamos una vida. Si no queda ninguna, el jugador pierde y termina la partida. Si queda alguna, entonces colocamos la bola y la paleta en el centro, y hacemos que la bola vaya en la nueva dirección correcta y a la velocidad inicial.

+ +

Sacar por pantalla el contador de vidas

+ +

Tienes que añadir una llamada a drawLives() dentro de draw() debajo de la llamada a drawScore():

+ +
drawLives();
+
+ +

Mejorar el refresco con requestAnimationFrame()

+ +

Ahora vamos a ocuparnos de algo que no es particular de este juego, sino de la forma en la que se muestran las imágenes en pantalla.

+ +

{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} ayuda al navegador a refrescar la imagen mejor que con el método {{domxref("windowTimers.setInterval()", "setInterval()")}} que estamos utilizando. Cambia la línea siguiente...

+ +
setInterval(draw, 10);
+ +

...por esta otra:

+ +
draw();
+ +

Y, ahora, al final de la función draw(), justo antes de la llave que la cierra, añade la línea siguiente, que hará que la función draw() se llame a sí misma una y otra vez:

+ +
requestAnimationFrame(draw);
+ +

Ahora draw() se ejecuta una y otra vez con un bucle requestAnimationFrame() pero, en lugar de hacerlo cada 10 milisegundos, dejamos que sea el navegadro quien decida cada cuánto tiempo. El navegador sincronizará el refresco, es decir, el número de fotogramas por segundo, a lo que sea capaz la máquina que está ejecutando el juego. De este modo la animación será más eficiente y más suave que el viejo método setInterval().

+ +

Compara tu código

+ +

Ya hemos terminado. ¡La versión final del juego está lista para publicar!

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}

+ +
+

Ejercicio: cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.

+
+ +

Game over - de momento!

+ +

Enhorabuena, has terminado todas las lecciones. Ya has aprendido las técnicas básicas de manipulación del <canvas> y la lógica que hay detrás de los juegos 2D sencillos.

+ +

Ahora sería un buen momento para aprender a utilizar entornos de desarrollo (frameworks) y de continuar con el desarrollo de juegos. Puedes echar un vistazo a estas otra forma de realizar el mismo juego que has visto en 2D breakout game using Phaser, o de echar un vistazo al tutorial Cyber Orb built in Phaser. También puedes leer el contenido de Games section on MDN para inspirarte y seguir aprendiendo.

+ +

También puedes volve al índice de este tutorial. ¡Diviértete programando!

+ +

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html new file mode 100644 index 0000000000..d57ccef444 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -0,0 +1,75 @@ +--- +title: Fin del juego +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego +tags: + - Canvas + - Fin del juego + - JavaScript + - Tutorial + - graficos +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

+ +
+

Este es el quinto paso de 10 del Gamedev Canvas tutorial. Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

+
+ +

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final. Sería bueno desde el punto de vista del juego poder perder. La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego.

+ +

Implementar el final del juego

+ +

Intentemos implementar el final del juego en nuestro juego. Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+ +

Hacer que la pala golpee la bola

+ +

Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}
+ +

Si la bola toca el borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala. Si es así, entonces rebota como el jugador se imagina que va a ocurrir; si no, el juego ha terminado.

+ +

Compara tu código

+ +

Aquí tienes el código que funciona para que lo compares con el tuyo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}

+ +
+

Ejercicio: haz que la bola se mueva más rápida cuando golpea la pala.

+
+ +

Siguientes pasos

+ +

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. Pero todavía falta algo. Vamos a pasar al sexto capítulo, Construir el muro de ladrillos, y crear algunos ladrillos para que la bola los destruya.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html new file mode 100644 index 0000000000..10ea794d5f --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -0,0 +1,52 @@ +--- +title: Famoso juego 2D usando JavaScript puro +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro +tags: + - 2D Canvas JavaScript Tutorial + - Principiante Juegos +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}}

+ +

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 {{htmlelement("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 {{htmlelement("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.

+ +

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. +
  2. Mueve la bola
    3. +
  3. Rebota en las paredes
    4. +
  4. Control de la pala y el teclado
    5. +
  5. Fin del juego
    6. +
  6. Construye el muro de ladrillos
    7. +
  7. Detección de colisiones
    8. +
  8. Cuenta los puntos y gana
    9. +
  9. Controles del ratón
    10. +
  10. Finalizando
    11. +
+ +

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.

+
+ +
+

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.

+ +

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html new file mode 100644 index 0000000000..65e32f0ac2 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -0,0 +1,53 @@ +--- +title: Controles del ratón +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

+ +
+

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson9.html.

+
+ +

El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón.

+ +

Detectar el movimiento del ratón

+ +

Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento {{event("mousemove")}}.Añade esta línea destrás de los otros "listeners", justo debajo del evento keyup:

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

Asociar el movimiento de la pala con el movimiento del ratón

+ +

Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

En esta función calculamos un valor relativeX, que es la posición horizontal del ratón en el "viewport" (e.clientX), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (canvas.offsetLeft).

+ +

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor relativeX menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

+ +

Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al <canvas>, no desaparecerá completamente por los lados.

+ +

Compara tu código

+ +

Aquí tienes el código para comparar:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}

+ +
+

Ejercicio: ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).

+
+ +

Pasos siguientes

+ +

Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos Finalizando.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html new file mode 100644 index 0000000000..60a5df8c5a --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -0,0 +1,154 @@ +--- +title: Mueve la bola +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

+ +
+

Este es el segundo paso de los 10 del tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson2.html.

+
+ +

Ya sabes cómo dibujar una pelota, lo has aprendido en el artículo anterior. Ahora vamos a hacer que se mueva. Técnicamente, estaremos pintando la pelota en la pantalla, borrándola y luego pintándola de nuevo en una posición ligeramente diferente cada fotograma para dar la impresión de movimiento, igual que se hace en las películas.

+ +

 

+ +

Definir un bucle de dibujo

+ +

 

+ +

Para actualizar el dibujo del lienzo en cada fotograma, necesitamos definir una función de dibujo que se ejecutará una y otra vez, cambiando una serie de variables para modificar la posición de cada personaje (sprite). Para que una misma función se ejecute una y otra vez puedes utilizar una función de sincronización de JavaScript, como {{domxref("WindowTimers.setInterval()", "setInterval()")}} or {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, excepto las dos primeras líneas, y añade lo siguiente debajo de ellas. La función draw() se ejecutará dentro de setInterval cada 10 milisegundos:

+ +
function draw() {
+    // código para dibujar
+}
+setInterval(draw, 10);
+ +

Gracias a la naturaleza infinita de setInterval, la función draw () se llamará cada 10 milisegundos por siempre, o hasta que lo detengamos. Ahora, vamos a dibujar la bola. Agrega lo siguiente dentro de tu función draw ():

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Prueba tu código actualizado ahora — la bola debería repintarse en cada fotograma (frame).

+ +

Hacer que se mueva

+ +
+
Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay movimiento, se dibuja una y otra vez en el mismo sitio.Vamos a cambiar eso. En primer lugar, en lugar de dibujar siempre en la posición (50, 50) definiremos un punto de inicio en la parte central inferior del lienzo en las variables llamadas x e y, a continuación, las utilizaremos para definir la posición en la que se dibuja el círculo.
+
+Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y:
+
+ +

 

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

 

+ +

A continuación actualiza la función draw() para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada:

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

Ahora viene la parte importante: queremos añadir un valor pequeño a x e y después de que cada fotograma se haya dibujado para que parezca que la pelota se está moviendo. Definamos estos valores pequeños como dx y dy, y establezcamos sus valores en 2 y -2 respectivamente. Agrega lo siguiente debajo de sus definiciones de variables x e y:

+ +
var dx = 2;
+var dy = -2;
+
+ +

Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy en cada fotograma, de modo que la bola será pintada en la nueva posición en cada actualización. Agrega las dos nuevas líneas siguientes indicadas a continuación a la función draw ():

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

Guarda el código de nuevo y pruébalo en tu navegador. Esto funciona bien, aunque parece que la bola está dejando un rastro detrás de ella:

+ +

+ +

Borrar el  lienzo antes de cada fotograma

+ +
+
La bola está dejando un rastro porque estamos pintando un nuevo círculo en cada fotograma sin borrar el anterior. No te preocupes, porque hay un método para borrar todo el contenido de lienzo: {{domxref ("CanvasRenderingContext2D.clearRect ()", "clearRect ()")}}. Este método tiene cuatro parámetros: las coordenadas x e y de la esquina superior izquierda de un rectángulo y las coordenadas x e y de la esquina inferior derecha de un rectángulo. En todo el área definida por ese rectángulo se borrará cualquier cosa que se haya pintado antes.
+
+ +
+
+
 
+
+
+ +

Añade la siguiente nueva línea resaltada a la función draw():

+ +
function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+
+ +

Guarda tu código y vuelve a probarlo. Esta vez verás el movimiento de la bola sin dejar rastro. Cada 10 milisegundos se borra todo el lienzo, se dibuja el círculo azul (nuestra pelota) en una posición determinada y los valores x e y se actualizan para el siguiente fotograma.

+ +

Limpiar el código

+ +

Vamos a añadir más y más comandos a la función draw () en los próximos artículos, por lo que es bueno mantenerlo lo más simple y limpio posible. Comencemos moviendo el código de dibujo de la bola a una función separada.
+
+ Reemplaza la función draw() con las dos funciones siguientes:

+ +
function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}
+ +

Compara tu código

+ +

Puedes comprobar el código terminado de este artículo en la demostración en vivo a continuación, y jugar con ella para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

+ +
+

Ejercicio: intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.

+
+ +

Siguientes pasos

+ +

Hemos dibujado nuestra bola y hemos hecho que se mueva, pero cuando supera el borde del canvas, desaparece. En el tercer capítulo exploraremos como hacer que rebote en las paredes.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html new file mode 100644 index 0000000000..81403423c7 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -0,0 +1,130 @@ +--- +title: Control de la pala y el teclado +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

+ +
+

Este es el cuarto de los 10 pasos del Tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson4.html.

+
+ +

 

+ +

La bola está rebotando en las paredes libremente y puedes estar mirándola toda la vida, pero, ahora mismo, no hay interactividad. ¡No es un juego si no puedes controlarlo! Vamos a añadirle la interacción del usuario: una paleta.

+ +

Definir una paleta para golpear la bola

+ +

Necesitamos una paleta para golpear la bola. Empezamos por definir variables para conseguirlo. Añade las variables siguientes en la parte de arriba de tu código, junto a las que ya tenías:

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función drawBall():

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

Permitir que el usuario controle la paleta

+ +

Podemos dibujar la paleta donde queramos, pero debería responder a las acciones del usuario. Ha llegado la hora de implementar algunos controles de teclado. Vamos a necesitar:

+ + + +

Empezaremos por definir las variables que nos dirán si se ha pulsado un botón. Añade estas líneas donde has definido las demás variables:

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

Las dos las inicializamos con el valor false porque al principio no están pulsados los botones. Para "escuchar" las pulsaciones de las teclas necesitamos definir dos "escuchadores de eventos" (event listeners). Añade las líneas siguientes justo antes de setInterval() al final de tu código:

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

Cuando ocurra el evento keydown al pulsar cualquier tecla del teclado, la función keyDownHandler() se ejecutará. Cuando se liberará la tecla pulsada, se ejecutará la función keyUpHandler(). Añade esto después de las líneas del addEventListener() que acababas de escribir:

+ +
function keyDownHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = true;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = false;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = false;
+    }
+}
+ +

Cuando pulsamos una tecla se ejecuta keyDownHandler(e), que pone en la variable "e" los datos que necesitamos. Efectivamente, e.keyCode nos va a decir qué tecla se ha pulsado. Si vale 37 es porque se ha pulsado la "flecha izquierda" del teclado. El código 39 representa a la "flecha derecha".

+ +

Pues bien, cuando se pulsará la "flecha izquierda" pondremos leftPressed a true.

+ +

Cuando se liberará la "flecha izquierda" pondremos leftPressed a false.

+ +

De igual forma procederá el programa con la "flecha derecha", detectando el código 39 y dando los valores oportunos a la variable rightPressed.

+ +

La lógica del movimiento de la paleta

+ +

Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función draw() comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto:

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así:

+ +
if(rightPressed && paddleX < canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed && paddleX > 0) {
+    paddleX -= 7;
+}
+ +

La posición paddleX que estamos utilizando variará entre 0 para la lado izquierdo y canvas.width-paddleWidth para el lado derecho, que es justo lo que queremos.

+ +

Añade el código anterior dentro de la función draw(), al final, justo antes de la llave que cierra.

+ +

Lo único que nos falta por hacer es llamar a la función drawPaddle() desde dentro de la función draw() para que dibuje la paleta dentro en la pantalla. Añade la línea siguiente dentro de draw(), justo antes de la línea que llama a la función drawBall():

+ +
drawPaddle();
+
+ +

Compara tu código

+ +

Aquí está el código que funciona, para que lo compares con el tuyo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}

+ +
+

Ejercicio: haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.

+
+ +

Pasos siguientes

+ +

Ahora mismo tenemos algo que parece un juego. El único problema es que todo lo que puedes hacer es golpear la bola con la paleta toda la vida (en realidad, ni siquiera la golpeas). Todo esto cambiará en el quinto capítulo, Fin del juego, cuando añadiremos un estado de "Game Over".

+ +
 
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html new file mode 100644 index 0000000000..b67a730e94 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -0,0 +1,92 @@ +--- +title: Poner un contador y terminar ganando +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

+ +
+

Este es el octavo capítulo de 10, del Gamedev Canvas tutorial. Puedes encontrar el código fuente como debería quedar tras este capítulo en Gamedev-Canvas-workshop/lesson8.html.

+
+ +

Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.

+ +

El contador

+ +

Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:

+ +
var score = 0;
+ +

También necesitas una función drawScore() para enseñar el contador por pantalla. Añade esto después de la función collisionDetection():

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

Dibujar texto en el <canvas> es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método {{domxref("CanvasRenderingContext2D.font","font()")}} method. Despúes utilizas {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} para fijar el color y {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.

+ +

Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

Llamando a drawScore() (dibujar contador) desde la función draw() hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en draw(), justo debajo de la llamada a drawPaddle():

+ +
drawScore();
+ +

Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos

+ +

Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función collisionDetection():

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+ +

Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función document.location.reload() vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().

+ +

Compara tu código

+ +

Puedes comparar tu código con este:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}

+ +
+

Ejercicio: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.

+
+ +

Pasos siguientes

+ +

El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el Control del ratón.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html new file mode 100644 index 0000000000..135193ec50 --- /dev/null +++ b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html @@ -0,0 +1,437 @@ +--- +title: >- + Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de + Orientación a Dispositivos +slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation +tags: + - API Vibración + - API orientacion de dispositivos + - Canvas + - Desarrollo de videojuegos + - HTML5 + - Phaser +translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +--- +
{{GamesSidebar}}

{{ draft() }}

+ +

Introducción

+ +

En este tutorial iremos a través del proceso de construcción de un juego en HTML5 para móviles que utilizará las APIs de Orientación para Dispositivos y Vibración para mejorar la jugabilidad y estará construido utilizando el framework Phaser. Se recomienda tener conocimientos básicos de JavaScript para sacar mayor provecho a este tutorial.

+ +

Ejemplo

+ +

Al finalizar este tutorial tendrás un juego demo completamente funcional: Cyber Orb. Se verá más o menos así:

+ +

+ +

Phaser framework

+ +

Phaser es un framework para construir juegos, de móvil o escritorio, en HTML5 . Es nuevo pero está creciendo velozmente gracias a la apasionada comunidad involucrada en el proceso de desarrollo. Puedes chequearlo en GitHub donde se encuentra como open source. Lee la documentación en línea y recorre su gran colección de ejemplos. El framework Phaser provee una serie de herramientas que acelerarán el desarrollo y te ayudaran a manejar las tareas genéricas necesarias para completar tu juego, para que así puedas concentrarte en la idea del juego en sí.

+ +

Empezando con el proyecto

+ +

Puedes ver el código fuente de Cyber Orb en GitHub. La estructura de carpetas no es nada complicada: el punto de partida es el archivo index.html donde inicializaremos el framework y configuraremos el canvas donde correrá el juego.

+ +

+ +

Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar el juego y probarlo. También hay tres carpetas en el directorio: 

+ + + +

Configurando el canvas

+ +

Vamos a renderizar nuestro juego sobre el elemento <canvas>, pero no lo haremos manualmente  — de esto se ocupará el framework.  Vamos a configurarlo: nuestro punto de partida es el archivo index.html con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Cyber Orb</title>
+    <style> body { margin: 0; background: #333; } </style>
+    <script src="src/phaser.min.js"></script>
+    <script src="src/Boot.js"></script>
+    <script src="src/Preloader.js"></script>
+    <script src="src/MainMenu.js"></script>
+    <script src="src/Game.js"></script>
+</head>
+<body>
+<script>
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+</script>
+</body>
+</html>
+ +

Hasta ahora tenemos una simple página web HTML con el contenido básico en la sección <head>: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El <body> contiene la inicialización del framework Phaser y las definiciones del estado del juego.

+ +
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+ +

La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del <canvas>, su altura, el método de renderizado (estamos utilizando CANVAS pero también existen disponibles las opciones WEBGL y AUTO) y el ID opcional del contenedor DOM en el que queremos poner el <canvas>. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el <canvas> será añadido a la etiqueta <body>. Sin el framework para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta <body>:

+ +
<canvas id='game' width='320' height='480'></canvas>
+ +

Es importante recordar que el framework está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.

+ +
+

Nota: Puedes leer este artículo: "Building Monster Wants Candy" para una introducción en profundidad a las funciones y métodos específicos de Phaser.

+
+ +

Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado Boot:

+ +
game.state.add('Boot', Ball.Boot);
+ +

El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo start está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente.

+ +
 
+ +

Gestionando los estados de juego

+ +

Los estados en Phaser son partes separadas de la lógica del juego, en nuestro caso los estamos cargando de archivos JavaScript independientes para un mejor mantenimiento. En este juego tenemos estados básicos: Boot, Preloader, MainMenu, Howto y Game. Boot se hará cargo de la inicialización de algunas opciones de configuración, Preloader cargará todos los elementos utilizados como los gráficos y el audio, MainMenu es el menu con el botón de inicio, Howto muestra las intrucciones de cómo jugar y el estado Game es el que finalmente te permite jugar el juego. Veamos rapidamente el contenido de esos estados.

+ +

Boot.js

+ +

El estado Boot es el primero en el juego.

+ +
var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};
+ +

El objeto principal Ball es definido y estamos añadiendo dos variables llamadas _WIDTH y _HEIGHT esos seran el ancho y la altura del canvas de nuestro juego, respectivamente — nos ayudarán a posicionar los elementos en la pantalla. Estamos cargando dos imagenes primero que serán usadas después en el estado Preload para mostrar el progreso de la carga de los demás elementos. La función create contiene algunas de las configuraciones básicas: estamos configurando la escala y la alineación del canvas, y avanzando al estado Preload cuando todo este listo.

+ +

Preloader.js

+ +

El estado Preloader se ocupa de cargar todos los elementos:

+ +
Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};
+ +

Para crear un nuevo botón tenemos el método add.button con la siguiente lista de argumentos opcionales:

+ + + +

El anchor.set colocará el punto de ancla en el botón con el cual se realizarán y aplicarán todos los cálculos de posición para el botón. En nuestro caso, está anclado a la mitad del borde izquierdo y al comienzo del borde superior, para así centrarlo de manera horizontal facilmente, sin necesidad de saber su ancho.

+ +

Cuando el boton de inicio es presionado, en lugar de saltar directamente a la acción, el juego mostrará la pantalla con las intrucciones para jugar.

+ +

Howto.js

+ +
Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};
+ +

El estado Howto muesta las intrucciones de juego en la pantalla antes de comenzar el juego. Luego de clickear la pantalla el juego es lanzado.

+ +

Game.js

+ +

El estado Game del archivo Game.js es donde ocurre toda la magia. Todas las inicializaciones estan en la función create() (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función update() que es ejecutada en cada frame y actualiza cosas como la posición de la pelota.

+ +
Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};
+ +

Las funciones create y update son específicas del framework, mientras que otras seran nuestras propias creaciones:

+ + + +

Agregando la pelota y sus mecanismos de movimiento

+ +

Primero vamos a ir a la función create(), inicializamos el objeto ball y le asignamos unas cuantas propiedades:

+ +
this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
+this.ball.anchor.set(0.5);
+this.physics.enable(this.ball, Phaser.Physics.ARCADE);
+this.ball.body.setSize(18, 18);
+this.ball.body.bounce.set(0.3, 0.3);
+ +

Aqui estamos agregando un sprite en un lugar de la pantalla y utilizando la imagen de la pelota de los elementos gráficos ya cargados. También estamos configurando el anchor (ancla) que realizará los cálculos de física para el centro de la pelota, habilitando el motor de físicas Arcade (que manejara todas las físicas para el movimiento de la pelota), y estableciendo el tamaño del cuerpo para la detección de colisiones. La propiedad bounce es utilizada para configurar el 'rebote' de la pelota cuando golpea los obstaculos.

+ +

Controlando la pelota

+ +

Es genial tener lista la pelota para poder lanzarla en la zona del juego, pero también es importante poder realmente moverla! Ahora vamos a añadir la capacidad de controlar con el teclado la pelota en los dispositivos de escritorio, y luego pasaremos a la implementación de la API de Orientación de Dispositivo. Vamos a enfocarnos en el teclado primero añadiendo lo siguiente a la función create():

+ +
this.keys = this.game.input.keyboard.createCursorKeys();
+ +

Como puedes ver, hay una función especial de Phaser llamada createCursorKeys() que nos dará un objeto con controladores de evento para las cuatro teclas de flecha, que nos permitira jugar con: arriba, abajo, izquierda y derecha.

+ +

A continuación añadiremos el siguiente código a la función update(), para que sea ejecutado en cada frame. El objeto this.keys será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida:

+ +
if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}
+ +

De esa manera podemos verificar qué tecla es presionada en determinado frame y aplicar la fuerza definida a la pelota, así aumentar la velocidad en la dirección correcta.

+ +

Implementando la API de Orientación del Dispositivo

+ +

Probablemente la parte más interesante del juego es que utiliza la API de Orientación para Dispositivos móviles. Gracias a esto puedes jugar el juego inclinando el dispositivo en la dirección que quieres que la pelota ruede. Aquí está el código de la función create() responsable por esto:

+ +
window.addEventListener("deviceorientation", this.handleOrientation, true);
+ +

Vamos a añadir un detector de eventos al evento "deviceorientation" y vincularlo a la función handleOrientation, se ve como esto:

+ +
handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}
+ +

Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la velocidad en la que se mueve es mayor.

+ +

+ +
+

Nota: Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee Keep it level: responding to device orientation changes.

+
+ +

Añadiendo el agujero

+ +

El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función create() de nuestro estado Game:

+ +
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);
+ +

La diferencia está en que el cuerpo del agujero se configura como inamovible por lo que no se moverá cuando acertamos con la pelota y tendrá calculada la detección de colisión (esto se tratará más adelante en este artículo).

+ +

Construyendo el laberinto de bloques

+ +

Para hacer más difícil el juego, y más interesante, añadiremos algunos obstaculos entre la pelota y la sálida. Podríamos usar un editor de niveles pero por motivo de este tutorial, vamos a crear algo nosotros mismos.

+ +

Para contener el bloque de información usaremos un array con los datos de nivel: para cada bloque almacenaremos las posiciones abolutas izquierda y superior en pixeles (x e y) y el tipo de bloque: horizontal o vertical (t con el valor 'w' para el ancho, y 'h' para la altura). Luego, para cargar el nivel analizaremos los datos y mostraremos los bloques especificos para ese nivel. En la función initLevels tenemos:

+ +
this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];
+ +

Todos los elementos del array contienen una colección de bloques con una posición x e y y un valor t para cada uno. Luego de levelData pero dentro de la función initLevels, añadiremos los bloques dentro de un array en el loop for usando algunos de los métodos específicos del framework:

+ +
for(var i=0; i<this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e<this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}
+ +

Primero, add.group() es usado para crear un nuevo grupo de items. Luego, el body tipe ARCADE se configura para permitir los cálculos de física. El método newLevel.create crea nuevos items en el grupo con posiciones superior e izquierda iniciales y su propia imagen. Si no quieres recorrer nuevamente la lista de elementos para agregar una propiedad a cada uno explicitamente, puedes usar setAll en un grupo para aplicarlo a todos los items en ese grupo.

+ +

Los objetos son almacenados en el array this.levels, el cual es por defecto invisible. Para cargar niveles específicos, nos aseguramos de que los niveles previos esten escondidos, y mostramos el nivel actual:

+ +
showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}
+ +

Gracias a eso el juego da al jugador un reto: ahora tiene que rodar la pelota a través del área de juego y guiarla por el laberinto construido por bloques. Es solo un ejemplo de cargar los niveles, y solo hay 5 puramente para mostrar la idea, pero podés trabajar en expandirlo por tu cuenta.

+ +

Detección de colisión

+ +

Hasta este punto tenemos la pelota, que puede ser controlada por el jugador, el agujero que se tiene que alcanzar y los obstáculos que bloquean el camino. Sin embargo, hay un problema: nuestro juego todavía no tiene ninguna detección de colisiones, así que no sucede nada cuando la pelota golpea los bloques, sólo los atraviesa. Vamos a arreglarlo! La buena noticia es que el framework se ocupará de calcular la detección de colisones, nosotros sólo debemos especificar los objetos con los que colisionará en la función update():

+ +
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
+ +

Esto le dirá al framework que ejecute la función wallCollision cuando la pelota golpee cualquiera de las paredes. Podemos usar la función wallCollision para añadir cualquier funcionalidad que querramos, como por ejemplo agregar el sonido de rebote e implementar la API de Vibración.

+ +

También debemos volver al objeto pelota y limitarlo a moverse sólo en la zona visible, para que no salga de la pantalla. Hay una función muy útil en Phaser que se llama collideWorldBounds:

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

Hace exactamente lo que necesitamos: ahora la pelota rebotará en los bordes de la pantalla como de las paredes.

+ +

Añadiendo el sonido

+ +

Entre los elementos precargados hay una pista de audio (en varios formatos para asegurar la compatibilidad con el navegador), que podremos usar ahora. Debe primero ser definida en la función create():

+ +
this.bounceSound = this.game.add.audio('audio-bounce');
+ +

Si el estado del audio es true (es decir que el sonido del juego está activado) podremos reproducirlo en la función wallCollision:

+ +
if(this.audioStatus) {
+    this.bounceSound.play();
+}
+ +

Eso es todo: cargar y reproducir sonidos es sencillo con Phaser.

+ +

Implementando la API de Vibración

+ +

Cuando la detección de colisión funcione como es esperado, añadamos algunos efectos especiales con la ayuda de la API de Vibración.

+ +

La mejor forma de usarla en nuestro caso es haciendo que el teléfono vibre cada vez que la pelota golpee las paredes: dentro de la función wallCollision:

+ +
if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}
+ +

Si el método vibrate es soportado por el navegador y está disponible en el objeto window.navigator, hará vibrar al telefono por 100 milisegundos. Eso es todo!

+ +

Añadiendo el tiempo transcurrido

+ +

Para mejorar la re-jugabilidad y dar a los jugadores la opción de competir entre ellos, almacenaremos el tiempo transcurrido: los jugadores entonces intentaran mejorar su tiempo de finalizacion. Para implementar esto en el juego tenemos que crear una variable para almacenar el número actual de segundos transcurrido desde el inicio del juego y mostrarselo al jugador durante el juego. Definamos primero las variables en la función create:

+ +
this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game
+ +

Luego, podemos inicializar los objetos de texto necesarios para mostrar la información al usuario:

+ +
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
+ +

Estamos definiendo la posición superior e izquierda del texto, el contenido que se muestra y el estilo aplicado al texto. Lo hemos impreso en pantalla, pero sería bueno actualizar los valores cada segundo:

+ +
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
+ +

Este bucle, también en la función create, ejecutará la función updateCounter cada segundo desde el comienzo del juego, así podemos aplicar los cambios acordes. Así es como se ve la función updateCounter completa:

+ +
updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},
+ +

Como puedes ver estamos incrementando la variable this.timer y actualizando el contenido del objeto de texto con el valor actual en cada iteración, por lo que el jugador verá el tiempo transcurrido.

+ +

Terminando el nivel y el juego

+ +

La pelota está rodando en la pantalla, el temporizador funciona y tenemos el agujero al que tenemos que llegar. Vamos a configurar la posibilidad de finalizar el juego! La siguiente linea en la funcion update() añade un detector que se activa cuando la pelota llega al agujero.

+ +
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
+ +

Esto funciona de manera similar al método colide explicado anteriormente. Cuando la pelota se superpone con el agujero (en lugar de colisionar), la función finishLevel es ejecutada:

+ +
finishLevel: function() {
+    if(this.level >= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},
+ +

Si el nivel actual es igual al maximo número de niveles (5, en este caso), entonces el juego termina: recibiras un mensaje de felicitación junto con el numero de segundas transcurridos durante todo el juego, y un botoón para presionar que te llevará al menú principal.

+ +

Si el nivel actual es menor que 5, todas las variables necesarias se reinician y el siguiente nivel es cargado.

+ +

Ideas para nuevas características

+ +

Esto no es más que una demostración funcional de un juego que podría tener un montón de características adicionales. Por ejemplo podemos añadir poderes para recoger en el camino que harán que nuestra pelota ruede más rápido, otro podría detener el temporizador durante unos segundos o dar la pelota poderes especiales para atravesar obstáculos. También hay espacio para los obstáculos y trampas que harán más lenta la pelota, acelerar el tiempo o trampas de la propia pelota. Puedes crear más niveles con dificultades diferentes para cada uno. Incluso puedes obtener logros, tablas de clasificación y medallas para diferentes acciones en el juego. Hay un sinfín de posibilidades: sólo dependen de tu imaginación.

+ +

Resumen

+ +

Espero que este tutorial te ayude a introducirte dentro del desarrollo de los juegos 2D y te inspire a crear asombrosos juegos por tu cuenta. Puedes jugar el demo de Cyber Orb y chequear su código fuente en GitHub.

+ +

HTML5 nos da herramientas en bruto, los frameworks construidos sobre estas se están volviendo más rápidos y mejores, por lo que ahora es un gran momento para meterse en el desarrollo de juegos web. En este tutorial usamos Phaser, pero hay un gran número de otros frameworks que vale la pena considerar también, como ImpactJS, Construct 2 o PlayCanvas — depende de tus preferencias, habilidades de programación (o la falta de estas), el tamaño de tu proyecto, los requerimientos y otros aspectos. Deberías chequearlos todos y decidir cual es el que mejor se ajusta a tus necesidades.

diff --git a/files/es/games/tutorials/index.html b/files/es/games/tutorials/index.html new file mode 100644 index 0000000000..3a0807cc77 --- /dev/null +++ b/files/es/games/tutorials/index.html @@ -0,0 +1,10 @@ +--- +title: Workflows for different game types +slug: Games/Workflows +tags: + - NeedsTranslation + - TopicStub +translation_of: Games/Tutorials +--- +
{{GamesSidebar}}

This page will contain links to different article series covering different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

+

For example, a 2D maze game with Phaser and the Device Orientation API.

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html deleted file mode 100644 index d168aa0102..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Rebota en las paredes -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ---- -
{{GamesSidebar}}
-

{{IncludeSubnav("/es/docs/Games")}}

-
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

- -
-

Este es el tercer paso de 10 del  tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código fuente y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson3.html.

-
- -

Es agradable ver nuestra bola moviéndose, pero desaparece rápidamente de la pantalla, limitando la diversión que podemos tener con ella. Para superar esto, implementaremos una detección de colisión muy simple (que se explicará más adelante con más detalle) para hacer que la pelota rebote en los cuatro bordes del Canvas.

- -

Detección de colisión simple

- -

Para detectar la colisión verificamos si la bola está tocando (chocando con) la pared y si es así, cambiaremos la dirección de su movimiento en consecuencia.

- -

Para facilitar los cálculos, definamos una variable llamada ballRadius que mantendrá el radio del círculo dibujado y se utilizará para los cálculos. Añade esto a tu código, en algún lugar por debajo de las declaraciones de variables existentes:

- -
var ballRadius = 10;
- -

Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto:

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

Rebotando arriba y abajo

- -

Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto:

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

Si el valor de y de la posición de la bola es menor que cero, cambie la dirección del movimiento en el eje y, estableciéndolo igual a sí mismo, invertido. Si la pelota se movía hacia arriba con una velocidad de 2 píxeles por fotograma, ahora se moverá "arriba" con una velocidad de -2 píxeles, lo que en realidad equivale a bajar a una velocidad de 2 píxeles por fotograma.

- -

El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior:

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

Si la posición y de la pelota es mayor que la altura del canvas (recuerde que contamos los valores y desde la parte superior izquierda, de modo que el borde superior empieza en 0 y el borde inferior está en 480 píxeles, la altura del canvas), entonces rebota del borde inferior invirtiendo el movimiento del eje y como antes.

- -

Podríamos fusionar esas dos sentencias en una para ahorrar código:

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la pelota.

- -

Rebotando en la izquierda y derecha

- -

Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y:

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

En este punto, debe insertar el bloque de código anterior en la función draw(), justo antes de la llave de cierre.

- -

¡La pelota sigue desapareciendo en la pared!

- -

Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos una pelota que rebotó en los cuatro bordes del canvas! Pero tenemos otro problema sin embargo - cuando la bola golpea cada pared se hunde en ella levemente antes de cambiar la dirección:

- -

- -

Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto:

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Cuando la distancia entre el centro de la bola y el borde de la pared es exactamente igual que el radio de la pelota, cambiará la dirección del movimiento. Restando el radio de un ancho del eje y añadiéndolo al otro nos da la impresión de una adecuada detección de colisiones - la pelota rebota de las paredes como debería hacerlo.

- -

Compara tu código

- -

Chequea el código acabado para esta parte con el tuyo, y juega:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

- -
-

Ejercicio: cambia el color de la bola a un color al azar, cada vez que golpea una pared.

-
- -

Siguientes pasos

- -

Ahora hemos llegado al punto donde nuestra pelota se mueve y permanece en el tablero de juego. En el capítulo cuarto, veremos la implementación del control de una pala - vea Control de Pala y teclado.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html deleted file mode 100644 index 99c944764b..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Construye el muro de ladrillos -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

- -
-

Este es el sexto paso de 10 del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson6.html.

-
- -

Hemos cambiado la mecánica del juego y ahora ya podemos perder. Esto es genial porque significa que el juego finalmente se comporta como un juego. Sin embargo, pronto resultará aburrido si todo lo que puedes conseguir es hacer rebotar la pelota en las paredes y en la pala. Lo que el juego necesitamos es romper ladrillos con la bola. Ahora vamos a dibujar los ladrillos.

- -

Declarar e inicializar las variables de los ladrillos

- -

El propósito principal de esta lección consiste en escribir unas pocas líneas de código para los ladrillos, utilizando un bucle anidado que recorra una matriz bidimensional. Pero, antes, necesitamos preparar unas variables que definan la información sobre los ladrillos, como su ancho y alto, filas y columnas, etc. Añade estas líneas a tu programa, debajo de las otras variables que has definido antes:

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
- -

Aquí hemos definido el número de filas (Row) y columnas (Column) de ladrillos, su ancho (Width) y alto (Height), el hueco entre los ladrillos para que no se toquen (Padding), y un margen superior (Top) e izquierdo (Left) para que no se dibujen tocando los bordes.

- -

Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las columnas (c) de los ladrillos. Cada columna contendrá, a su vez, toda la fila (r) de ladrillos. Cada ladrillo se va a representar con un objeto con las posiciones "x" e "y" en las que se dibujará. Añade esto detrás de las definiciones de las variables:

- -
var bricks = [];
-for(c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

El código anterior pasará por las filas y las columnas y creará los ladrillos. TEN EN CUENTA que esos objetos que representan a los ladrillos también se utilizarán para detectar colisiones más adelante.

- -

Por si no lo terminas de entender... bricks[0][0] es el primer ladrillo (columna 0, fila 0) y se dibujará en "x" 0 e "y" 0. El siguiente ladrillo será el brick[0][1] (columna 0, fila 1) y se dibujará también en (0,0). Así, continuaremos hasta el final de la primera columna, que será el ladrillo bricks[0][2] porque hay 3 filas, de la 0 a la 2. Terminará así el bucle de dentro y seguirá el de fuera, valiendo ahora la "c" 1. Seguiremos recorriendo bricks[] hasta llegar a bricks[2][4], que es el último ladrillo.

- -

Dibujar los bloques

- -

Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla:

- -
function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            bricks[c][r].x = 0;
-            bricks[c][r].y = 0;
-            ctx.beginPath();
-            ctx.rect(0, 0, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
-
- -

Viene a ser lo mismo de antes, sólo que hemos añadido ctx.rect() para dibujar un rectángulo por cada ladrillo, además de otras llamadas a funciones para que, efectivamente, se dibuje el rectángulo.

- -

Cada ladrillo se dibujará en la posición (0, 0), tendrá un ancho brickWidth y un alto de brickHeight.

- -

Estupendo pero... ¡estamos dibujando todos los ladrillos en el mismo sitio! ¡Eso no puede ser!

- -

Vamos a calcular en qué posición "x" e "y" se tiene que dibujar cada ladrillo así:

- -
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-
- -

El primer ladrillo se dibujará arriba a la izquierda, concretamente en (brickoffsetLeft, brickOffsetTop), porque c y r valen 0.

- -

El siguiente ladrillo (columna 0, fila 1) se dibujará más abajo.

- -

Intenta hacer tú mismo los cálculos y verás cómo cada ladrillo de la misma columna se dibujará más abajo o más arriba según en qué fila se encuentre.

- -

También verás cómo cada ladrillo de la misma fila se dibujará más a la izquierda o a la derecha según en qué columna se encuentre.

- -

Vamos a terminar la función drawBricks() para que quede así:

- -
function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-            bricks[c][r].x = brickX;
-            bricks[c][r].y = brickY;
-            ctx.beginPath();
-            ctx.rect(brickX, brickY, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

Dibujar los bloques (ahora sí)

- -

Lo estamos haciendo muy bien, pero si has probado te habrás dado cuenta de que no se dibuja nada. ¿Qué es lo que falla?

- -

Pues, sencillamente, que tenemos definida la función drawBricks() pero no la llamamos desde ningún sitio.

- -

Añade drawBricks() dentro de draw(), justo antes de drawBall ():

- -
drawBricks();
-
- -

Compara tu código

- -

Compara tu código con este:

- -

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}

- -
-

Ejercicio: Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).

-
- -

Pasos siguientes

- -

¡Así que ahora tenemos ladrillos! Un gran avance pero... la pelota no los rompe, simplemente los atraviesa. En el siguiente capítulo lo arreglaremos: Detección de colisiones.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html deleted file mode 100644 index 81403423c7..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Control de la pala y el teclado -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

- -
-

Este es el cuarto de los 10 pasos del Tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson4.html.

-
- -

 

- -

La bola está rebotando en las paredes libremente y puedes estar mirándola toda la vida, pero, ahora mismo, no hay interactividad. ¡No es un juego si no puedes controlarlo! Vamos a añadirle la interacción del usuario: una paleta.

- -

Definir una paleta para golpear la bola

- -

Necesitamos una paleta para golpear la bola. Empezamos por definir variables para conseguirlo. Añade las variables siguientes en la parte de arriba de tu código, junto a las que ya tenías:

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función drawBall():

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

Permitir que el usuario controle la paleta

- -

Podemos dibujar la paleta donde queramos, pero debería responder a las acciones del usuario. Ha llegado la hora de implementar algunos controles de teclado. Vamos a necesitar:

- - - -

Empezaremos por definir las variables que nos dirán si se ha pulsado un botón. Añade estas líneas donde has definido las demás variables:

- -
var rightPressed = false;
-var leftPressed = false;
- -

Las dos las inicializamos con el valor false porque al principio no están pulsados los botones. Para "escuchar" las pulsaciones de las teclas necesitamos definir dos "escuchadores de eventos" (event listeners). Añade las líneas siguientes justo antes de setInterval() al final de tu código:

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

Cuando ocurra el evento keydown al pulsar cualquier tecla del teclado, la función keyDownHandler() se ejecutará. Cuando se liberará la tecla pulsada, se ejecutará la función keyUpHandler(). Añade esto después de las líneas del addEventListener() que acababas de escribir:

- -
function keyDownHandler(e) {
-    if(e.keyCode == 39) {
-        rightPressed = true;
-    }
-    else if(e.keyCode == 37) {
-        leftPressed = true;
-    }
-}
-
-function keyUpHandler(e) {
-    if(e.keyCode == 39) {
-        rightPressed = false;
-    }
-    else if(e.keyCode == 37) {
-        leftPressed = false;
-    }
-}
- -

Cuando pulsamos una tecla se ejecuta keyDownHandler(e), que pone en la variable "e" los datos que necesitamos. Efectivamente, e.keyCode nos va a decir qué tecla se ha pulsado. Si vale 37 es porque se ha pulsado la "flecha izquierda" del teclado. El código 39 representa a la "flecha derecha".

- -

Pues bien, cuando se pulsará la "flecha izquierda" pondremos leftPressed a true.

- -

Cuando se liberará la "flecha izquierda" pondremos leftPressed a false.

- -

De igual forma procederá el programa con la "flecha derecha", detectando el código 39 y dando los valores oportunos a la variable rightPressed.

- -

La lógica del movimiento de la paleta

- -

Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función draw() comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto:

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así:

- -
if(rightPressed && paddleX < canvas.width-paddleWidth) {
-    paddleX += 7;
-}
-else if(leftPressed && paddleX > 0) {
-    paddleX -= 7;
-}
- -

La posición paddleX que estamos utilizando variará entre 0 para la lado izquierdo y canvas.width-paddleWidth para el lado derecho, que es justo lo que queremos.

- -

Añade el código anterior dentro de la función draw(), al final, justo antes de la llave que cierra.

- -

Lo único que nos falta por hacer es llamar a la función drawPaddle() desde dentro de la función draw() para que dibuje la paleta dentro en la pantalla. Añade la línea siguiente dentro de draw(), justo antes de la línea que llama a la función drawBall():

- -
drawPaddle();
-
- -

Compara tu código

- -

Aquí está el código que funciona, para que lo compares con el tuyo:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}

- -
-

Ejercicio: haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.

-
- -

Pasos siguientes

- -

Ahora mismo tenemos algo que parece un juego. El único problema es que todo lo que puedes hacer es golpear la bola con la paleta toda la vida (en realidad, ni siquiera la golpeas). Todo esto cambiará en el quinto capítulo, Fin del juego, cuando añadiremos un estado de "Game Over".

- -
 
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html deleted file mode 100644 index 65e32f0ac2..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Controles del ratón -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

- -
-

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson9.html.

-
- -

El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón.

- -

Detectar el movimiento del ratón

- -

Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento {{event("mousemove")}}.Añade esta línea destrás de los otros "listeners", justo debajo del evento keyup:

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

Asociar el movimiento de la pala con el movimiento del ratón

- -

Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

En esta función calculamos un valor relativeX, que es la posición horizontal del ratón en el "viewport" (e.clientX), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (canvas.offsetLeft).

- -

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor relativeX menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

- -

Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al <canvas>, no desaparecerá completamente por los lados.

- -

Compara tu código

- -

Aquí tienes el código para comparar:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}

- -
-

Ejercicio: ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).

-
- -

Pasos siguientes

- -

Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos Finalizando.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index 59703d3bc7..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Crea el lienzo (canvas) y dibuja en él -slug: >- - Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

- -
-

Este es el primero de los 10 pasos del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson1.html.

-
- -

Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento  {{htmlelement("canvas")}} .

- -

El HTML del juego

- -

La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como index.html en un lugar adecuado, y escribe el siguiente código:

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScript code goes here
-</script>
-
-</body>
-</html>
-
- -

En la cabecera (head) tenemos un charset, el título de la página {{htmlelement("title")}} y un poco de CSS básico. El {{htmlelement("body")}} contiene los elementos{{htmlelement("canvas")}} y {{htmlelement("script")}}. Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento  {{htmlelement("canvas")}} tiene el id myCanvas para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <script> y </script>.

- -

El lienzo (canvas)

- -

Para que podamos visualizar los gráficos en el elemento {{htmlelement("canvas")}}, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <script>:

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

Aquí estamos guardando una referencia al elemento {{htmlelement("canvas")}} en la variable canvas. Después estamos creando la variable ctx para guardar el contexto de gráficos 2D, que es la herramienta  que realmente utilizaremos para dibujar.

- -

Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo index.html con un navegador para comprobar que funciona:

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

Todas las instrucciones están entre los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Estamos definiendo un rectángulo utilizando {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y  los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} guarda un color que utilizará el método {{domxref("CanvasRenderingContext2D.fill()","fill()")}} para pintar el cuadrado que, en nuestro caso, será rojo.

- -

Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

Como puedes ver, estamos utilizando otra vez los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. De lo que hay en medio, la parte más importante del código anterior es el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Tiene seis parámetros:

- - - -

La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función rgba(), o cualquiera de los otros métodos de descripción de color que existen.

- -

En lugar de utilizar {{domxref("CanvasRenderingContext2D.fill()","fill()")}} y rellenar las formas con colores, podemos utilizar {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función rgba(), que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.

- -

Compara tu código

- -

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

- -
-

Ejercicio: cambia el tamaño y el color de las figuras.

-
- -

Pasos siguientes

- -

Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (Mueve la bola).

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html deleted file mode 100644 index e6d950b834..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Detección de colisiones -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

- -
-

Este es el séptimo paso de los 10 del juego "Gamedev Canvas tutorial". Puedes encontrar el código como deberá quedar después de completar la leción en Gamedev-Canvas-workshop/lesson7.html.

-
- -

Ya tenemos los ladrillos en la pantalla pero el juego todavía no es muy interesante, porque la bola los atraviesa. Tenemos que pensar una manera de detectar colisiones para que la bola pueda rebotar en los ladrillos y romperlos.

- -

Nosotros decidimos cómo implementar esto, por supuesto, pero puede ser complicado calcular si la bola está tocando el rectángulo o no, porque no hay funciones del <canvas> que sirvan para saberlo. En este tutorial vamos a hacerlo de la manera más fácil que existe: comprobaremos si el centro de la bola está tocando (colisionando) con cualquiera de los ladrillos. No siempre funcionará a la perfección y hay formas de detectar colisiones más sofisticadas que funcionan mejor, pero no nos interesa verlas porque estamos aprendiendo y tenemos que hacer las cosas fáciles.

- -

Una función para detectar colisiones

- -

Para lograr nuestro objetivo vamos a definir una función que, con un bucle, recorrerá todos los ladrillos y comparará la posición de cada uno con la posición de la bola, cada vez que se dibuje un fotograma. Para que el código sea más legible definiremos la variable "b" que almacenará el objeto ladrillo en cada vuelta de bucle:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculations
-        }
-    }
-}
- -

Si el centro de la bola está dentro de las coordenadas de uno de nuestros ladrillos, cambiaremos la dirección de la bola. Se cumplirá que el centro de la bola está dentro de ladrillo si se cumplen al mismo tiempo estas cuatro condiciones:

- - - -

Traducimos esto a JavaScript:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

Añade lo anterior a tu código, debajo de la función keyUpHandler().

- -

Hacer que los ladrillos desaparezcan cuando reciben un golpe

- -

El código anterior funcionará correctamente y la bola cambiará de dirección. El problema es que los ladrillos siguen donde están. Tenemos que imaginar una forma de ocuparnos de los que ya hemos golpeado con la bola. Podemos hacerlo añadiendo un parámetro extra para indicar si queremos pintar cada ladrillo en la pantalla o no. En la parte del código donde inicializamos los ladrillos, añadiremos una propiedad status a cada ladrillo. Cambia tu código fijándote en la línea que está resaltada:

- -
var bricks = [];
-for(c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

A continuación consultaremos el "status" de cada ladrillo para saber si lo tenemos que dibujar o no. Si "status" vale 1, lo dibujaremos. Si vale 0, no lo dibujaremos porque habrá sido golpeado por la bola. Actualiza tu función drawBricks() para que quede así:

- -
function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

Actualizar el "status" en la función de detección de colisiones

- -

Ahora tenemos que ocuparnos del valor de "status" en la función collisionDetection(): si el ladrillo está activo (status 1) comprobaremos si hay colisión. Si hay colisión, pondremos el "status" de ese ladrillo a 0 para no volver a pintarlo. Actualiza collisionDetection() así:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

Activar la función de detección de colisiones

- -

Ya sólo falta llamar a la función collisionDetection() desde la función draw(). Añade la línea siguiente dentro de draw() function, justo después de la llamada a drawPaddle():

- -
collisionDetection();
-
- -

Compara tu código

- -

Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concretamente, miramos si la bola colisiona con cada ladrillo. ¡Ahora ya podemos romper ladrillos! :-

- -

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}

- -
-

Ejercicio: cambia el color de la bola cada vez que choque con un ladrillo.

-
- -

Pasos siguientes

- -

Definitivamente, lo estamos consiguiendo. ¡Adelanteeee! En el capítulo octavo nos ocuparemos de la Puntuación y fin del juego ganando.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html deleted file mode 100644 index d57ccef444..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Fin del juego -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego -tags: - - Canvas - - Fin del juego - - JavaScript - - Tutorial - - graficos -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

- -
-

Este es el quinto paso de 10 del Gamedev Canvas tutorial. Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

-
- -

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final. Sería bueno desde el punto de vista del juego poder perder. La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego.

- -

Implementar el final del juego

- -

Intentemos implementar el final del juego en nuestro juego. Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-}
- -

Hacer que la pala golpee la bola

- -

Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-    }
-}
- -

Si la bola toca el borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala. Si es así, entonces rebota como el jugador se imagina que va a ocurrir; si no, el juego ha terminado.

- -

Compara tu código

- -

Aquí tienes el código que funciona para que lo compares con el tuyo:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}

- -
-

Ejercicio: haz que la bola se mueva más rápida cuando golpea la pala.

-
- -

Siguientes pasos

- -

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. Pero todavía falta algo. Vamos a pasar al sexto capítulo, Construir el muro de ladrillos, y crear algunos ladrillos para que la bola los destruya.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html deleted file mode 100644 index 10ea794d5f..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Famoso juego 2D usando JavaScript puro -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro -tags: - - 2D Canvas JavaScript Tutorial - - Principiante Juegos -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
- -

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}}

- -

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 {{htmlelement("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 {{htmlelement("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.

- -

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. -
  2. Mueve la bola
    3. -
  3. Rebota en las paredes
    4. -
  4. Control de la pala y el teclado
    5. -
  5. Fin del juego
    6. -
  6. Construye el muro de ladrillos
    7. -
  7. Detección de colisiones
    8. -
  8. Cuenta los puntos y gana
    9. -
  9. Controles del ratón
    10. -
  10. Finalizando
    11. -
- -

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.

-
- -
-

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.

- -

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html deleted file mode 100644 index 60a5df8c5a..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Mueve la bola -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

- -
-

Este es el segundo paso de los 10 del tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson2.html.

-
- -

Ya sabes cómo dibujar una pelota, lo has aprendido en el artículo anterior. Ahora vamos a hacer que se mueva. Técnicamente, estaremos pintando la pelota en la pantalla, borrándola y luego pintándola de nuevo en una posición ligeramente diferente cada fotograma para dar la impresión de movimiento, igual que se hace en las películas.

- -

 

- -

Definir un bucle de dibujo

- -

 

- -

Para actualizar el dibujo del lienzo en cada fotograma, necesitamos definir una función de dibujo que se ejecutará una y otra vez, cambiando una serie de variables para modificar la posición de cada personaje (sprite). Para que una misma función se ejecute una y otra vez puedes utilizar una función de sincronización de JavaScript, como {{domxref("WindowTimers.setInterval()", "setInterval()")}} or {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

- -

Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, excepto las dos primeras líneas, y añade lo siguiente debajo de ellas. La función draw() se ejecutará dentro de setInterval cada 10 milisegundos:

- -
function draw() {
-    // código para dibujar
-}
-setInterval(draw, 10);
- -

Gracias a la naturaleza infinita de setInterval, la función draw () se llamará cada 10 milisegundos por siempre, o hasta que lo detengamos. Ahora, vamos a dibujar la bola. Agrega lo siguiente dentro de tu función draw ():

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

Prueba tu código actualizado ahora — la bola debería repintarse en cada fotograma (frame).

- -

Hacer que se mueva

- -
-
Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay movimiento, se dibuja una y otra vez en el mismo sitio.Vamos a cambiar eso. En primer lugar, en lugar de dibujar siempre en la posición (50, 50) definiremos un punto de inicio en la parte central inferior del lienzo en las variables llamadas x e y, a continuación, las utilizaremos para definir la posición en la que se dibuja el círculo.
-
-Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y:
-
- -

 

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

 

- -

A continuación actualiza la función draw() para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada:

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
- -

Ahora viene la parte importante: queremos añadir un valor pequeño a x e y después de que cada fotograma se haya dibujado para que parezca que la pelota se está moviendo. Definamos estos valores pequeños como dx y dy, y establezcamos sus valores en 2 y -2 respectivamente. Agrega lo siguiente debajo de sus definiciones de variables x e y:

- -
var dx = 2;
-var dy = -2;
-
- -

Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy en cada fotograma, de modo que la bola será pintada en la nueva posición en cada actualización. Agrega las dos nuevas líneas siguientes indicadas a continuación a la función draw ():

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
- -

Guarda el código de nuevo y pruébalo en tu navegador. Esto funciona bien, aunque parece que la bola está dejando un rastro detrás de ella:

- -

- -

Borrar el  lienzo antes de cada fotograma

- -
-
La bola está dejando un rastro porque estamos pintando un nuevo círculo en cada fotograma sin borrar el anterior. No te preocupes, porque hay un método para borrar todo el contenido de lienzo: {{domxref ("CanvasRenderingContext2D.clearRect ()", "clearRect ()")}}. Este método tiene cuatro parámetros: las coordenadas x e y de la esquina superior izquierda de un rectángulo y las coordenadas x e y de la esquina inferior derecha de un rectángulo. En todo el área definida por ese rectángulo se borrará cualquier cosa que se haya pintado antes.
-
- -
-
-
 
-
-
- -

Añade la siguiente nueva línea resaltada a la función draw():

- -
function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
-
- -

Guarda tu código y vuelve a probarlo. Esta vez verás el movimiento de la bola sin dejar rastro. Cada 10 milisegundos se borra todo el lienzo, se dibuja el círculo azul (nuestra pelota) en una posición determinada y los valores x e y se actualizan para el siguiente fotograma.

- -

Limpiar el código

- -

Vamos a añadir más y más comandos a la función draw () en los próximos artículos, por lo que es bueno mantenerlo lo más simple y limpio posible. Comencemos moviendo el código de dibujo de la bola a una función separada.
-
- Reemplaza la función draw() con las dos funciones siguientes:

- -
function drawBall() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBall();
-    x += dx;
-    y += dy;
-}
- -

Compara tu código

- -

Puedes comprobar el código terminado de este artículo en la demostración en vivo a continuación, y jugar con ella para entender mejor cómo funciona:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

- -
-

Ejercicio: intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.

-
- -

Siguientes pasos

- -

Hemos dibujado nuestra bola y hemos hecho que se mueva, pero cuando supera el borde del canvas, desaparece. En el tercer capítulo exploraremos como hacer que rebote en las paredes.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html deleted file mode 100644 index a3bd5e2c2e..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Terminando -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

- -
-

Este es el último de los 10 pasos del Gamedev Canvas tutorial. Puedes encontrar el código fuente tal y como quedará al terminar esta lección en Gamedev-Canvas-workshop/lesson10.html.

-
- -

Siempre es posible mejorar cualquier juego que hagamos. Por ejemplo, podemos dar vidas al jugador. Así, aunque pierda la bola una o dos veces, todavía puede intentar derribar todo el muro. También podemos mejorar los aspectos gráficos.

- -

Dar vidas al jugador

- -

Dar vidas es bastante sencillo. Primero, añade una variable para guardar el número de vidas que tiene en cada momento. Ponla después de las que ya tienes:

- -
var lives = 3;
- -

Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar el contador de puntos. Añade la función siguiente detrás de la función drawScore():

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

En lugar de terminar el juego inmediatamente, restaremos una vida hasta que ya no quede ninguna. También podemos colocar la bola y la paleta en la posición inicial cuando el jugador empiece con la vida siguiente. En la función draw() cambia las dos líneas siguientes...

- -
alert("GAME OVER");
-document.location.reload();
- -

... por estas otras:

- -
lives--;
-if(!lives) {
-    alert("GAME OVER");
-    document.location.reload();
-}
-else {
-    x = canvas.width/2;
-    y = canvas.height-30;
-    dx = 2;
-    dy = -2;
-    paddleX = (canvas.width-paddleWidth)/2;
-}
- -

Ahora, cuando la bola toca el fondo, restamos una vida. Si no queda ninguna, el jugador pierde y termina la partida. Si queda alguna, entonces colocamos la bola y la paleta en el centro, y hacemos que la bola vaya en la nueva dirección correcta y a la velocidad inicial.

- -

Sacar por pantalla el contador de vidas

- -

Tienes que añadir una llamada a drawLives() dentro de draw() debajo de la llamada a drawScore():

- -
drawLives();
-
- -

Mejorar el refresco con requestAnimationFrame()

- -

Ahora vamos a ocuparnos de algo que no es particular de este juego, sino de la forma en la que se muestran las imágenes en pantalla.

- -

{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} ayuda al navegador a refrescar la imagen mejor que con el método {{domxref("windowTimers.setInterval()", "setInterval()")}} que estamos utilizando. Cambia la línea siguiente...

- -
setInterval(draw, 10);
- -

...por esta otra:

- -
draw();
- -

Y, ahora, al final de la función draw(), justo antes de la llave que la cierra, añade la línea siguiente, que hará que la función draw() se llame a sí misma una y otra vez:

- -
requestAnimationFrame(draw);
- -

Ahora draw() se ejecuta una y otra vez con un bucle requestAnimationFrame() pero, en lugar de hacerlo cada 10 milisegundos, dejamos que sea el navegadro quien decida cada cuánto tiempo. El navegador sincronizará el refresco, es decir, el número de fotogramas por segundo, a lo que sea capaz la máquina que está ejecutando el juego. De este modo la animación será más eficiente y más suave que el viejo método setInterval().

- -

Compara tu código

- -

Ya hemos terminado. ¡La versión final del juego está lista para publicar!

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}

- -
-

Ejercicio: cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.

-
- -

Game over - de momento!

- -

Enhorabuena, has terminado todas las lecciones. Ya has aprendido las técnicas básicas de manipulación del <canvas> y la lógica que hay detrás de los juegos 2D sencillos.

- -

Ahora sería un buen momento para aprender a utilizar entornos de desarrollo (frameworks) y de continuar con el desarrollo de juegos. Puedes echar un vistazo a estas otra forma de realizar el mismo juego que has visto en 2D breakout game using Phaser, o de echar un vistazo al tutorial Cyber Orb built in Phaser. También puedes leer el contenido de Games section on MDN para inspirarte y seguir aprendiendo.

- -

También puedes volve al índice de este tutorial. ¡Diviértete programando!

- -

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html deleted file mode 100644 index b67a730e94..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Poner un contador y terminar ganando -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

- -
-

Este es el octavo capítulo de 10, del Gamedev Canvas tutorial. Puedes encontrar el código fuente como debería quedar tras este capítulo en Gamedev-Canvas-workshop/lesson8.html.

-
- -

Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.

- -

El contador

- -

Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:

- -
var score = 0;
- -

También necesitas una función drawScore() para enseñar el contador por pantalla. Añade esto después de la función collisionDetection():

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

Dibujar texto en el <canvas> es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método {{domxref("CanvasRenderingContext2D.font","font()")}} method. Despúes utilizas {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} para fijar el color y {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.

- -

Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

Llamando a drawScore() (dibujar contador) desde la función draw() hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en draw(), justo debajo de la llamada a drawPaddle():

- -
drawScore();
- -

Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos

- -

Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función collisionDetection():

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("YOU WIN, CONGRATULATIONS!");
-                        document.location.reload();
-                    }
-                }
-            }
-        }
-    }
-}
- -

Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función document.location.reload() vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().

- -

Compara tu código

- -

Puedes comparar tu código con este:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}

- -
-

Ejercicio: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.

-
- -

Pasos siguientes

- -

El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el Control del ratón.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html b/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html deleted file mode 100644 index 135193ec50..0000000000 --- a/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: >- - Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de - Orientación a Dispositivos -slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation -tags: - - API Vibración - - API orientacion de dispositivos - - Canvas - - Desarrollo de videojuegos - - HTML5 - - Phaser -translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation ---- -
{{GamesSidebar}}

{{ draft() }}

- -

Introducción

- -

En este tutorial iremos a través del proceso de construcción de un juego en HTML5 para móviles que utilizará las APIs de Orientación para Dispositivos y Vibración para mejorar la jugabilidad y estará construido utilizando el framework Phaser. Se recomienda tener conocimientos básicos de JavaScript para sacar mayor provecho a este tutorial.

- -

Ejemplo

- -

Al finalizar este tutorial tendrás un juego demo completamente funcional: Cyber Orb. Se verá más o menos así:

- -

- -

Phaser framework

- -

Phaser es un framework para construir juegos, de móvil o escritorio, en HTML5 . Es nuevo pero está creciendo velozmente gracias a la apasionada comunidad involucrada en el proceso de desarrollo. Puedes chequearlo en GitHub donde se encuentra como open source. Lee la documentación en línea y recorre su gran colección de ejemplos. El framework Phaser provee una serie de herramientas que acelerarán el desarrollo y te ayudaran a manejar las tareas genéricas necesarias para completar tu juego, para que así puedas concentrarte en la idea del juego en sí.

- -

Empezando con el proyecto

- -

Puedes ver el código fuente de Cyber Orb en GitHub. La estructura de carpetas no es nada complicada: el punto de partida es el archivo index.html donde inicializaremos el framework y configuraremos el canvas donde correrá el juego.

- -

- -

Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar el juego y probarlo. También hay tres carpetas en el directorio: 

- - - -

Configurando el canvas

- -

Vamos a renderizar nuestro juego sobre el elemento <canvas>, pero no lo haremos manualmente  — de esto se ocupará el framework.  Vamos a configurarlo: nuestro punto de partida es el archivo index.html con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado:

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Cyber Orb</title>
-    <style> body { margin: 0; background: #333; } </style>
-    <script src="src/phaser.min.js"></script>
-    <script src="src/Boot.js"></script>
-    <script src="src/Preloader.js"></script>
-    <script src="src/MainMenu.js"></script>
-    <script src="src/Game.js"></script>
-</head>
-<body>
-<script>
-(function() {
-    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
-    game.state.add('Boot', Ball.Boot);
-    game.state.add('Preloader', Ball.Preloader);
-    game.state.add('MainMenu', Ball.MainMenu);
-    game.state.add('Game', Ball.Game);
-    game.state.start('Boot');
-})();
-</script>
-</body>
-</html>
- -

Hasta ahora tenemos una simple página web HTML con el contenido básico en la sección <head>: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El <body> contiene la inicialización del framework Phaser y las definiciones del estado del juego.

- -
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
- -

La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del <canvas>, su altura, el método de renderizado (estamos utilizando CANVAS pero también existen disponibles las opciones WEBGL y AUTO) y el ID opcional del contenedor DOM en el que queremos poner el <canvas>. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el <canvas> será añadido a la etiqueta <body>. Sin el framework para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta <body>:

- -
<canvas id='game' width='320' height='480'></canvas>
- -

Es importante recordar que el framework está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.

- -
-

Nota: Puedes leer este artículo: "Building Monster Wants Candy" para una introducción en profundidad a las funciones y métodos específicos de Phaser.

-
- -

Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado Boot:

- -
game.state.add('Boot', Ball.Boot);
- -

El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo start está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente.

- -
 
- -

Gestionando los estados de juego

- -

Los estados en Phaser son partes separadas de la lógica del juego, en nuestro caso los estamos cargando de archivos JavaScript independientes para un mejor mantenimiento. En este juego tenemos estados básicos: Boot, Preloader, MainMenu, Howto y Game. Boot se hará cargo de la inicialización de algunas opciones de configuración, Preloader cargará todos los elementos utilizados como los gráficos y el audio, MainMenu es el menu con el botón de inicio, Howto muestra las intrucciones de cómo jugar y el estado Game es el que finalmente te permite jugar el juego. Veamos rapidamente el contenido de esos estados.

- -

Boot.js

- -

El estado Boot es el primero en el juego.

- -
var Ball = {
-    _WIDTH: 320,
-    _HEIGHT: 480
-};
-Ball.Boot = function(game) {};
-Ball.Boot.prototype = {
-    preload: function() {
-        this.load.image('preloaderBg', 'img/loading-bg.png');
-        this.load.image('preloaderBar', 'img/loading-bar.png');
-    },
-    create: function() {
-        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-        this.game.scale.pageAlignHorizontally = true;
-        this.game.scale.pageAlignVertically = true;
-        this.game.state.start('Preloader');
-    }
-};
- -

El objeto principal Ball es definido y estamos añadiendo dos variables llamadas _WIDTH y _HEIGHT esos seran el ancho y la altura del canvas de nuestro juego, respectivamente — nos ayudarán a posicionar los elementos en la pantalla. Estamos cargando dos imagenes primero que serán usadas después en el estado Preload para mostrar el progreso de la carga de los demás elementos. La función create contiene algunas de las configuraciones básicas: estamos configurando la escala y la alineación del canvas, y avanzando al estado Preload cuando todo este listo.

- -

Preloader.js

- -

El estado Preloader se ocupa de cargar todos los elementos:

- -
Ball.Preloader = function(game) {};
-Ball.Preloader.prototype = {
-    preload: function() {
-        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
-        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
-        this.load.setPreloadSprite(this.preloadBar);
-
-        this.load.image('ball', 'img/ball.png');
-        // ...
-        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
-        // ...
-        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
-    },
-    create: function() {
-        this.game.state.start('MainMenu');
-    }
-};
- -

Para crear un nuevo botón tenemos el método add.button con la siguiente lista de argumentos opcionales:

- - - -

El anchor.set colocará el punto de ancla en el botón con el cual se realizarán y aplicarán todos los cálculos de posición para el botón. En nuestro caso, está anclado a la mitad del borde izquierdo y al comienzo del borde superior, para así centrarlo de manera horizontal facilmente, sin necesidad de saber su ancho.

- -

Cuando el boton de inicio es presionado, en lugar de saltar directamente a la acción, el juego mostrará la pantalla con las intrucciones para jugar.

- -

Howto.js

- -
Ball.Howto = function(game) {
-};
-Ball.Howto.prototype = {
-    create: function() {
-        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
-    },
-    startGame: function() {
-        this.game.state.start('Game');
-    }
-};
- -

El estado Howto muesta las intrucciones de juego en la pantalla antes de comenzar el juego. Luego de clickear la pantalla el juego es lanzado.

- -

Game.js

- -

El estado Game del archivo Game.js es donde ocurre toda la magia. Todas las inicializaciones estan en la función create() (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función update() que es ejecutada en cada frame y actualiza cosas como la posición de la pelota.

- -
Ball.Game = function(game) {};
-Ball.Game.prototype = {
-    create: function() {},
-    initLevels: function() {},
-    showLevel: function(level) {},
-    updateCounter: function() {},
-    managePause: function() {},
-    manageAudio: function() {},
-    update: function() {},
-    wallCollision: function() {},
-    handleOrientation: function(e) {},
-    finishLevel: function() {}
-};
- -

Las funciones create y update son específicas del framework, mientras que otras seran nuestras propias creaciones:

- - - -

Agregando la pelota y sus mecanismos de movimiento

- -

Primero vamos a ir a la función create(), inicializamos el objeto ball y le asignamos unas cuantas propiedades:

- -
this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
-this.ball.anchor.set(0.5);
-this.physics.enable(this.ball, Phaser.Physics.ARCADE);
-this.ball.body.setSize(18, 18);
-this.ball.body.bounce.set(0.3, 0.3);
- -

Aqui estamos agregando un sprite en un lugar de la pantalla y utilizando la imagen de la pelota de los elementos gráficos ya cargados. También estamos configurando el anchor (ancla) que realizará los cálculos de física para el centro de la pelota, habilitando el motor de físicas Arcade (que manejara todas las físicas para el movimiento de la pelota), y estableciendo el tamaño del cuerpo para la detección de colisiones. La propiedad bounce es utilizada para configurar el 'rebote' de la pelota cuando golpea los obstaculos.

- -

Controlando la pelota

- -

Es genial tener lista la pelota para poder lanzarla en la zona del juego, pero también es importante poder realmente moverla! Ahora vamos a añadir la capacidad de controlar con el teclado la pelota en los dispositivos de escritorio, y luego pasaremos a la implementación de la API de Orientación de Dispositivo. Vamos a enfocarnos en el teclado primero añadiendo lo siguiente a la función create():

- -
this.keys = this.game.input.keyboard.createCursorKeys();
- -

Como puedes ver, hay una función especial de Phaser llamada createCursorKeys() que nos dará un objeto con controladores de evento para las cuatro teclas de flecha, que nos permitira jugar con: arriba, abajo, izquierda y derecha.

- -

A continuación añadiremos el siguiente código a la función update(), para que sea ejecutado en cada frame. El objeto this.keys será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida:

- -
if(this.keys.left.isDown) {
-    this.ball.body.velocity.x -= this.movementForce;
-}
-else if(this.keys.right.isDown) {
-    this.ball.body.velocity.x += this.movementForce;
-}
-if(this.keys.up.isDown) {
-    this.ball.body.velocity.y -= this.movementForce;
-}
-else if(this.keys.down.isDown) {
-    this.ball.body.velocity.y += this.movementForce;
-}
- -

De esa manera podemos verificar qué tecla es presionada en determinado frame y aplicar la fuerza definida a la pelota, así aumentar la velocidad en la dirección correcta.

- -

Implementando la API de Orientación del Dispositivo

- -

Probablemente la parte más interesante del juego es que utiliza la API de Orientación para Dispositivos móviles. Gracias a esto puedes jugar el juego inclinando el dispositivo en la dirección que quieres que la pelota ruede. Aquí está el código de la función create() responsable por esto:

- -
window.addEventListener("deviceorientation", this.handleOrientation, true);
- -

Vamos a añadir un detector de eventos al evento "deviceorientation" y vincularlo a la función handleOrientation, se ve como esto:

- -
handleOrientation: function(e) {
-    var x = e.gamma;
-    var y = e.beta;
-    Ball._player.body.velocity.x += x;
-    Ball._player.body.velocity.y += y;
-}
- -

Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la velocidad en la que se mueve es mayor.

- -

- -
-

Nota: Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee Keep it level: responding to device orientation changes.

-
- -

Añadiendo el agujero

- -

El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función create() de nuestro estado Game:

- -
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
-this.physics.enable(this.hole, Phaser.Physics.ARCADE);
-this.hole.anchor.set(0.5);
-this.hole.body.setSize(2, 2);
- -

La diferencia está en que el cuerpo del agujero se configura como inamovible por lo que no se moverá cuando acertamos con la pelota y tendrá calculada la detección de colisión (esto se tratará más adelante en este artículo).

- -

Construyendo el laberinto de bloques

- -

Para hacer más difícil el juego, y más interesante, añadiremos algunos obstaculos entre la pelota y la sálida. Podríamos usar un editor de niveles pero por motivo de este tutorial, vamos a crear algo nosotros mismos.

- -

Para contener el bloque de información usaremos un array con los datos de nivel: para cada bloque almacenaremos las posiciones abolutas izquierda y superior en pixeles (x e y) y el tipo de bloque: horizontal o vertical (t con el valor 'w' para el ancho, y 'h' para la altura). Luego, para cargar el nivel analizaremos los datos y mostraremos los bloques especificos para ese nivel. En la función initLevels tenemos:

- -
this.levelData = [
-    [
-        { x: 96, y: 224, t: 'w' }
-    ],
-    [
-        { x: 72, y: 320, t: 'w' },
-        { x: 200, y: 320, t: 'h' },
-        { x: 72, y: 150, t: 'w' }
-    ],
-    // ...
-];
- -

Todos los elementos del array contienen una colección de bloques con una posición x e y y un valor t para cada uno. Luego de levelData pero dentro de la función initLevels, añadiremos los bloques dentro de un array en el loop for usando algunos de los métodos específicos del framework:

- -
for(var i=0; i<this.maxLevels; i++) {
-    var newLevel = this.add.group();
-    newLevel.enableBody = true;
-    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
-    for(var e=0; e<this.levelData[i].length; e++) {
-        var item = this.levelData[i][e];
-        newLevel.create(item.x, item.y, 'element-'+item.t);
-    }
-    newLevel.setAll('body.immovable', true);
-    newLevel.visible = false;
-    this.levels.push(newLevel);
-}
- -

Primero, add.group() es usado para crear un nuevo grupo de items. Luego, el body tipe ARCADE se configura para permitir los cálculos de física. El método newLevel.create crea nuevos items en el grupo con posiciones superior e izquierda iniciales y su propia imagen. Si no quieres recorrer nuevamente la lista de elementos para agregar una propiedad a cada uno explicitamente, puedes usar setAll en un grupo para aplicarlo a todos los items en ese grupo.

- -

Los objetos son almacenados en el array this.levels, el cual es por defecto invisible. Para cargar niveles específicos, nos aseguramos de que los niveles previos esten escondidos, y mostramos el nivel actual:

- -
showLevel: function(level) {
-    var lvl = level | this.level;
-    if(this.levels[lvl-2]) {
-        this.levels[lvl-2].visible = false;
-    }
-    this.levels[lvl-1].visible = true;
-}
- -

Gracias a eso el juego da al jugador un reto: ahora tiene que rodar la pelota a través del área de juego y guiarla por el laberinto construido por bloques. Es solo un ejemplo de cargar los niveles, y solo hay 5 puramente para mostrar la idea, pero podés trabajar en expandirlo por tu cuenta.

- -

Detección de colisión

- -

Hasta este punto tenemos la pelota, que puede ser controlada por el jugador, el agujero que se tiene que alcanzar y los obstáculos que bloquean el camino. Sin embargo, hay un problema: nuestro juego todavía no tiene ninguna detección de colisiones, así que no sucede nada cuando la pelota golpea los bloques, sólo los atraviesa. Vamos a arreglarlo! La buena noticia es que el framework se ocupará de calcular la detección de colisones, nosotros sólo debemos especificar los objetos con los que colisionará en la función update():

- -
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
-this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
- -

Esto le dirá al framework que ejecute la función wallCollision cuando la pelota golpee cualquiera de las paredes. Podemos usar la función wallCollision para añadir cualquier funcionalidad que querramos, como por ejemplo agregar el sonido de rebote e implementar la API de Vibración.

- -

También debemos volver al objeto pelota y limitarlo a moverse sólo en la zona visible, para que no salga de la pantalla. Hay una función muy útil en Phaser que se llama collideWorldBounds:

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

Hace exactamente lo que necesitamos: ahora la pelota rebotará en los bordes de la pantalla como de las paredes.

- -

Añadiendo el sonido

- -

Entre los elementos precargados hay una pista de audio (en varios formatos para asegurar la compatibilidad con el navegador), que podremos usar ahora. Debe primero ser definida en la función create():

- -
this.bounceSound = this.game.add.audio('audio-bounce');
- -

Si el estado del audio es true (es decir que el sonido del juego está activado) podremos reproducirlo en la función wallCollision:

- -
if(this.audioStatus) {
-    this.bounceSound.play();
-}
- -

Eso es todo: cargar y reproducir sonidos es sencillo con Phaser.

- -

Implementando la API de Vibración

- -

Cuando la detección de colisión funcione como es esperado, añadamos algunos efectos especiales con la ayuda de la API de Vibración.

- -

La mejor forma de usarla en nuestro caso es haciendo que el teléfono vibre cada vez que la pelota golpee las paredes: dentro de la función wallCollision:

- -
if("vibrate" in window.navigator) {
-    window.navigator.vibrate(100);
-}
- -

Si el método vibrate es soportado por el navegador y está disponible en el objeto window.navigator, hará vibrar al telefono por 100 milisegundos. Eso es todo!

- -

Añadiendo el tiempo transcurrido

- -

Para mejorar la re-jugabilidad y dar a los jugadores la opción de competir entre ellos, almacenaremos el tiempo transcurrido: los jugadores entonces intentaran mejorar su tiempo de finalizacion. Para implementar esto en el juego tenemos que crear una variable para almacenar el número actual de segundos transcurrido desde el inicio del juego y mostrarselo al jugador durante el juego. Definamos primero las variables en la función create:

- -
this.timer = 0; // time elapsed in the current level
-this.totalTimer = 0; // time elapsed in the whole game
- -

Luego, podemos inicializar los objetos de texto necesarios para mostrar la información al usuario:

- -
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
-this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
- -

Estamos definiendo la posición superior e izquierda del texto, el contenido que se muestra y el estilo aplicado al texto. Lo hemos impreso en pantalla, pero sería bueno actualizar los valores cada segundo:

- -
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
- -

Este bucle, también en la función create, ejecutará la función updateCounter cada segundo desde el comienzo del juego, así podemos aplicar los cambios acordes. Así es como se ve la función updateCounter completa:

- -
updateCounter: function() {
-    this.timer++;
-    this.timerText.setText("Time: "+this.timer);
-    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
-},
- -

Como puedes ver estamos incrementando la variable this.timer y actualizando el contenido del objeto de texto con el valor actual en cada iteración, por lo que el jugador verá el tiempo transcurrido.

- -

Terminando el nivel y el juego

- -

La pelota está rodando en la pantalla, el temporizador funciona y tenemos el agujero al que tenemos que llegar. Vamos a configurar la posibilidad de finalizar el juego! La siguiente linea en la funcion update() añade un detector que se activa cuando la pelota llega al agujero.

- -
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
- -

Esto funciona de manera similar al método colide explicado anteriormente. Cuando la pelota se superpone con el agujero (en lugar de colisionar), la función finishLevel es ejecutada:

- -
finishLevel: function() {
-    if(this.level >= this.maxLevels) {
-        this.totalTimer += this.timer;
-        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
-        this.game.state.start('MainMenu');
-    }
-    else {
-        alert('Congratulations, level '+this.level+' completed!');
-        this.totalTimer += this.timer;
-        this.timer = 0;
-        this.level++;
-        this.timerText.setText("Time: "+this.timer);
-        this.totalTimeText.setText("Total time: "+this.totalTimer);
-        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
-        this.ball.body.x = this.ballStartPos.x;
-        this.ball.body.y = this.ballStartPos.y;
-        this.ball.body.velocity.x = 0;
-        this.ball.body.velocity.y = 0;
-        this.showLevel();
-    }
-},
- -

Si el nivel actual es igual al maximo número de niveles (5, en este caso), entonces el juego termina: recibiras un mensaje de felicitación junto con el numero de segundas transcurridos durante todo el juego, y un botoón para presionar que te llevará al menú principal.

- -

Si el nivel actual es menor que 5, todas las variables necesarias se reinician y el siguiente nivel es cargado.

- -

Ideas para nuevas características

- -

Esto no es más que una demostración funcional de un juego que podría tener un montón de características adicionales. Por ejemplo podemos añadir poderes para recoger en el camino que harán que nuestra pelota ruede más rápido, otro podría detener el temporizador durante unos segundos o dar la pelota poderes especiales para atravesar obstáculos. También hay espacio para los obstáculos y trampas que harán más lenta la pelota, acelerar el tiempo o trampas de la propia pelota. Puedes crear más niveles con dificultades diferentes para cada uno. Incluso puedes obtener logros, tablas de clasificación y medallas para diferentes acciones en el juego. Hay un sinfín de posibilidades: sólo dependen de tu imaginación.

- -

Resumen

- -

Espero que este tutorial te ayude a introducirte dentro del desarrollo de los juegos 2D y te inspire a crear asombrosos juegos por tu cuenta. Puedes jugar el demo de Cyber Orb y chequear su código fuente en GitHub.

- -

HTML5 nos da herramientas en bruto, los frameworks construidos sobre estas se están volviendo más rápidos y mejores, por lo que ahora es un gran momento para meterse en el desarrollo de juegos web. En este tutorial usamos Phaser, pero hay un gran número de otros frameworks que vale la pena considerar también, como ImpactJS, Construct 2 o PlayCanvas — depende de tus preferencias, habilidades de programación (o la falta de estas), el tamaño de tu proyecto, los requerimientos y otros aspectos. Deberías chequearlos todos y decidir cual es el que mejor se ajusta a tus necesidades.

diff --git a/files/es/games/workflows/index.html b/files/es/games/workflows/index.html deleted file mode 100644 index 3a0807cc77..0000000000 --- a/files/es/games/workflows/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Workflows for different game types -slug: Games/Workflows -tags: - - NeedsTranslation - - TopicStub -translation_of: Games/Tutorials ---- -
{{GamesSidebar}}

This page will contain links to different article series covering different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

-

For example, a 2D maze game with Phaser and the Device Orientation API.

-- cgit v1.2.3-54-g00ecf