Tutorial

Para entender que es create-react-app mira la documentación oficial.

1. Instalando create react app

Lo primero que haremos es crear nuestra aplicación a partir del template generado por create-react-app, para esto vamos a abrir nuestra terminal (en mac o una instancia de powershell en windows) y vamos crear nuestra aplicación de forma local, create react app se puede instalar de forma global, o simplemente usarse de forma local, para este caso, usaremos npx que nos permite instalar la aplicación de forma local, crearemos nuestro proyecto con el nombre: aliens.

npx create-react-app aliens

Una vez estamos en la carpeta, abrimos nuestro editor preferido, para este caso, usaremos visual studio code, abrimos nuestra carpeta generada, vamos a encontrar un arbol de archivos los cuales iremos modificando a medida que avancemos en el tutorial.

2. Instalando fuentes

Ve al archivo index.html que encontrarás en la carpeta public y antes de la etiqueta title pega este código:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

Con esto tendremos disponible una fuente "retro" para nuestro juego.

2.1 Instalando Anime JS

Para las animaciónes, bien podríamos usar unicamente CSS o incluso, el web animation API nativo de Javascript, pero para evitar enredarnos con implementaciones complejas, vamos a integrar la librería Anime Js, la cual nos permitirá implementar facilmente animaciones sobre los elementos del DOM. Para ello vamos a abrir nuestra terminal y a poner lo siguiente:

npm install animejs --save

2.2 GDD, o en otras palabras, lo que vamos a hacer

El GDD es el documento de diseño del videojuego, donde especificamos toda funcionalidad al detalle, esta sección será un resumen de lo que vamos a realizar, es muy importante siempre tener bien definido el proyecto antes de iniciar con el código.

Primero, vamos a analizar la siguiente imagen, la cual es un sketch del juego:

El juego se compone de lo siguiente:

1. Contador de aciertos, indicador en la parte superior izquierda.
2. Contador de vidas en el lado derecho, al perder las 4 vidas, perderemos el juego.
3. El usuario podrá destruir a los enemigos dando click sobre la nave correspondiente al carril por donde desciende el enemigo.
4. Si el enemigo llega a la parte inferior de la pantalla, perderemos una vida.
5. Cada 5 puntos realizads, el juego aumentará la velocidad.
6. La generación de los enemigos es de forma randomica, y descenderan desde la parte superior de la pantalla.
7. El objetivo del juego es hacer la mayor cantidad de puntos antes de perder las 4 vidas.