Introduction  "Qui est ce Pokémon ?" devrait apporter des souvenirs à la plupart des gens. Si vous ne savez pas de quoi il s'agit alors je vous conseille d'aller chercher les aventures d'Ash Ketchum et de son ami Pokemon Pikachu.  Dans cet article, je vais vous montrer comment créer un simple jeu de devinettes Pokemon avec HTML, CSS et JavaScript. Le jeu est entièrement basé sur "Who's that Pokemon?" de la série animée Pokemon. Vous pouvez vous rappeler à quoi ça ressemble   . ici  C'est un jeu simple, il contient un peu moins de 70 lignes de code JavaScript.   . Je vais également vous apprendre comment vous pouvez le déployer gratuitement. Ce jeu est une idée de projet parfaite que vous pouvez améliorer et ajouter à votre portfolio. Vous pouvez voir à quoi ça ressemble et l'essayer ici  Je ne vais pas vous apprendre beaucoup de JavaScript dans cet article, vous pouvez l'apprendre à partir de nombreux tutoriels gratuits disponibles en ligne gratuitement. Cependant, j'enseignerai les étapes nécessaires pour créer un jeu comme celui-ci.  Comment commencer?  Imaginons que vous ayez cela comme devoir à l'école ou comme tâche dans votre travail. Quelqu'un vient de vous montrer une vidéo d'en haut et vous devez la recréer. Comment commenceriez-vous ?  Eh bien, la première chose que vous devez vérifier, ce sont les données dont vous avez besoin.  Dans ce cas, vous devez avoir une liste de sprites Pokemon avec le nom Pokemon pour chaque sprite. Vous obtenez généralement des données de ce type à partir de fichiers de base de données, CSV ou Excel. Une autre option consiste à vérifier s'il existe une   Pokemon qui fournit tout cela. API  Heureusement pour nous, il existe une   qui est gratuite et fournit tout ce dont nous avons besoin. Sur leur site Web, vous pouvez trouver la documentation de l'API et vous pouvez également tester l'API. Nous souhaitons effectuer un seul appel d'API au démarrage de l'application. Le résultat de cet appel, nous l'enregistrerions dans une variable et l'utiliserions pendant toute la durée. PokeAPI  Lorsque vous utilisez des API publiques gratuites, assurez-vous toujours de minimiser le nombre d'appels, car cela crée du travail sur le serveur pour lequel quelqu'un paie !  Venez avec une idée  Maintenant que vous savez que toutes les données nécessaires sont facilement disponibles, vous devez vérifier les fonctionnalités dont votre application a besoin. C'est ce qu'on appelle les exigences fonctionnelles. Vous les écrivez, puis vous commencez à mettre en œuvre ce que vous avez écrit. Ainsi, les exigences fonctionnelles pour cette application seraient :  obtenir toutes les données Pokemon de l'API  montrer l'ombre d'un sprite d'un Pokémon aléatoire  afficher la série actuelle de suppositions correctes du joueur  le joueur doit pouvoir deviner le nom du Pokémon en écrivant le nom dans le champ de saisie et en appuyant sur la touche Entrée  si le joueur a bien deviné, augmentez la séquence de un, sinon réinitialisez la séquence à zéro  après avoir fait une supposition, révélez ce qu'est Pokemon en montrant son sprite et en imprimant son nom  répéter toutes les étapes ci-dessus sauf la première étape  Vous pouvez également faire une liste des exigences non fonctionnelles :  trouver ou créer une image d'arrière-plan similaire à l'arrière-plan de l'anime  trouver une police similaire à la police Pokemon  ajouter du style CSS au formulaire de saisie  Mise en œuvre  Comme vous pouvez le voir, l'application est assez simple. Vous montrez l'ombre d'un sprite de Pokémon au hasard, laissez le joueur deviner, puis augmentez ou réinitialisez le compteur de séquences. Et pour la dernière étape, montrez le Pokémon et après cela, obtenez-en un nouveau.   Ouvrez votre éditeur de texte préféré. J'aime utiliser Visual Studio Code (VS Code). Créez trois fichiers - «   », «   » et «   ». Mettez les trois fichiers dans le même dossier. Ouvrez index.html et initialisez-le. Dans VS Code, vous pouvez le faire simplement en tapant ! puis en appuyant sur la touche de tabulation. Si vous n'utilisez pas VS Code et ne savez pas comment initialiser un fichier HTML, vous   . Après cela, ajoutez simplement des liens vers les fichiers CSS et JS à l'intérieur des balises head. index.html style.css action.js pouvez le vérifier ici  À l'intérieur des balises de corps, vous devez ajouter une balise d'image où les sprites seront affichés, un champ de saisie permettant à l'utilisateur de deviner et un champ d'étendue pour afficher la séquence de supposition correcte. Chacune de ces balises doit avoir une propriété id unique. Nous en avons fini avec HTML pour l'instant, voici à quoi cela devrait ressembler jusqu'à présent :   <!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>  Concentrons-nous maintenant sur le fichier action.js. Il y a toute la logique du jeu. Sur GitHub, vous pouvez consulter   où j'ai commenté presque chaque ligne sur ce qu'il fait. C'est pourquoi je ne vais pas expliquer ligne par ligne ici. mon fichier action.js  Comme vous pouvez le voir dans le fichier, PokeAPI avec une URL de base peut prendre des arguments supplémentaires "limit" et "offset". De cette façon, vous pouvez choisir quel Pokémon vous souhaitez obtenir dans la réponse de l'API et combien d'entre eux. J'ai mis le décalage à 0 et la limite à 150 pour que je n'obtienne toujours que des Pokémon de la première génération. Vous pouvez changer cela comme bon vous semble.   Comme vous pouvez le voir dans l'image ci-dessus - l'API renverra un tableau d'objets et chaque objet contient le nom et l'URL de Pokemon que vous pouvez ouvrir pour obtenir plus d'informations sur ce Pokemon. Les Pokémon sont triés par leur numéro PokeDex, mais à l'intérieur d'un tableau, leur nombre est réduit de un car le tableau commence à zéro. C'est le seul appel API que vous devez faire.  En JavaScript, vous pouvez appeler une API de plusieurs manières. J'ai utilisé la   . Une fois que les données sont extraites de l'API et enregistrées dans une variable, le jeu peut démarrer. fonction de récupération  Le jeu démarre avec la fonction   . Cette fonction est également utilisée pour générer un nouveau Pokémon chaque fois que l'utilisateur fait une supposition. Ainsi, au début de cette fonction, un nettoyage est nécessaire avant de générer de nouveaux Pokémon. getPokemon()  Générer un Pokémon est simple - obtenez un nombre aléatoire, obtenez le nom du Pokémon et le sprite avec ce numéro et enregistrez-le dans des variables. Après cela, affichez l'ombre de Pokemon en définissant la propriété   sur l'URL du sprite et en définissant la luminosité de la propriété CSS sur zéro. img src  Après cette application ne fait rien jusqu'à ce que l'utilisateur appuie sur la touche Entrée. Vous devez ajouter un   au champ de saisie qui vérifiera si la touche Entrée est enfoncée et s'il s'agit d'une fonction   sera appelée. écouteur d'événement checkGuess()  La fonction   augmente ou réinitialise simplement la valeur de série en fonction de la supposition de l'utilisateur et appelle la fonction   .   met à jour la valeur de séquence sur HTML, révèle le sprite de Pokemon et affiche le nom de Pokemon. Après 2 secondes, la fonction   sera appelée et tout le processus recommencera. Et c'est tout. checkGuess() showPokemon() showPokemon() getPokemon()  Coiffant  Ok, maintenant il est temps d'ajouter un peu de style à ce jeu pour qu'il ressemble à celui de la vidéo. Comme vous le savez déjà, CSS est utilisé pour le style. Vous pouvez vérifier   , il ne contient pas grand chose. Et je suis à peu près sûr que vous pouvez styliser cela bien mieux que moi. Après tout, je ne suis qu'un développeur backend.  mon fichier CSS  J'ai trouvé une image de fond que vous pouvez   . J'ai également trouvé une police très similaire à la police Pokemon. Vous pouvez également   . La définition de l'image d'arrière-plan est simple - dans le fichier CSS, vous devez ajouter la propriété 'background-image' à la balise body avec le chemin d'accès à l'image. voir et télécharger ici le télécharger depuis mon référentiel  Sprite est toujours affiché sur le côté gauche de l'écran, tandis que le texte et le nom Pokemon sont affichés sur le côté droit. Pour faire un tel effet qui ne sont que deux colonnes, vous pouvez utiliser   . Dans HTML, vous devez ajouter un div parent avec une classe "ligne" et à l'intérieur de ce div, vous devez ajouter deux divs avec une classe "colonne". flexbox  Le chargement d'une police personnalisée est également simple en CSS. Avec @font-face, vous définissez le nom de la police et le chemin d'accès à la police. Après cela, vous pouvez utiliser cette police avec son nom. Utilisez cette police pour styliser "Qui est ce Pokémon?" sur le côté droit de l'écran ainsi que le nom de Pokemon lorsqu'il est révélé.  Vous pouvez styliser le champ de saisie et la strie comme vous le souhaitez, j'ai juste ajouté des coins arrondis au champ de saisie et du texte aligné. J'ai aussi changé la taille. Vous pouvez vérifier ce que vous aimez ou vous pouvez utiliser ma valeur.  La dernière chose que vous devez ajouter est le style pour les appareils mobiles. Il est ajouté avec la   où vous définissez les nouvelles propriétés CSS si la fenêtre du navigateur mesure 500 pixels de large ou moins. Là, vous devez modifier le fait que les colonnes sont affichées sous forme de lignes, réduire la taille des polices et augmenter la largeur du champ de saisie. Et c'est tout pour le style. Comme je l'ai dit, vous pouvez le faire beaucoup mieux que moi, c'est le strict minimum requis pour que cela ressemble à la vidéo. règle @media  Prochaines étapes  Dans ce tutoriel, je vous ai montré comment implémenter le "Who's that Pokemon?" jeu avec HTML, CSS et JavaScript. Si vous êtes bloqué sur une partie, vous pouvez lire les commentaires dans le fichier action.js, ou me demander ici ou sur   . Vous pouvez également me suivre là-bas pour les nouveaux articles. Twitter  Pour la pratique, vous pouvez implémenter de nouvelles fonctionnalités pour améliorer ce jeu et le rendre unique. Par exemple:  ajouter des boutons sur lesquels les utilisateurs peuvent cliquer pour changer les générations de Pokémons à deviner  ajouter une fonction qui jouera une voix "Qui est ce Pokémon?" pour la première fois le jeu est chargé.  Créez une nouvelle variable qui affichera un score élevé.  Ajoutez une minuterie qui comptera à rebours entre l'obtention de nouveaux Pokémon  Il y a tellement d'idées que vous pouvez mettre en œuvre, de cette façon vous obtiendrez une nouvelle expérience et vous apprendrez de nouvelles choses.  Une fois que vous avez terminé, vous pouvez   afin de pouvoir le montrer dans votre portfolio ou dans votre CV. Suivez simplement   . facilement déployer ce jeu gratuitement ce guide simple  Également publié   . ici

Amazon

Fetch

Mozilla

Twitter

YouTube

Free programming tutorials and project ideas

Writer

Cet audio est produit dans la langue originale de l'histoire !

Recréez un jeu Pokemon simple avec 70 lignes de Javascript

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps