Share
Dans ce didacticiel, nous allons prendre un jeu par navigateur de base (que nous avons intégré dans un tutoriel Tuts + Premium), et ajouter des barres de progression, un préchargeur, un écran de démarrage et beaucoup plus raffiné..
Dans ce tutoriel Tuts + Premium, nous avons créé un jeu de correspondance de cartes de base avec JavaScript, dont les images proviennent de Flickr. Découvrez la démo:
Cliquez pour essayer le jeu tel qu'il est maintenant.
Dans ce didacticiel, nous allons peaufiner le jeu en mettant en oeuvre un pré-chargeur, une barre de progression, un écran de démarrage et une recherche par mot-clé. Regardez comment le jeu va se dérouler:
Cliquez pour essayer le jeu avec les améliorations que nous allons ajouter.
Dans ce didacticiel, vous apprendrez le code JavaScript et le code HTML nécessaires pour coder toutes ces améliorations. Téléchargez les fichiers source et extrayez le dossier appelé Commencer ici; cela contient tout le code de la fin du tutoriel Premium.
Dans flickrgame.js il y a une fonction appelée preloadImage (), qui contient cette ligne:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
À des fins de test, remplacez-le par:
tempImage.src = "cardFront.jpg";
Cela montrera les images sur les cartes tout le temps, ce qui rend les tests beaucoup plus faciles. Vous pouvez le changer à tout moment.
Maintenant, lisez la suite!
Accentsconagua
addKeyPress () À l'heure actuelle, nous avons le tag "chien" codé en dur, mais le jeu va devenir vite ennuyeux si nous forçons l'utilisateur à utiliser des photos de chien tout le temps!
La recherche a été belle, mais totalement non fonctionnelle tout ce temps. Réglons ça. Nous écouterons l’utilisateur pour qu’il appuie sur la touche Entrée, puis appeler le doSearch () méthode en utilisant tout ce qu'ils ont tapé pour appeler l'API Flickr.
Ajouter ce qui suit sous le resetImages () fonction, dans flickrgame.js.
fonction addKeyPress () $ (document) .on ("touche", fonction (e) if (e.CodeCode == 13) doSearch ();); Ici, nous écoutons pour une pression de touche et si le code clé est égal à 13, nous savons qu'ils ont appuyé sur la touche Entrée, nous appelons le doSearch () une fonction.
Nous devons modifier le doSearch fonction à utiliser le texte dans l'entrée, apportez les modifications suivantes:
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("pression au clavier"); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Ici, on vérifie d’abord que l’entrée n’est pas vide (on ne veut rien chercher), puis on enlève le appuyez sur la touche auditeur. Enfin, nous modifions la Mots clés utiliser la valeur de l'entrée.
La dernière chose à faire est de supprimer l'appel à doSearch () dans le fichier JS. Trouvez où nous appelons manuellement doSearch () et l'enlever. (C'est juste après le addKeyPress () une fonction.)
N'oubliez pas d'appeler le addKeyPress () une fonction. Je l'ai appelé juste en dessous de l'endroit où je l'ai déclaré.
fonction addKeyPress () $ (document) .on ("touche", fonction (e) if (e.CodeCode == 13) doSearch ();); addKeyPress (); Maintenant, si vous testez le jeu, vous ne verrez aucune image avant d'effectuer une recherche..
Lorsque nous faisons notre premier appel à l'API de Flickr, il y a un léger retard. Nous montrerons un GIF animé (un "throbber") pendant que nous contacterons le serveur et le retirerons au retour de l'appel..
Ajouter ce qui suit au doSearch () une fonction.
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("pression au clavier"); $ ("# infoprogress"). css ('visibilité': 'visible'); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Cela définit le #infoprogress div pour être visible. Une fois l'information reçue de Flickr, nous la cacherons. Pour ce faire, ajoutez le code suivant à la setImages () une fonction:
fonction setImages (data) $ ("# infoprogress"). css ('accessibility': 'hidden'); $ .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);); infoLoaded (); Si vous testez le jeu maintenant, vous devriez voir apparaître l'image du chargeur lorsque vous contactez l'API Flickr..
Nous devons obtenir les informations pour chaque photo que nous utilisons. Nous appellerons le méthode = flickr.photos.getInfo sur chaque photo, puis appelez le infoLoaded () fonctionner à chaque fois que l'information est chargée. Une fois l'information pour chaque la photo a chargé, le jeu continue comme avant.
Il y a beaucoup de nouvelles informations à prendre ici, nous allons donc les décomposer étape par étape. Tout d’abord, ajoutez ce qui suit au setImages () une fonction:
fonction setImages (data) $ ("# infoprogress"). css ('accessibility': 'hidden'); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibilité': 'masqué'); $ .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); var getPhotoInfoURL = "http: // api .flickr.com / services / rest /? method = flickr.photos.getInfo "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; "; getPhotoInfoURL + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); else alert ("PAS ASSEZ D'IMAGES ONT ÉTÉ RETOURNÉES"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Maintenant que nous obtenons les tags de l'utilisateur, nous devons nous assurer que suffisamment d'images ont été renvoyées pour constituer un seul jeu (12). Si c'est le cas, nous masquons l'entrée afin que le joueur ne puisse plus effectuer de recherche en cours de partie. Nous définissons une variable getPhotoInfoURL et utiliser le méthode = flickr.photos.getInfo - remarquez que nous utilisons le ID de l'article pour le photo d'identité. Nous utilisons ensuite le jQuery getJSON méthode et appel infoLoaded.
Si le nombre d'images renvoyées est insuffisant, nous lançons une alerte et appelons addKeyPress () afin que l'utilisateur puisse faire une autre recherche.
Nous avons donc besoin de savoir combien d'images ont été renvoyées de l'appel à l'API Flickr, et nous les stockons dans la variable nombrePhotosRetour, que nous ajoutons à notre flickrGame objet:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0
(Assurez-vous d’ajouter une virgule après selectedCards: [].)
Nous ne pouvons pas tester pour l'instant; si nous faisions nous appellerions preloadImages () 36 fois de suite puisque c'est tout notre infoLoaded () la fonction fait pour le moment. Certainement pas ce que nous voulons. Dans la prochaine étape, nous allons préciser le infoLoaded () une fonction.
infoLoaded () le infoLoaded () fonction reçoit des informations sur une seule photo. Il ajoute les informations à la imageArray pour la photo appropriée et enregistre le nombre d'informations de photos chargées; si ce nombre est égal à nombrePhotosRetour, il appelle preloadImages ().
Supprimer l'appel à preloadImages () et mettre ce qui suit à l'intérieur du infoLoaded () une fonction:
flickrGame.imageNum + = 1; var index = 0; pour (var i = 0; i < flickrGame.imageArray.length; i++) if (flickrGame.imageArray[i].photoid == data.photo.id) index = i; flickrGame.imageArray[index].username = data.photo.owner.username; flickrGame.imageArray[index].photoURL = data.photo.urls.url[0]._content; if (flickrGame.imageNum == flickrGame.numberPhotosReturned) preloadImages();
Ici on incrémente le imageNum variable et définir une variable indice égal à 0. Dans la boucle for, nous vérifions si le photo d'identité dans le imageArray est égal à la data.photo.id (se souvenir du Les données est une représentation JSON de l’image en cours de traitement). Si elles correspondent, nous définissons indice égal à je et mettre à jour l'index approprié dans le imageArray avec un Nom d'utilisateur et photoURL variable. Nous aurons besoin de cette information lorsque nous montrerons les attributions d'images plus tard.
Cela peut sembler un peu déroutant, mais tout ce que nous faisons est de faire correspondre les photos. Comme nous ne connaissons pas l’ordre dans lequel ils seront renvoyés par le serveur, nous nous assurons que leur identifiant correspond, puis nous pouvons ajouter le Nom d'utilisateur et photoURL variables à la photo.
Enfin, nous vérifions si imageNum est égal à la nombrePhotosRetour, et si c'est alors toutes les images ont été traitées afin que nous appelions preloadImages ().
N'oubliez pas d'ajouter le imageNum au flickrGame objet.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0
(Assurez-vous d’ajouter une virgule après le nombrePhotosRetournées: 0.)
Si vous testez maintenant, il vous faudra un peu plus de temps pour voir les photos. En plus d'appeler l'API Flickr pour récupérer les photos, nous obtenons maintenant des informations sur chacune d'entre elles..
Dans cette étape, nous aurons la barre de progression montrant lorsque nous chargeons les informations de la photo.
Ajoutez le code suivant au setImages () une fonction:
fonction setImages (data) $ ("# infoprogress"). css ('accessibility': 'hidden'); $ ("# progressdiv"). css ('visibilité': 'visible'); $ ("# progressdiv p"). text ("Chargement des informations sur la photo"); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibilité': 'masqué'); $ .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); var getPhotoInfoURL = "http: // api .flickr.com / services / rest /? method = flickr.photos.getInfo "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; getPhotoInfoURL + =" & format = json "; getPhotoInfoURL + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); else $ ("# progressdiv"). css ('visibilité': 'caché'); alert ("PAS ASSEZ D'IMAGES ONT ÉTÉ RETOURNÉES"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Cela montre la #progressdiv et modifie le texte du paragraphe dans le #progressdiv à lire "Chargement des informations sur la photo". Si pas assez d'images ont été retournées nous cachons le #progressdiv.
Ensuite, ajoutez ce qui suit au infoLoaded () une fonction:
fonction infoLoaded (données) flickrGame.imageNum + = 1; var pourcentage = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ ("# barre de progression"). barre de progression (valeur: pourcentage); var index = 0; pour (var i = 0; i < flickrGame.imageArray.length; i++) if (flickrGame.imageArray[i].photoid == data.photo.id) index = i flickrGame.imageArray[index].username = data.photo.owner.username; flickrGame.imageArray[index].photoURL = data.photo.urls.url[0]._content; if (flickrGame.imageNum == flickrGame.numberPhotosReturned) preloadImages(); Ici nous définissons une variable pourcentage égal à Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); cela garantit que nous obtenons un nombre compris entre 0 et 100. Nous appelons ensuite $ ("# progressbar"). progressbar () et mettre le valeur propriété égale à pourcentage.
Maintenant, si vous testez le jeu, il devrait fonctionner comme avant, mais avec une barre de progression. Eh bien, il y a un problème: la barre de progression reste visible une fois les images dessinées. Dans le jeu, nous commençons par charger les informations sur la photo, puis nous préchargons les images et nous utilisons tous les deux la barre de progression. Nous allons résoudre ce problème dans la prochaine étape.
Dans cette étape, nous utiliserons le plugin jQuery.imgpreload (il est déjà dans le téléchargement du code source). Dès que toutes les informations de fichier des étapes ci-dessus ont été chargées, la barre de progression se réinitialise et surveille le chargement des images..
Ajouter ce qui suit au 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); $("#progressdiv").css( 'visibility': 'visible' ); $("#progressdiv p").text("Loading Images"); var tempImageArray = []; for (var i = 0; i < flickrGame.tempImages.length; i++) tempImageArray.push(flickrGame.tempImages[i].imageUrl); $.imgpreload(tempImageArray, each: function () if ($(this).data('loaded')) flickrGame.numImagesLoaded++; var percentage = Math.floor(flickrGame.numImagesLoaded / flickrGame.totalImages * 100); $("#progressbar").progressbar( value: percentage ); , all: function () $("#progressdiv").css( 'visibility': 'hidden' ); drawImages(); ); Ici nous définissons le #progressdiv pour être visible et modifier le paragraphe pour lire "Chargement des images". Nous configurons un tableau temporaire et y ajoutons les URL des images temporaires, puis passons le tableau entier à $ .imgpreload pour lancer la précharge.
le chaque La fonction est exécutée à chaque fois qu'une photo est préchargée, et le tout La fonction est exécutée lorsque toutes les images ont été préchargées. À l'intérieur chaque() nous vérifions que l'image a bien été chargée, incrémentons la numImagesLoaded variable, et utilisez la même méthode que précédemment pour le pourcentage et la barre de progression. (Le totalImages est 12 depuis que nous utilisons combien par jeu.)
Une fois que toutes les images ont été préchargées (c’est-à-dire tout() est exécuté) nous avons mis le #progessdiv cacher et appeler le drawImages () une fonction.
Nous devons ajouter le numImagesLoaded et totalImages variables à notre flickrGame objet:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numNimages: 0, numImagesLoaded: 0, totales: 12]
(Assurez-vous d’ajouter la virgule après imageNum.)
Si vous testez le jeu maintenant, vous devriez voir la barre de progression pour les informations sur la photo et pour le préchargement des images..
Pour se conformer aux conditions d'utilisation de l'API Flickr, nous devons indiquer les attributions des images que nous utilisons. (Il est également poli de le faire.)
Ajoutez le code suivant dans le hideCards () une fonction:
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'); if (flickrGame.theImages.length == 0) $ ("# gamediv img.card"). remove (); $ ("# gamediv"). css ('visibilité': 'caché'); showAttributions (); addListeners (); flickrGame.chosenCards = new Array (); Ici, nous vérifions si le nombre d'images restantes est égal à zéro et, le cas échéant, nous savons que l'utilisateur a fait correspondre toutes les cartes. Nous retirons donc toutes les cartes du DOM et définissons le #gamediv être caché. Ensuite, nous appelons le showAttributions () fonction que nous coderons ensuite.
Dans cette étape, nous allons coder le showAttributions () une fonction.
Ajouter ce qui suit sous le checkForMatch () fonction que vous avez codée dans les étapes ci-dessus:
function showAttributions () $ ("# attributionsdiv"). css ('visibilité': 'visible'); $ ("# attributionsdiv div"). each (fonction (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). next (). html ( 'Nom d'utilisateur: '+ flickrGame.tempImages [index] .username +'
'+' Voir photo '); ); Ici nous définissons le #attributionsdiv pour être visible, puis passez en revue chaque div en son sein. Il y a 12 divs, chacun avec une image et un paragraphe; nous utilisons jQuery trouver() méthode pour trouver le img dans le div, définissez le src de l'image à la bonne URL de l'image, et utiliser jQuery suivant() méthode pour définir le Nom d'utilisateur et photoURL aux infos de Flickr.
Voici des liens vers les méthodes find () et next () de jQuery afin que vous puissiez en apprendre davantage à leur sujet..
Si vous testez le jeu maintenant et jouez à travers un niveau, vous verrez les attributions avec un lien vers l'image sur Flickr. Vous verrez également deux boutons: un pour le niveau suivant et un pour un nouveau jeu. Nous allons faire fonctionner ces boutons dans les prochaines étapes.
Dans notre appel à l'API Flickr, nous avons défini par page à 36, pour demander que plusieurs images à la fois. Comme nous utilisons 12 images par jeu, cela signifie qu'il peut y avoir jusqu'à trois niveaux. Dans cette étape, nous allons faire fonctionner le bouton Next Level.
Ajoutez le code suivant dans le setImages () une fonction:
function setImages (data) //… snip… flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
Nous devons savoir combien de niveaux le jeu aura. Cela dépend du nombre d'images renvoyées par notre recherche. Ce ne sera pas toujours 36. Par exemple, j'ai cherché "hmmmm" et il a renvoyé environ 21 photos à la fois. Nous allons utiliser Math.floor () pour arrondir le nombre - nous ne voulons pas de 2.456787 niveaux, après tout, et cela jetterait la logique du jeu.
Assurez-vous d'ajouter le numberLevels variable à la flickrGame objet:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totales, 12
(N'oubliez pas d'ajouter la virgule après totalImages: 12.)
Maintenant, modifiez le drawImages () fonctionner comme suit:
fonction drawImages () flickrGame.currentLevel + = 1; $ ("# leveldiv"). css ('visibilité': 'visible'). html ("Niveau" + flickrGame.currentLevel + "de" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); pour (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Ici on incrémente le niveau actuel variable, définissez le #leveldiv pour être visible et définir le code HTML de la div pour lire quel niveau nous sommes et combien de niveaux il y a.
Encore une fois, nous devons ajouter le niveau actuel variable à notre flickrGame objet.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, total,: currentLevel: 0
(Je suis sûr que vous n'avez pas besoin de le rappeler maintenant, mais assurez-vous d'ajouter la virgule après nombreNiveaux: 0.)
Maintenant, modifiez le showAttributions () fonction à la suivante:
function showAttributions () $ ("# leveldiv"). css ('accessibility': 'hidden'); $ ("# attributionsdiv"). css ('visibilité': 'visible'); if (flickrGame.currentLevel == flickrGame.numberLevels) $ ("# nextlevel_btn"). css ('visibilité': 'masqué'); else $ ("# nextlevel_btn"). css ('visibilité': 'visible'); $ ("# attributionsdiv div"). each (fonction (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl); $ (this). find ('p'). html ('Nom d'utilisateur: '+ flickrGame.tempImages [index] .username +'
'+' Voir photo '); ); Nous cachons le #leveldiv en fixant sa visibilité à caché.
Ensuite, nous vérifions si le niveau actuel est égal à la numberLevels. S'ils sont égaux, il n'y a plus de niveaux disponibles, donc nous cachons les #nextlevel_btn; sinon, on le montre.
Enfin, nous devons câbler le #nextlevel_btn. Ajoutez le code suivant sous le addKeyPress () fonction que vous avez créée à l'étape ci-dessus:
$ ("# nextlevel_btn"). sur ("clic", fonction (e) $ (this) .css ('visibilité': 'caché'); $ ("# gamediv"). css ('visibilité ':' visible '); $ ("# attributionsdiv"). css (' visibilité ':' caché '); flickrGame.numImagesLoaded = 0; preloadImages ();); Ici nous cachons le bouton, révélons le #gamediv, Cache le #attributionsdiv, réinitialiser le numImagesLoaded variable et appel preloadImages () qui saisit les 12 prochaines images.
Vous pouvez tester le jeu maintenant et devriez être capable de jouer à travers tous les niveaux. Nous allons câbler le #newgame_btn dans les prochaines étapes.
Vous pouvez commencer une nouvelle partie à tout moment, mais après tous les niveaux, c'est la seule option. Dans cette étape, nous allons câbler le #newgame_btn.
Ajoutez ce qui suit sous le code de la #nextlevel_btn vous avez ajouté à l'étape ci-dessus:
$ ("# newgame_btn"). sur ("click", fonction (e) $ ("# gamediv"). css ('visibilité': 'visible'); $ ("# leveldiv"). css ( 'visibilité': 'masqué'); $ ("# attributionsdiv"). css ('visibilité': 'masqué'); $ ("# searchdiv"). css ('visibilité': 'visible' ); $ ("# nextlevel_btn"). css ('visibilité': 'caché'); flickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = new Array (); flickrGame.currentLevel = 0 ; flickrGame.numberLevels = 0; addKeyPress ();); Ici nous révélons la #gamediv, Cache le #leveldiv et #attributionsdiv, révéler le #searchdiv, et cache le #nextlevel_btn. Nous réinitialisons ensuite certaines variables et appelons addKeyPress () afin que l'utilisateur puisse effectuer une nouvelle recherche.
Si vous testez maintenant, vous devriez pouvoir commencer une nouvelle partie à tout moment, ainsi que lorsque tous les niveaux ont été joués..
Le jeu est complet en ce qui concerne le gameplay, mais nous devons afficher un écran de démarrage. Nous ferons cela à l'étape suivante.
Nous devons apporter des modifications à notre fichier CSS. Plus précisément, nous devons définir la #gamediv visibilité à masqué, et définir la #introscreen à visible. Ouvrir styles / game.css et effectuez ces changements maintenant:
#gamediv position: absolute; à gauche: 150px; largeur: 600px; hauteur: 375px; bordure: 1px noir uni; rembourrage: 10px; couleur: # FF0080; visibilité: cachée; arrière-plan: #FFFFFF url ('… /pattern.png'); #introscreen position: absolute; à gauche: 150px; largeur: 600px; hauteur: 375px; bordure: 1px noir uni; rembourrage en haut: 10px; couleur: # FF0080; visibilité: visible; arrière-plan: #FFFFFF url ('… /pattern.png'); padding-left: 80px; Ensuite, nous devons changer le addKeyPress () une fonction. Supprimer tout de addKeyPress () et le remplacer par ce qui suit:
fonction addKeyPress () $ (document) .on ("pression au clavier", fonction (e) if (e.CodeCode == 13) if (! flickrGame.gameStarted) hideIntroScreen (); else doSearch (); flickrGame.gameStarted = true;); Ici, nous vérifions si l'utilisateur a appuyé sur la touche Entrée, puis nous vérifions si le jeu a commencé. Si ce n'est pas le cas, nous appelons hideIntroScreen (); sinon, nous appelons doSearch (); de toute façon, nous marquons le jeu comme ayant commencé. Cela signifie que la première fois que l'utilisateur appuie sur Entrée, il appelle hideIntroScreen (), et la prochaine fois que l'utilisateur appuiera sur la touche Entrée, il appellera doSearch ().
Maintenant, nous devons coder le hideIntroScreen () une fonction. Ajouter ce qui suit sous le addKeyPress () une fonction:
function hideIntroScreen () $ ("# gamediv"). css ('visibilité': 'visible'); $ ("# introscreen"). css ('visibilité': 'caché'); Si vous testez le jeu maintenant, vous devriez voir l'écran de démarrage; appuyez sur Entrée et vous pouvez jouer au jeu comme avant.
À l'heure actuelle, si suffisamment d'images ne sont pas renvoyées pour un jeu, nous ouvrons une alerte. Bien que cela fonctionne, nous pouvons le rendre plus agréable en utilisant la boîte de dialogue de jQuery UI.
Nous devons éditer index.html, alors ouvrez-le et ajoutez ce qui suit à l'intérieur du #gamediv:
Pas assez d'images ont été retournées, s'il vous plaît essayez un mot-clé différent.
Maintenant, il faut l’attacher. Ajouter ce qui suit sous le
hideIntroScreen ()fonction dans le fichier JS:$ ("# dialogue"). dialogue (autoOpen: false);Ce code convertit le
#dialoguediv dans un dialogue; nous désactivons la fonction d'ouverture automatique.Nous voulons déclencher l’ouverture de cette boîte de dialogue au lieu de l’alerte que nous avions auparavant. Supprimez-la de la
setImages ()fonction et le remplacer par ce qui suit:else $ ("# progressdiv"). css ('visibilité': 'caché'); $ ("# dialogue"). dialogue ('ouvert'); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Maintenant, si pas assez d'images sont renvoyées, nous obtenons un joli dialogue, au lieu d'utiliser une alerte rappelant les pages Web des années 90.
N'oubliez pas de changer cette ligne, de
preloadImages ():tempImage.src = "cardFront.jpg";… Retour à ceci:
tempImage.src = flickrGame.tempImages [i] .imageUrl;… Sinon, le jeu sera un peu trop facile!
Maintenant, testez le dernier jeu. Si quelque chose ne va pas, vous pouvez toujours comparer votre source à la mienne ou poser une question dans les commentaires..
Conclusion
Nous avons codé un petit jeu amusant utilisant des images de l’API Flickr et lui avons donné une couche décente de polissage. J'espère que vous avez apprécié ce tutoriel et appris quelque chose qui en vaut la peine. Merci d'avoir lu et amusez-vous!
