Recrea un juego de Pokémon simple con 70 líneas de Javascript

Introducción

"¿Quién es ese Pokémon?" debería traer recuerdos para la mayoría de la gente. Si no sabes de qué se trata, te aconsejo que busques las aventuras de Ash Ketchum y su amigo Pokémon Pikachu.

En esta publicación, te mostraré cómo crear un juego simple de adivinanzas de Pokémon con HTML, CSS y JavaScript. El juego se basa completamente en "¿Quién es ese Pokémon?" de la serie de anime Pokémon. Puede recordar cómo se ve aquí .

Es un juego simple, tiene poco menos de 70 líneas de código JavaScript. Puedes ver cómo queda y probarlo aquí . También te enseñaré cómo puedes implementarlo de forma gratuita. Este juego es una idea de proyecto perfecta que puedes mejorar y agregar a tu cartera.

No te enseñaré mucho JavaScript en esta publicación, puedes aprenderlo de muchos tutoriales gratuitos disponibles en línea de forma gratuita. Sin embargo, enseñaré qué pasos necesarios se necesitan para crear un juego como este.

¿Cómo empezar?

Imaginemos que tienes esto como una tarea en la escuela o como una tarea en tu trabajo. Alguien acaba de mostrarte un video desde arriba y necesitas recrearlo. ¿Cómo empezarías?

Bueno, lo primero que debe verificar es qué datos necesita tener.

En este caso, debe tener una lista de sprites de Pokémon junto con el nombre de Pokémon para cada objeto. Por lo general, obtiene datos como ese de alguna base de datos, CSV o archivos de Excel. Otra opción es verificar si hay alguna API de Pokémon que proporcione todo eso.

Por suerte para nosotros, hay una PokeAPI que es gratuita y proporciona todo lo que necesitamos. En su sitio web puede encontrar la documentación de la API y también puede probar la API. Queremos hacer solo una llamada a la API cuando se inicie la aplicación. El resultado de esa llamada lo guardaríamos en variable y lo usaríamos durante toda la duración.

Ven con una idea

Ahora, cuando sabe que tiene todos los datos necesarios fácilmente disponibles, debe verificar qué funciones debe tener su aplicación. Eso se llama requisitos funcionales. Los escribes y luego comienzas a implementar lo que has escrito. Entonces, los requisitos funcionales para esta aplicación serían:

• obtener todos los datos de Pokémon de la API
• mostrar la sombra de un sprite de un Pokémon aleatorio
• mostrar la racha actual de conjeturas correctas del jugador
• el jugador debe poder adivinar el nombre del Pokémon escribiendo el nombre en el campo de entrada y presionando la tecla Intro
• si el jugador acertó, aumente la racha en uno; de lo contrario, reinicie la racha a cero
• después de adivinar, revela qué Pokémon es mostrando su sprite e imprimiendo su nombre
• repita todos los pasos anteriores excepto el primer paso

También puede hacer una lista de requisitos no funcionales:

• encuentra o crea una imagen de fondo que sea similar al fondo del anime
• encontrar una fuente que sea similar a la fuente Pokemon
• agregue algo de estilo CSS al formulario de entrada

Implementación

Como puede ver, la aplicación es bastante simple. Muestras la sombra de sprite de un Pokémon aleatorio, dejas que el jugador adivine y luego aumentas o reinicias el contador de rachas. Y para el último paso, muestra el Pokémon y luego obtén uno nuevo.

Abre tu editor de texto favorito. Me gusta usar Visual Studio Code (VS Code). Cree tres archivos: " index.html ", " style.css " y " action.js ". Coloque los tres archivos en la misma carpeta. Abra index.html e inicialícelo. ¡En VS Code puedes hacerlo simplemente escribiendo! y luego presionando la tecla tab. Si no está utilizando VS Code y no sabe cómo inicializar un archivo HTML, puede consultarlo aquí . Después de eso, solo agregue enlaces a archivos CSS y JS dentro de las etiquetas de encabezado.

Dentro de las etiquetas del cuerpo, debe agregar una etiqueta de imagen donde se mostrarán los sprites, un campo de entrada para que el usuario haga una suposición y un campo de intervalo para mostrar la racha de suposición correcta. Cada una de esas etiquetas debe tener una propiedad de identificación única. Hemos terminado con HTML por ahora, así es como debería verse hasta ahora:

 <!DOCTYPE html> <html lang="en"> <head> <!--For implementation details visit marinsborg.com--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="action.js" defer></script> <link rel="stylesheet" href="style.css"> <title>Who's that Pokemon?</title> </head> <body> <img id="sprite"> <input type="text" placeholder="Who's that Pokemon?" id="guess"> <br> <span id="streak">Streak: 0</span> </body> </html>

Ahora centrémonos en el archivo action.js. Ahí está toda la lógica del juego. En GitHub, puede consultar mi archivo action.js donde comenté casi todas las líneas sobre lo que hace. Por eso no voy a explicar línea por línea aquí.

