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 !

Trop long; Pour lire

 Add passwordless user experiences to your app

HackerNoon Mobile

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

Trop long; Pour lire

Companies Mentioned

@marinsborg

HISTOIRES CONNEXES