Share
Dans ce didacticiel en deux parties, vous apprendrez à utiliser JavaScript et HTML pour créer un jeu de correspondance de cartes basé sur l'API Flickr. Découvrez la démo et lisez la suite!
Pour pouvoir utiliser l'API Flickr, vous devez être un utilisateur enregistré sur flickr.com. Sur la page d'accueil de Flickr, cliquez sur le lien Inscription..
Une fois connecté, vous devrez vous rendre sur App Garden pour commencer..
Vous voudrez créer un signet pour cette page si vous envisagez de faire beaucoup de développement sur Flickr, car il contient de nombreuses informations utiles pour les développeurs..
Cliquez sur le lien "Créer une application" une fois que vous êtes arrivé au jardin des applications..
Sous "Obtenir votre clé API", cliquez sur le lien "Demander une clé API"..
Ici, vous devrez choisir si vous avez l'intention d'utiliser l'application à des fins commerciales ou non. Pour ce jeu j'ai choisi non commercial.
Ensuite, vous serez dirigé vers la page Détails de l'application. Entrez le nom de votre application et une description de ses activités, acceptez les accords et cliquez sur le bouton Soumettre..
Ensuite, votre clé et votre secret vous seront présentés. Nous n'utiliserons pas la clé secrète ici car notre application ne nécessite pas d'authentification. Notez votre clé API, car nous en aurons besoin pour la suite de ce didacticiel..
Flickr a une API REST pour les développeurs. Nous allons utiliser ces deux méthodes à partir de l'API:
le flickr.photos.search Cette méthode nous permettra de rechercher des photos, tandis que le flickr.photos.getInfo Cette méthode nous permettra d'obtenir des informations pour une seule photo, telles que le nom d'utilisateur (propriétaire) de la photo, le titre de la photo et l'URL de la page de la photo sur Flickr..
Si vous visitez l'un des liens ci-dessus, un lien vers l'API Explorer, en bas de la page, vous permet de saisir des données et d'obtenir un exemple de réponse..
L'image ci-dessus est pour le flickr.photos.search méthode. Allez-y et cliquez sur le lien maintenant.
Il y a beaucoup d'options, et cela peut sembler écrasant, mais tout ce qui nous intéresse pour ce tutoriel est l'option “balises”; J'ai entré «chien» dans la boîte de recherche des balises. Choisissez JSON comme méthode de sortie, car nous utiliserons JSON dans ce tutoriel..
Enfin, appuyez sur le bouton «Call Method» (Méthode d’appel). Un exemple de réponse vous sera renvoyé. Voici une partie du type de données que vous pouvez vous attendre à recevoir - les dernières lignes ont été coupées:
"photos": "page": 1, "pages": "49825", "par page": 100, "total": "4982408", "photo": ["id": "7338255166", "propriétaire ":" 45596890 @ N00 "," secret ":" 5f145a92b8 "," serveur ":" 7083 "," ferme ": 8," titre ":" Cute Rhea "," ispublic ": 1," isfriend ": 0 , "isfamily": 0, "id": "7338254718", "owner": "45596890 @ N00", "secret": "9e1da794a3", "serveur": "7223", "ferme": 8, " title ":" Rhea mastication "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338258850 "," propriétaire ":" 8672236 @ N04 "," secret ": "d0a5c4124c", "serveur": "8027", "ferme": 9, "titre": "", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": " 7338271122 "," owner ":" 49270434 @ N08 "," secret ":" 30876cfdf6 "," serveur ":" 7236 "," ferme ": 8," titre ":" 286 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338235972 "," owner ":" 8640124 @ N02 "," secret ":" a583d6aa48 "," serveur ":" 7085 "," ferme " : 8, "title": "Y: 4 Jour 123: Vent", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7330075254", "propriétaire": "32081016 @ N07", "secret": "04cb99 e8a7 "," serveur ":" 7239 "," ferme ": 8," titre ":" Chiens fous et Anglais… "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338229968 "," propriétaire ":" 67178219 @ N06 "," secret ":" 92b4be222a "," serveur ":" 7095 "," ferme ": 8," titre ":" Le petit chien dans la prairie "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338185610 "," owner ":" 7315798 @ N04 "," secret ":" 9a91bd1280 "," serveur ":" 7224 "," ferme ": 8," titre ":" snuggle "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338111264 "," propriétaire ":" 80044484 @ N06 "," secret ":" f795c559e3 "," serveur ":" 7214 "," ferme ": 8," titre ":" DSC_0408 "," ispublic ": 1," isfriend ": 0, "isfamily": 0, "id": "7338135744", "propriétaire": "80023312 @ N07", "secret": "d37c015be6", "serveur": "7234", "ferme": 8, "titre ":" 0007_Ridgeback "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338136008 "," propriétaire ":" 80023312 @ N07 "," secret ":" 259e50ebaa "," serveur ":" 7219 "," ferme ": 8," titre ":" 0003_Pug "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 73 38133290 "," propriétaire ":" 80044484 @ N06 "," secret ":" a2e954aab0 "," serveur ":" 7098 "," ferme ": 8," titre ":" _DSC0032 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338142010 "," owner ":" 80023312 @ N07 "," secret ":" 34809c804f "," serveur ":" 7071 "," ferme " : 8, "titre": "0009_WireFox", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7338014824", "propriétaire": "36700168 @ N04", " secret ":" 2625ab12a4 "," serveur ":" 8164 "," ferme ": 9," titre ":" chien Nosferatus "," ispublic ": 1," isfriend ": 0," isfamily ": 0, "id": "7338092614", "propriétaire": "80023312 @ N07", "secret": "ee7210e0f1", "serveur": "8010", "ferme": 9, "titre": "0002_GreatDane", " ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338120200 "," owner ":" 80023312 @ N07 "," secret ":" 38b5c49f4f "," serveur ":" 7245 "," ferme ": 8," titre ":" 0006_Cavalier "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338159814 "," propriétaire ":" 7315798 @ N04 "," secret ":" 327e97cb13 "," serveur ":" 7104 "," ferme ": 8," titre ":" amour de chiot "," ispublic ": 1," isfriend ": 0, "isfamily": 0,
Nous utiliserons les données de la réponse pour construire nos URLS vers les images. Les URL prennent cette forme:
http: // batterie id de batterie .static.flickr.com / id de serveur / id _ secret _ [mstzb] .jpg
Pour créer une URL utilisable, nous remplaçons simplement ce qui se trouve à l'intérieur du par les données que nous obtenons d'en haut. Par exemple, le premier élément de la photo tableau à l'intérieur du JSON ci-dessus est:
"id": "7338255166", "propriétaire": "45596890 @ N00", "secret": "5f145a92b8", "serveur": "7083", "ferme": 8, "titre": "Cute Rhea", "ispublic": 1, "isfriend": 0, "isfamily": 0
… Donc l'URL que nous devons construire est la suivante:
http://farm8.static.flickr.com/7083/7338255166_5f145a92b8_q.jpg
Le "q" indique la taille de l'image: 150x150px.
Ce lien mène à cette photo. Vous trouverez plus d'informations sur les URL dans la documentation Flickr pour les URL source de photos..
Le fichier source contient un fichier ZIP nommé "StartHere.zip" qui contient tous les fichiers conçus pour vous, prêts à ajouter du code. Vous pouvez parcourir ces fichiers pour obtenir une idée de la structure du projet. J'ai également inclus un "README.txt" qui explique la structure plus en détail.
Nous utilisons les bibliothèques JavaScript suivantes dans ce projet. Vous pouvez les télécharger séparément si vous le souhaitez.
Accentsconagua
document.ready () Dans le dossier "js", vous trouverez un nom de fichier JavaScript "flickrgame.js". Ajoutez le code suivant à ce fichier.
$ (document) .ready (function () alert ("Ready");); Si vous testez la page "index.html" maintenant, vous devriez voir une alerte avec le mot "Ready".
Ce code utilise jQuery .prêt() méthode, qui est déclenchée lorsque le DOM est complètement chargé. Il est important d'appeler cette méthode lors du codage de vos applications, car vous devez vous assurer que le DOM a été chargé avant d'essayer de le manipuler. Par exemple, si vous tentiez d'ajouter un gestionnaire d'événements click à un bouton avant que le DOM ne soit chargé et prêt, cela n'aurait aucun effet..
flickrGame Littéral d'objetNous allons utiliser un objet appelé flickrGame pour garder toutes nos variables propres et bien rangées et hors de l'espace de noms global.
Entrez le code suivant dans le champ $ (document) .ready () vous avez ajouté à l'étape ci-dessus en remplaçant l'alerte.
$ (document) .ready (function () var flickrGame = );
Dans le flickrGame littéral d'objet ajouter le code suivant. Remplacez "VOTRE CLÉ D'API" par la clé d'API que vous avez reçue lors de votre inscription..
$ (document) .ready (function () var flickrGame = APIKEY: "VOTRE CLÉ D'API");
doSearch () le doSearch () La méthode appellera l’API Flickr. Entrez ce qui suit sous le flickrGame définition littérale d'objet (mais toujours dans la $ document.ready () une fonction):
function doSearch () var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags = dog" searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages);
Ici, nous construisons notre requête étape par étape. Nous pointons le searchURL variable de la méthode flickr.photos.search de l'API Flickr.
Comme il s'agit d'une API REST, pour l'appeler, nous devons simplement construire une URL avec les paramètres requis. Donc, nous utilisons ici le flickr.photos.search méthode, et demande des images marquées "chien". Nous avons défini le format sur "json" et "jsoncallback =?", Ce qui permet à la fonction de rappel d'être exécutée dès que les données sont renvoyées..
En définissant le paramètre de licence tp 5,7 nous demandons à Flickr de ne nous donner que des images avec une licence Attribution-ShareAlike ou sans licence de copyright connue.
Nous utilisons ensuite la méthode $ .getJSON () de jQuery, en passant notre searchURL et une référence à la fonction de rappel setImages () que nous coderons ensuite.
setImages () Dans cette étape, nous allons coder le setImages () fonctionner et voir les résultats que nous recevons de Flickr. Entrez le code suivant sous le doSearch () fonction que vous avez ajoutée à l'étape ci-dessus.
fonction setImages (data) var tempString = ""; $ .each (data.photos.photo, fonction (i, élément) var imageURL = 'http: // ferme' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; tempString + = imageURL + "
";); $ (" # urls "). html (tempString);
Ici on initialise une variable tempString qui contiendra les URL que nous recevons de Flickr. Dans chaque objet, le paramètre Les données contient le code JSON renvoyé à l'appel de l'API Flickr, comme indiqué à l'étape 3 - nous pouvons donc voir que les objets photo individuels se trouvent dans data.photos.photo.
Nous pouvons utiliser la méthode $ .each () de jQuery pour parcourir en boucle chaque objet photo JSON renvoyé. Dans la boucle, nous construisons le URL de l'image, à nouveau comme indiqué à l'étape 3, puis ajoutez-le à tempString, et enfin sortie tempString à la div nommée "urls" en modifiant directement le code HTML de la div.
Le point ici est de voir quelles URL nous obtenons de notre appel à l’API Flickr. Si vous suivez avec le code source, j’ai ajouté un div avec id = "urls" afin que nous puissions voir cela dans la page Web. (Je vais l'enlever dans la prochaine étape.)
Enfin, pour le visualiser, nous devons appeler notre doSearch () une fonction. Ajoutez ceci juste en dessous de la setImages () une fonction.
doSearch ();
Vous pouvez le tester ici. Cela peut prendre une seconde ou deux avant de voir ces données, selon la vitesse de votre connexion. Vous trouverez ci-dessous les premières URL renvoyées, au cas où vous ne suivriez pas le code source..
http://farm9.static.flickr.com/8025/7183874333_9b8b43dfe1_q.jpg http://farm9.static.flickr.com/8003/7368215016_3c42485ee9_q.jpg http://farm6.static.flickr.com/5467/7177459173a7c7137f_f. jpg http://farm9.static.flickr.com/8002/7364322976_4f02a954ea_q.jpg http://farm9.static.flickr.com/8026/7177956063_6d92435602_q.jpg http://farm8.static.flickr.com/7226/7177956063_6d92435602_q.jpg .jpg
Nous allons stocker toutes les URL que nous recevons de Flickr dans un tableau, plutôt que de les assembler comme une seule chaîne. Ajouter ce qui suit au flickrGame objet.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: []
(Assurez-vous d’ajouter la virgule après le APIKEY: "VOTRE CLÉ D'API".)
Maintenant, ajoutez ce qui suit dans le setImages () une fonction. J'ai supprimé le code de l'étape précédente, car c'était uniquement à des fins de démonstration.
$ .each (data.photos.photo, fonction (i, élément) var imageURL = 'http: // ferme' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, photoid: item.id););
Ici on pousse le URL de l'image et ID de l'article sur la imageArray en utilisant les clés URL de l'image et photo d'identité respectivement. Nous avons besoin de URL de l'image pour construire nos images, et la photo d'identité sera utilisé pour identifier la photo en particulier. Nous devons également montrer une attribution aux photos que nous utilisons, et en ayant leur identifiant, nous pouvons associer l'utilisateur à la photo sur Flickr..
La nécessité de toutes ces données deviendra plus claire au fur et à mesure de la progression du didacticiel, alors ne vous inquiétez pas trop pour le moment..
infoLoaded () le infoLoaded () Cette fonction sera utilisée pour charger les informations des photos. Une fois toutes les informations de la photo chargées, infoLoaded () appellera une fonction nommée preloadImages () qui préchargera les images.
Une fois que toutes les images ont été préchargées, nous appelons drawImages (), qui place les images sur l'écran, et le jeu commence.
Ajouter ce qui suit sous le setImages () une fonction.
fonction infoLoaded (données)
le Les données paramètre tiendra le JSON de chaque photo particulière. Nous y reviendrons dans un moment. pour l'instant, nous allons simplement utiliser cette fonction pour appeler preloadImages () directement. Allez-y et ajoutez l'appel maintenant:
fonction infoLoaded (data) preloadImages ();
preloadImages () le preloadImages () Cette fonction sera utilisée pour créer et précharger les images pour le début du jeu et pour chaque niveau. Nous les préchargons afin qu'il n'y ait aucun délai entre le moment où nous montrons les images et celui où ils sont en cours de téléchargement..
Nous reviendrons sur le code de préchargement plus tard. Pour l'instant, nous allons simplement créer les 12 premières images pour le début du jeu. Nous avons besoin d’un nouveau tableau pour contenir ces 12 images, ajoutez donc ce qui suit à votre flickrGame objet:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: []
Assurez-vous d’ajouter une virgule après imageArray: [].
le tempImages tableau est utilisé pour contenir 12 images à la fois. Notre jeu utilise 12 images par niveau, et le imageArray peut contenir jusqu'à 36 images (selon le nombre défini dans notre recherche sur Flickr). Nous allons donc saisir 12 images du imageArray et les stocker dans tempImages.
Ajoutez le code suivant sous le infoLoaded () fonction que vous avez ajoutée à l'étape ci-dessus.
fonction preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pour (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage);
Ici nous utilisons la méthode javascript épissure() tirer 12 images de la imageArray, et placez-les dans le tempImages tableau. Nous utilisons ensuite un pour boucle pour créer 24 images.
Pour chacune de ces 24 images, nous créons un nouveau Image, mettre sa src Pour "cardFront.png" (une image visible avant que la carte ne soit retournée), créez une nouvelle propriété nommée imageSource qui contient l'URL de l'image réelle de Flickr à afficher, puis la pousse dans le tableau les images.
Nous devons ajouter les images à notre flickrGame objet, alors fais-le maintenant.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: []
Assurez-vous d’ajouter la virgule après tempImages [].
Laisse aller de l'avant et appelle le drawImages () fonctionner aussi bien; une fois que nous l'avons écrit, cela rendra les images à l'écran. Ajouter ce qui suit après le niché pour boucle dans le preloadImages () une fonction.
fonction preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pour (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
le drawImages () Cette fonction place les images à l’écran. Nous mélangeons d’abord les images dans le les images tableau en utilisant une fonction appelée randSort puis ajoutez-les à la #gamediv section du HTML.
Entrez le code suivant sous le flickrGame définition d'objet:
fonction randOrd () return (Math.round (Math.random ()) - 0,5);
Cette fonction est utilisée pour mélanger les images. Nous appellerons JavaScript Trier() méthode sur un tableau et passer randOrd comme paramètre. Cela fonctionne fondamentalement de la même manière que celle décrite dans "La méthode de tri" dans cet article..
Ajouter ce qui suit sous le preloadImages () fonction que vous avez ajoutée à l'étape ci-dessus:
fonction drawImages () flickrGame.theImages.sort (randOrd); pour (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); Nous appelons la méthode de tri sur les images, en passant dans notre randOrd fonction, puis boucle les images, ajouter chaque image à la #gamediv.
Nous utilisons la méthode jQuery .attr ajouter une classe de "carte" à chaque image. Pourquoi? Parce que lorsque nous terminons un niveau, nous retirons les cartes du #gamediv; cela nous donne un moyen de cibler uniquement les cartes et non tout images.
Voici des liens vers les méthodes attr () et appendTo () de jQuery afin que vous puissiez en apprendre davantage à leur sujet..
Nous devrions être prêts à afficher des cartes à l'écran à ce stade. Après le .chaque() appelle setImages appeler le infoLoaded () fonctionner et tester la page.
function setImages (data) $ .each (data.photos.photo, function (i, élément) var imageURL = 'http: // ferme' + élément.farm + '.static.flickr.com /' + élément. serveur + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, photoid: item.id);); infoLoaded ();
Si tout se passe bien, vous devriez voir 24 images avec le logo Flickr à l'écran. Cela peut prendre un moment avant leur diffusion, car nous appelons l'API Flickr et nous chargeons également les images..
Nous allons apporter un petit changement au code afin que nous puissions voir les images réelles pour l'instant. Modifier le preloadImages () fonction pour afficher l'image réelle à la place du "cardFront.png":
fonction preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pour (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = flickrGame.tempImages[i].imageUrl; //"cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
Testez le jeu maintenant.
le addListeners () fonction va ajouter un écouteur de clic à chacune des images qui appelle une fonction doFlip (), qui à son tour révélera l'image ci-dessous (si le logo est actuellement affiché).
Ajouter ce qui suit sous le drawImages () fonction que vous avez ajoutée à l'étape ci-dessus:
function addListeners () pour (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).on("click", function (e) doFlip(e); ); Nous ajoutons les auditeurs dans le drawImages () une fonction:
fonction drawImages () flickrGame.theImages.sort (randOrd); pour (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Nous avons également besoin d'un moyen de supprimer les écouteurs de clic des images. Ajouter ce qui suit sous le addListeners () fonction que vous avez ajoutée à l'étape ci-dessus.
function removeListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).off("click"); doFlip () le doFlip () La fonction est appelée lorsque l'utilisateur clique sur l'une des images. Il affiche les grandes images à gauche et à droite de la zone de jeu principale, puis appelle une fonction. checkForMatch () qui vérifie si les images correspondent.
Ajouter ce qui suit sous le removeListeners () fonction que vous avez ajoutée à l'étape ci-dessus.
fonction doFlip (e) var theCard = e.target; $ (theCard) .attr ("src", theCard.imageSource); if ($ ('# image1'). css ('backgroundImage') == "aucun") $ ('# image1'). css ('backgroundImage', 'url (' + theCard.imageSource + ')') ; else $ ('# image2'). css ('backgroundImage', 'url (' + theCard.imageSource + ')'); if (flickrGame.chosenCards.indexOf (theCard) == -1) flickrGame.chosenCards.push (theCard); $ (theCard) .off ("clic"); if (flickrGame.chosenCards.length == 2) removeListeners (); checkForMatch (); Nous obtenons d’abord une référence à la carte sur laquelle nous avons cliqué et définissons sa src attribuer à l'URL de l'image réelle (plutôt que le logo Flickr).
Nous vérifions ensuite si le fond CSS de la grande image à gauche (# image1) est égal à "aucun", et si c'est le cas, nous définissons l'image d'arrière-plan sur la même image que la carte sur laquelle nous avons cliqué. Si elle n’est pas égale à "aucun", cela signifie qu’une carte a été cliquée, nous définissons donc l’image de fond de la grande image sur le droite.
Nous vérifions que le cartes choisies Le tableau (que nous ajouterons dans un instant) ne contient pas déjà cette carte, pour pouvoir le garder en sécurité, puis le pousse sur le tableau. Nous supprimons également l'événement click de la carte afin qu'ils ne puissent plus cliquer dessus.
Si la cartes choisies longueur est égale à 2 cela signifie que l'utilisateur a choisi deux cartes, nous appelons donc removeListeners () pour supprimer l'événement de clic du reste des cartes et appeler le checkForMatch () fonction (que nous coderons à l’étape suivante) pour voir si les cartes sélectionnées correspondent.
Nous devons ajouter le cartes choisies tableau à notre flickrGame objet, alors fais ça maintenant:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: []
Assurez-vous d’ajouter une virgule après les images[].
checkForMatch () le checkForMatch () fonction vérifie si les deux cartes cliquées correspondent. Si c'est le cas, nous les "cachons"; s'ils ne le font pas, nous ajoutons les écouteurs aux cartes restantes et laissons le joueur jouer à nouveau.
Ajouter ce qui suit sous le doFlip () fonction que vous avez ajoutée à l'étape ci-dessus:
function checkForMatch () if (flickrGame.chosenCards.length == 2) if ($ ("# image1"). css ('image d'arrière-plan') == $ ("# image2"). css ('arrière-plan image ')) setTimeout (hideCards, 1000); else setTimeout (resetImages, 1000); Ici, nous vérifions si le cartes choisies longueur est égale à 2. Si c'est le cas, nous vérifions si les deux grandes images sont identiques en utilisant leur image de fond. (Nous aurions pu utiliser les images plus petites à la place; comme exercice, voyez si vous pouvez le faire.)
Si les images correspondent, nous utilisons setTimeout () appeler le hideCards () fonctionner après une seconde; sinon on appelle resetImages () après une seconde. En retardant ces appels de fonction, nous ajoutons une très brève pause au jeu..
Nous allons coder les fonctions pour cacher les cartes et réinitialiser les images.
hideCards () Si l'utilisateur a fait correspondre deux cartes, nous les masquons et ajoutons les écouteurs de clic au reste des cartes..
Ajoutez le code suivant sous le checkForMatch () fonction que vous avez créée à l'étape ci-dessus:
fonction hideCards () $ (flickrGame.chosenCards [0]). animate ('opacity': '0'); $ (flickrGame.chosenCards [1]). animate ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ ("# image1"). css ('image de fond', 'aucune'); $ ("# image2"). css ('image d'arrière-plan', 'aucune'); addListeners (); flickrGame.chosenCards = new Array (); Nous utilisons la méthode animate () de jQuery pour interpoler l'opacité des deux cartes à 0, ce qui les fait apparaître en fondu. Nous supprimons également les images du les images tableau, réinitialisez le fond des grandes images sur "aucune", rajoutez les écouteurs aux autres images et réinitialisez notre cartes choisies tableau.
Essayez ici.
resetImages () Cette fonction est exécutée si les deux images sélectionnées ne correspondent pas. Il réinitialise les petites images src attribue à "cardFront.png", définit l'arrière-plan des grandes images sur "aucune", ajoute les écouteurs aux cartes et réinitialise le cartes choisies tableau.
Ajouter ce qui suit sous le hideCards fonction que vous avez ajoutée à l'étape ci-dessus.
function resetImages () $ (flickrGame.chosenCards [0]). attr ("src", "cardFront.png"); $ (flickrGame.chosenCards [1]). attr ("src", "cardFront.png"); $ ("# image1"). css ('image de fond', 'aucune'); $ ("# image2"). css ('image d'arrière-plan', 'aucune'); addListeners (); flickrGame.chosenCards = new Array (); Vous pouvez réellement jouer au jeu maintenant, sauf que les images sont visibles. Pour changer cela, modifiez le preloadImages () fonctionne comme ceci:
fonction preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pour (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
(Il est bon de changer cela dans les deux sens pour faciliter les tests.)
Voici le résultat!
C'est la fin de la première partie de ce tutoriel. Jusqu'à présent, vous avez créé un jeu HTML5 fonctionnel. dans la prochaine partie, vous ajouterez du vernis, en apprenant à:
À plus tard!
