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