Como puede ver en el archivo, PokeAPI con una URL base puede tomar argumentos adicionales "límite" y "compensación". De esa manera, puede elegir qué Pokémon le gustaría obtener en respuesta API y cuántos de ellos. Configuré el desplazamiento en 0 y el límite en 150, por lo que siempre obtendría solo Pokémon de la primera generación. Puedes cambiar esto como quieras.

Como puede ver en la imagen de arriba, la API devolverá una serie de objetos y cada objeto contiene el nombre y la URL de Pokémon que puede abrir para obtener más información sobre ese Pokémon. Los Pokémon se ordenan por su número de PokeDex; sin embargo, dentro de una matriz, su número se reduce en uno porque la matriz comienza desde cero. Esta es la única llamada a la API que debe realizar.

En JavaScript, puede realizar una llamada a una API de varias formas. Utilicé la función de búsqueda . Una vez que los datos se obtienen de la API y se guardan en una variable, el juego puede comenzar.

El juego comienza con la función getPokemon() . Esa función también se usa para generar un nuevo Pokémon cada vez que el usuario adivina. Entonces, al comienzo de esa función, se requiere algo de limpieza antes de generar nuevos Pokémon.

Generar un Pokémon es simple: obtenga un número aleatorio, obtenga el nombre del Pokémon y el sprite con ese número y guárdelo en variables. Después de eso, muestre la sombra de Pokémon configurando la propiedad img src en la URL del sprite y configurando el brillo de la propiedad CSS en cero.

Después de que la aplicación no haga nada hasta que el usuario presione la tecla Enter. Debe agregar un detector de eventos al campo de entrada que verificará si se presiona la tecla Intro y si se trata de una función, se llamará a checkGuess() .

La función checkGuess() simplemente aumenta o restablece el valor de la racha en función de la conjetura del usuario y llama a la función showPokemon() . showPokemon() actualiza el valor de la racha en HTML, revela el sprite de Pokémon y muestra el nombre de Pokémon. Después de 2 segundos, se llamará a la función getPokemon() y todo el proceso comenzará de nuevo. Y eso es todo.

Estilismo

Ok, ahora es el momento de agregar algo de estilo a este juego para que se vea similar al del video. Como ya sabes, CSS se usa para diseñar. Puede consultar mi archivo CSS , no contiene mucho. Y estoy bastante seguro de que puedes diseñar esto mucho mejor que yo. Después de todo, solo soy un desarrollador backend.

Encontré una imagen de fondo que puedes ver y descargar aquí . También encontré una fuente que es muy similar a la fuente Pokémon. También puedes descargarlo desde mi repositorio . Establecer la imagen de fondo es fácil: dentro del archivo CSS, debe agregar la propiedad 'imagen de fondo' a la etiqueta del cuerpo con la ruta a la imagen.

Sprite siempre se muestra en el lado izquierdo de la pantalla, mientras que el texto y el nombre de Pokémon se muestran en el lado derecho. Para hacer tal efecto que son solo dos columnas, puede usar flexbox . Dentro de HTML, debe agregar un div principal con una "fila" de clase y dentro de ese div, debe agregar dos div con una "columna" de clase.

Cargar fuentes personalizadas también es simple en CSS. Con @font-face establece el nombre de la fuente y la ruta a la fuente. Después de eso, puedes usar esa fuente con su nombre. Usa esa fuente para diseñar "¿Quién es ese Pokémon?" en el lado derecho de la pantalla y también el nombre de Pokémon cuando se revela.

Puede diseñar el campo de entrada y la raya como desee, solo agregué esquinas redondeadas al campo de entrada y alineé el texto. También cambié el tamaño. Puedes marcar lo que te gusta o puedes usar mi valor.

Lo último que necesita agregar es el estilo para dispositivos móviles. Se agrega con la regla @media donde establece las nuevas propiedades CSS si la ventana del navegador tiene 500 px de ancho o menos. Allí debe cambiar que las columnas se muestren como filas, reducir el tamaño de las fuentes y aumentar el ancho del campo de entrada. Y eso es todo por el estilo. Como dije, puedes hacerlo mucho mejor que yo, esto es lo mínimo necesario para que se vea similar al video.

Próximos pasos

En este tutorial, te mostré cómo implementar "¿Quién es ese Pokémon?" juego con HTML, CSS y JavaScript. Si está atascado en alguna parte, puede leer los comentarios dentro del archivo action.js, o preguntarme aquí o en Twitter . También puedes seguirme allí para las nuevas publicaciones.

Para practicar, puedes implementar algunas características nuevas para mejorar este juego y hacerlo único. Por ejemplo:

• agregue botones en los que los usuarios pueden hacer clic para cambiar las generaciones de Pokémon para adivinar
• agregue una función que reproducirá una voz "¿Quién es ese Pokémon?" por primera vez se carga el juego.
• Cree una nueva variable que muestre una puntuación alta.
• Agregue un temporizador que hará una cuenta regresiva entre obtener nuevos Pokémon

Hay tantas ideas que puede implementar, de esa manera obtendrá una nueva experiencia y aprenderá cosas nuevas.

Una vez que haya terminado, puede implementar fácilmente este juego de forma gratuita para que pueda mostrarlo en su cartera o en su CV. Simplemente siga esta sencilla guía .

También publicado aquí .