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

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. Vous pouvez voir à quoi ça ressemble et l'essayer ici . 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.

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 API Pokemon qui fournit tout cela.

Heureusement pour nous, il existe une PokeAPI 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.

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 - « index.html », « style.css » et « action.js ». 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 pouvez le vérifier ici . Après cela, ajoutez simplement des liens vers les fichiers CSS et JS à l'intérieur des balises head.

À 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> <!--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>

Concentrons-nous maintenant sur le fichier action.js. Il y a toute la logique du jeu. Sur GitHub, vous pouvez consulter mon fichier action.js où j'ai commenté presque chaque ligne sur ce qu'il fait. C'est pourquoi je ne vais pas expliquer ligne par ligne ici.

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 fonction de récupération . Une fois que les données sont extraites de l'API et enregistrées dans une variable, le jeu peut démarrer.

Le jeu démarre avec la fonction getPokemon() . 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.

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é img src sur l'URL du sprite et en définissant la luminosité de la propriété CSS sur zéro.

Après cette application ne fait rien jusqu'à ce que l'utilisateur appuie sur la touche Entrée. Vous devez ajouter un écouteur d'événement au champ de saisie qui vérifiera si la touche Entrée est enfoncée et s'il s'agit d'une fonction checkGuess() sera appelée.

La fonction checkGuess() augmente ou réinitialise simplement la valeur de série en fonction de la supposition de l'utilisateur et appelle la fonction showPokemon() . showPokemon() 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 getPokemon() sera appelée et tout le processus recommencera. Et c'est tout.

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 mon fichier CSS , 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.

J'ai trouvé une image de fond que vous pouvez voir et télécharger ici . J'ai également trouvé une police très similaire à la police Pokemon. Vous pouvez également le télécharger depuis mon référentiel . 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.

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 flexbox . 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".

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 règle @media 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.

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 Twitter . Vous pouvez également me suivre là-bas pour les nouveaux articles.

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 facilement déployer ce jeu gratuitement afin de pouvoir le montrer dans votre portfolio ou dans votre CV. Suivez simplement ce guide simple .

Également publié ici .