Mr. Square en ReactJS - Tercera Parte
Tags: react, html, javascript, css
Published: 2020-08-08 00:58:16

---
title: Mr. Square en ReactJS - Tercera Parte
published: true
description: Artículos que muestran la experiencia de desarrollo de un juego en ReactJS
tags: reactjs, html5, javascript, css
//cover_image: https://direct_url_to_image.jpg
---

En la [primera parte](https://dev.to/jorger/mr-square-en-reactjs-primera-parte-49eo) de esta serie de artículos se habló acerca del juego Mr. Square, las reglas que lo rigen, así como las tecnologías que se utilizaron para su desarrollo.

En la [segunda parte](https://dev.to/jorger/mr-square-en-reactjs-segunda-parte-53kn) de compartí algunos de los retos de desarrollo de este juego.

En esta tercera y última parte compartiré algunas de las funcionalidades que tiene el juego.

**Enlace del juego:** https://mrsquare.herokuapp.com/

# Jugabilidad offline:

Gracias al uso de [workbox](https://developers.google.com/web/tools/workbox) que viene incluido en [CRA](https://create-react-app.dev/) el juego es posible jugarlo sin conexión a internet, con excepción de workshop, ya que los assets del juego son almacenados a nivel local, esto también ayuda a que la carga del juego sea rápida, debido a que no tiene que hacer la descarga de los assets cada vez que se ingresa al juego.

# Instalación del juego.

Gracias a que el juego es una [PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) el juego es posible ser "instalado", lo cual permite que el usuario pueda acceder a este directamente desde su pantalla, como si de una aplicación nativa se tratase.

En el caso de Android, Windows y MacOs, la "instalación" del juego es posible hacerla a través de navegadores basados en Chromium/webkit, como es el caso por ejemplo de Chrome y Edge.

En el caso de iOS, safari otorga la opción de "instalación" también, pero no soporta el denominado [manifest.json](https://web.dev/add-manifest/) el cual permite indicar el comportamiento que tendrá el juego una vez haya sido "instalado"

# Compartir.

{% twitter 1291892231570370562 %}

Esta es una funcionalidad que permite en navegadores que la soporta mostrar la función de [share nativa](https://web.dev/web-share/), esto otorgar una gran flexibilidad ya que el usuario podrá compartir sin la necesidad de acudir a otro servicio y utilizará la misma funcionalidad que utiliza en aplicaciones nativas.

En el caso que el navegador no soporte está acción, se redirigirá a Twitter directamente (no se desarrolló un fallback que permita otras redes sociales)

# Shortcuts.


[Shortcuts](https://web.dev/app-shortcuts/) como su nombre lo indica permite establecer acceso directos a opciones de la aplicación, en este caso a opciones del juego.

Al momento de escribir este artículo Shortcuts está disponible en Android a través de Google Chrome (o navegadores basados en Chromium).

{% twitter 1285994088802680833 %}

Igualmente en Windows.

{% twitter 1289280011724152832 %}

En el momento macOS no soporta esta funcionalidad y en iOS como se comentó anteriormente no es soportado el [manifest.json](https://web.dev/add-manifest/) que es donde se establece esta opción (como es bien sabido en iOS el único navegador que es permitido es safari, incluso navegadores como Chrome en iOS están basado en safari)

_________

Gracias por llegar a esta parte del artículo, en este intenté recopilar todo acerca del proyecto, ha sido un proyecto que busca aprender más sobre React y el ecosistema que éste tiene, así como aprovechar las nuevas funcionalidades que los navegadores nos entrega


# Conclusiones.

1. El desarrollo de este juego fue muy desafiante, no sólo por la parte gráfica, sino por las validaciones necesarias para el personaje.

2. El desarrollo de este juego no es exclusivo para ReactJS, otras librerías o frameworks podrían ser utilizadas, incluso librerías especializadas en el desarrollo de juegos, por ejemplo [PhaserJS](https://phaser.io/), en este caso no se hizo uso de [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), que en muchos casos es la mejor opción para el desarrollo de juegos de este tipo.

3. Esta experiencia de desarrollo de este juego, ha ayudado a tener un mejor conocimiento de ReactJS, las fortalezas que esta librería nos ofrece, en este caso para el desarrollo de un juego.

4. El desarrollo basado en componentes, ayuda en gran medida a una rápido desarrollo, en el caso de este juego se pudo evidenciar, una vez creados los componentes base, se facilitó la creación de los demás elementos que compone el juego.

5. Aprender una librería y/o tecnología a través de juegos presenta una gran oportunidad, ya que nos encontramos con casos que tal vez no veamos en otros tipos de proyectos.