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.   . 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. Puedes ver cómo queda y probarlo aquí  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   de Pokémon que proporcione todo eso. API  Por suerte para nosotros, hay una   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. PokeAPI  Cuando use API públicas gratuitas, siempre asegúrese de minimizar la cantidad de llamadas, ya que eso está creando algo de trabajo en el servidor por el que alguien está pagando.  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: "   ", "   " y "   ". 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,   . Después de eso, solo agregue enlaces a archivos CSS y JS dentro de las etiquetas de encabezado. index.html style.css action.js puede consultarlo aquí  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>  <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   donde comenté casi todas las líneas sobre lo que hace. Por eso no voy a explicar línea por línea aquí. mi archivo action.js  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   . Una vez que los datos se obtienen de la API y se guardan en una variable, el juego puede comenzar. función de búsqueda  El juego comienza con la función   . 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. getPokemon()  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   en la URL del sprite y configurando el brillo de la propiedad CSS en cero. img src  Después de que la aplicación no haga nada hasta que el usuario presione la tecla Enter. Debe agregar un   al campo de entrada que verificará si se presiona la tecla Intro y si se trata de una función, se llamará a   . detector de eventos checkGuess()  La función   simplemente aumenta o restablece el valor de la racha en función de la conjetura del usuario y llama a la función   .   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   y todo el proceso comenzará de nuevo. Y eso es todo. checkGuess() showPokemon() showPokemon() getPokemon()  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   , 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.  mi archivo CSS  Encontré una imagen de fondo que puedes   . También encontré una fuente que es muy similar a la fuente Pokémon. También puedes   . 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. ver y descargar aquí descargarlo desde mi repositorio  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   . 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. flexbox  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   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. regla @media  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   . También puedes seguirme allí para las nuevas publicaciones. Twitter  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   para que pueda mostrarlo en su cartera o en su CV. Simplemente siga   . implementar fácilmente este juego de forma gratuita esta sencilla guía  También publicado   . aquí

Amazon

Fetch

Mozilla

Twitter

YouTube

Free programming tutorials and project ideas

Writer

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps