Share
In deze tweedelige zelfstudie leer je hoe je JavaScript en HTML kunt gebruiken om een kaartaanpassingsspel te maken dat mogelijk wordt gemaakt door de Flickr API. Bekijk de demo en lees verder!
Om de Flickr API te kunnen gebruiken, moet u een geregistreerde gebruiker zijn op flickr.com. Klik op de startpagina van Flickr op de link Registreren.
Eenmaal ingelogd, moet je de App Garden bezoeken om te beginnen.
U wilt deze pagina een bladwijzer maken als u van plan bent veel Flickr-ontwikkeling te doen, omdat het veel nuttige informatie voor ontwikkelaars bevat.
Klik op de link 'Een app maken' zodra u bij de App Garden bent aangekomen.
Klik onder 'Uw API-code ophalen' op de link 'Een API-sleutel aanvragen'.
Hier moet u kiezen of u de app wilt gebruiken voor commerciële of niet-commerciële doeleinden. Voor deze game heb ik niet-commercieel gekozen.
Vervolgens gaat u naar de pagina App-details. Voer de naam van uw app in en een beschrijving van wat uw app doet, accepteer de afspraken en klik op de knop Verzenden.
Vervolgens krijg je je sleutel en je geheim te zien. We zullen de geheime sleutel hier niet gebruiken, want onze app vereist geen authenticatie. Noteer uw API-sleutel, want we hebben deze voor de rest van deze tutorial nodig.
Flickr heeft een REST API voor ontwikkelaars. We zullen deze twee methoden uit de API gebruiken:
De flickr.photos.search methode zal ons toelaten om te zoeken naar foto's, terwijl de flickr.photos.getInfo methode zal ons toelaten om informatie te krijgen voor een enkele foto, zoals de gebruikersnaam (eigenaar) van de foto, de titel van de foto en de URL naar de fotopagina op Flickr.
Als u een van de bovenstaande links bezoekt, ziet u onderaan de pagina een link naar de API Explorer waarin u enkele gegevens kunt invoeren en een voorbeeldantwoord kunt krijgen.
De bovenstaande afbeelding is voor de flickr.photos.search methode. Ga je gang en klik nu op de link.
Er zijn veel opties, en het kan overweldigend lijken, maar we zijn alleen geïnteresseerd in deze tutorial door de optie "tags"; Ik heb 'hond' ingevoerd in het zoekvak voor tags. Kies JSON als de uitvoermethode, omdat we JSON in deze zelfstudie zullen gebruiken.
Druk ten slotte op de knop "Oproepmethode" en een voorbeeld van het antwoord wordt geretourneerd. Hier is een deel van het soort gegevens dat u kunt verwachten - de laatste paar regels zijn weggelaten:
"photos": "page": 1, "pages": "49825", "perpage": 100, "total": "4982408", "photo": ["id": "7338255166", "eigenaar ":" 45596890 @ N00 "," secret ":" 5f145a92b8 "," server ":" 7083 "," farm ": 8," title ":" Cute Rhea "," ispublic ": 1," isfriend ": 0 , "isfamily": 0, "id": "7338254718", "owner": "45596890 @ N00", "secret": "9e1da794a3", "server": "7223", "farm": 8, " title ":" Rhea chewing "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338258850 "," owner ":" 8672236 @ N04 "," secret ": "d0a5c4124c", "server": "8027", "farm": 9, "title": "", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": " 7338271122 "," owner ":" 49270434 @ N08 "," secret ":" 30876cfdf6 "," server ":" 7236 "," farm ": 8," title ":" 286 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338235972 "," owner ":" 8640124 @ N02 "," secret ":" a583d6aa48 "," server ":" 7085 "," farm " : 8, "title": "Y: 4 Day 123: Wind sweeps", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7330075254", "owner": "32081016 @ N07", "secret": "04cb99 e8a7 "," server ":" 7239 "," farm ": 8," title ":" Mad dogs and Englishmen ... "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338229968 "," owner ":" 67178219 @ N06 "," secret ":" 92b4be222a "," server ":" 7095 "," farm ": 8," title ":" Le petit chien dans la prairie "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338185610 "," owner ":" 7315798 @ N04 "," secret ":" 9a91bd1280 "," server ":" 7224 "," farm ": 8," title ":" snuggle "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338111264 "," eigenaar ":" 80044484 @ N06 "," secret ":" f795c559e3 "," server ":" 7214 "," farm ": 8," title ":" DSC_0408 "," ispublic ": 1," isfriend ": 0, "isfamily": 0, "id": "7338135744", "owner": "80023312 @ N07", "secret": "d37c015be6", "server": "7234", "farm": 8, "title ":" 0007_Ridgeback "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338136008 "," owner ":" 80023312 @ N07 "," secret ":" 259e50ebaa "," server ":" 7219 "," farm ": 8," title ":" 0003_Pug "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 73 38133290 "," owner ":" 80044484 @ N06 "," secret ":" a2e954aab0 "," server ":" 7098 "," farm ": 8," title ":" _DSC0032 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338142010 "," owner ":" 80023312 @ N07 "," secret ":" 34809c804f "," server ":" 7071 "," farm " : 8, "title": "0009_WireFox", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7338014824", "owner": "36700168 @ N04", " secret ":" 2625ab12a4 "," server ":" 8164 "," farm ": 9," title ":" Nosferatus 'dog "," ispublic ": 1," isfriend ": 0," isfamily ": 0, "id": "7338092614", "owner": "80023312 @ N07", "secret": "ee7210e0f1", "server": "8010", "farm": 9, "title": "0002_GreatDane", " ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338120200 "," owner ":" 80023312 @ N07 "," secret ":" 38b5c49f4f "," server ":" 7245 "," boerderij ": 8," titel ":" 0006_Cavalier "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338159814 "," owner ":" 7315798 @ N04 "," secret ":" 327e97cb13 "," server ":" 7104 "," farm ": 8," title ":" puppy love "," ispublic ": 1," isfriend ": 0, "isfamily": 0,
We zullen de gegevens uit de respons gebruiken om onze URL's voor de afbeeldingen te construeren. De URL's hebben de volgende vorm:
http: // farm farm-id .static.flickr.com / server-id / id _ secret _ [mstzb] .jpg
Om een bruikbare URL te maken, vervangen we gewoon wat zich in de bevindt met de gegevens die we van hierboven ontvangen. Bijvoorbeeld het eerste item uit de foto array binnen de bovenstaande JSON is:
"id": "7338255166", "owner": "45596890 @ N00", "secret": "5f145a92b8", "server": "7083", "farm": 8, "title": "Cute Rhea", "ispublic": 1, "isfriend": 0, "isfamily": 0
... dus de URL die we moeten samenstellen is dit:
http://farm8.static.flickr.com/7083/7338255166_5f145a92b8_q.jpg
De "q" geeft de grootte van de afbeelding aan: 150x150 px.
Die link leidt naar deze foto. Meer informatie over de URL's is te vinden in de Flickr-documentatie voor URL's van fotobronnen.
In de brondownload is er een ZIP-bestand met de naam "StartHere.zip" dat de bestanden bevat die allemaal voor u klaarliggen, klaar om een code toe te voegen. U kunt door deze bestanden bladeren om een idee te krijgen van de structuur van het project. Ik heb ook een "README.txt" toegevoegd dat de structuur in meer detail uitlegt.
We gebruiken de volgende JavaScript-bibliotheken in dit project. Je kunt ze afzonderlijk downloaden als je dat wilt.
Accentsconagua
document.ready () In de map "js" vindt u een JavaScript-bestandsnaam "flickrgame.js". Voeg de volgende code toe aan dit bestand.
$ (document) .ready (function () alert ("Ready");); Als u de pagina "index.html" nu test, ziet u een waarschuwing met het woord "Klaar".
Deze code maakt gebruik van jQuery's .klaar() methode, die wordt geactiveerd wanneer de DOM volledig is geladen. Het is belangrijk om deze methode te gebruiken bij het coderen van uw apps, omdat u ervoor moet zorgen dat de DOM is geladen voordat u deze probeert te manipuleren. Als u bijvoorbeeld een klikgebeurtenishandler aan een knop wilt toevoegen voordat de DOM is geladen en gereed is, heeft dit geen effect.
flickrGame Object LetterlijkWe zullen een object gebruiken genaamd flickrGame om al onze variabelen netjes en opgeruimd te houden en uit de algemene naamruimte te halen.
Voer de volgende code in de $ (Document) .ready () je hebt in de bovenstaande stap toegevoegd en de waarschuwing vervangen.
$ (document) .ready (function () var flickrGame = );
Binnen de flickrGame object letterlijk voeg de volgende code toe. Vervang de "UW API-SLEUTEL" door de API-sleutel die u hebt ontvangen toen u zich aanmeldde.
$ (document) .ready (function () var flickrGame = APIKEY: "YOUR API KEY");
doSearch () De doSearch () methode zal de Flickr API aanroepen. Voer het volgende in onder flickrGame object letterlijke definitie (maar nog steeds binnen de $ Document.ready () functie):
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);
Hier stellen we stap voor stap onze vraag op. We wijzen de searchURL variabele naar de flickr.photos.search-methode van de Flickr API.
Omdat het een REST API is, om het te noemen, hoeven we alleen maar een URL te construeren met de vereiste parameters. Dus, hier gebruiken we de flickr.photos.search methode en het aanvragen van afbeeldingen die zijn getagd met 'hond'. We hebben het formaat ingesteld op "json" en "jsoncallback =?" Ingesteld, waardoor de callback-functie wordt uitgevoerd zodra de gegevens zijn opgehaald.
Door de licentieparameter tp in te stellen 5,7 we vragen Flickr om ons alleen afbeeldingen te geven met een Attribution-ShareAlike-licentie of zonder bekende auteursrechtlicentie.
Vervolgens gebruiken we de methode $ .getJSON () van jQuery, die wordt doorgegeven in onze searchURL en een verwijzing naar de callback-functie setImages () welke we hierna zullen coderen.
setImages () In deze stap zullen we de code coderen setImages () functie en bekijk de resultaten die we terugkrijgen van Flickr. Voer de volgende code onder de doSearch () functie die u in de bovenstaande stap hebt toegevoegd.
function setImages (data) var tempString = ""; $ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; tempString + = imageURL + "
";); $ (" # urls "). html (tempString);
Hier initialiseren we een variabele tempString die de URL's bevat die we van Flickr ontvangen. Binnen elk object de parameter gegevens bevat de JSON die is geretourneerd door de aanroep naar de Flickr API, zoals uiteengezet in stap 3 - zodat we kunnen zien dat de afzonderlijke foto-objecten te vinden zijn in data.photos.photo.
We kunnen de $ .each () -methode van jQuery gebruiken om door elk geretourneerd JSON-fotoobject te bladeren. In de loop construeren we de afbeelding URL, opnieuw zoals uiteengezet in Stap 3, voeg het dan toe aan tempString, en ten slotte output tempString naar de div genaamd "urls" door de HTML van de div rechtstreeks aan te passen.
Het gaat er hier om te zien welke URL's we krijgen van onze aanroep naar de Flickr API. Als je meegaat met de broncode, heb ik een div toegevoegd met id = "URL" dus we konden dit bekijken op de webpagina. (Ik zal het in de volgende stap verwijderen.)
Ten slotte, om het daadwerkelijk te bekijken, moeten we ons bellen doSearch () functie. Voeg dit toe recht onder de setImages () functie.
doSearch ();
Je kunt het hier testen. Het kan een seconde of twee duren voordat u deze gegevens ziet, afhankelijk van uw verbindingssnelheid. Hieronder staan de eerste paar URL's die zijn geretourneerd, voor het geval u de broncode niet volgt.
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/7179453807_a4c871311f_q. 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/7221/7177959671_025cc2381b_q .jpg
We zullen alle URL's die we terugkrijgen van Flickr in een array opslaan, in plaats van samen als één enkele reeks vast te klemmen. Voeg het volgende toe aan de flickrGame voorwerp.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: []
(Zorg ervoor dat u de komma toevoegt na de APIKEY: "UW API-SLEUTEL".)
Voeg nu het volgende toe binnen de setImages () functie. Ik heb de code uit de vorige stap verwijderd, omdat deze alleen voor demonstratiedoeleinden was.
$ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, photoid: item.id););
Hier duwen we de afbeelding URL en item ID op de imageArray met behulp van de toetsen afbeelding URL en PhotoID respectievelijk. We hebben de afbeelding URL om onze afbeeldingen te maken, en de PhotoID wordt gebruikt om de specifieke foto te identificeren. We moeten ook een toeschrijving laten zien voor de foto's die we gebruiken en door hun id te hebben kunnen we de gebruiker koppelen aan de foto op Flickr.
De behoefte aan al deze gegevens zal duidelijker worden naarmate we de tutorial doorlopen, dus maak je daar niet al te veel zorgen over.
infoLoaded () De infoLoaded () functie zal worden gebruikt voor het laden van de informatie van de foto's. Nadat alle foto-informatie is geladen, infoLoaded () zal een functie genaamd preloadImages () die de afbeeldingen vooraf zal laden.
Zodra alle afbeeldingen zijn geladen, bellen we drawImages (), waardoor de afbeeldingen op het scherm worden geplaatst en het spel begint.
Voeg het volgende toe onder de setImages () functie.
functie-informatie Geladen (gegevens)
De gegevens parameter bevat de JSON van elke specifieke foto. We komen hier een beetje op terug; voor nu zullen we deze functie gebruiken om te bellen preloadImages () direct. Ga je gang en voeg de oproep nu toe:
function infoLoaded (data) preloadImages ();
preloadImages () De preloadImages () functie zal worden gebruikt om de afbeeldingen te maken en vooraf te laden voor de start van het spel en voor elk niveau. We laden ze vooraf in, dus er is geen vertraging tussen wanneer we de afbeeldingen weergeven en wanneer het wordt gedownload.
We komen later terug op de preloading-code. Voor nu maken we de eerste 12 afbeeldingen voor het begin van het spel. We hebben een nieuwe array nodig om deze 12 afbeeldingen te bewaren, dus voeg het volgende toe aan uw flickrGame voorwerp:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: []
Voeg een komma toe na imageArray: [].
De tempImages array wordt gebruikt om 12 afbeeldingen tegelijk vast te houden. Ons spel gebruikt 12 afbeeldingen per niveau en de imageArray kan maximaal 36 afbeeldingen bevatten (afhankelijk van hoeveel we in onze zoekopdracht hebben ingesteld op Flickr). Dus we zullen 12 afbeeldingen van de imageArray en sla ze op tempImages.
Voeg de volgende code toe onder de infoLoaded () functie die u in de bovenstaande stap hebt toegevoegd.
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); for (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);
Hier gebruiken we de javascript-methode splice () om 12 afbeeldingen uit de. te halen imageArray, en plaats ze in de tempImages matrix. We gebruiken vervolgens een geneste voor loop om 24 afbeeldingen te maken.
Voor elk van deze 24 afbeeldingen maken we een nieuwe Beeld, stel zijn src naar "cardFront.png" (een afbeelding die u ziet voordat de kaart wordt omgedraaid), maak een nieuwe eigenschap met de naam afbeeldingsbron die de URL bevat van de daadwerkelijke afbeelding van Flickr die moet worden weergegeven en duw deze vervolgens in de array de afbeeldingen.
We moeten toevoegen de afbeeldingen naar onze flickrGame object, dus doe dat nu.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: []
Zorg ervoor dat u de komma daarna toevoegt tempImages [].
Laten we doorgaan en de drawImages () ook functioneren; zodra we het hebben geschreven, zal dit de afbeeldingen op het scherm weergeven. Voeg het volgende toe na de geneste voor loop in de preloadImages () functie.
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); for (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();
De drawImages () functie plaatst de afbeeldingen daadwerkelijk op het scherm. We schudden eerst de afbeeldingen in de de afbeeldingen array met behulp van een functie genaamd randSort en voeg ze toe aan de #gamediv sectie van de HTML.
Voer de volgende code onder de flickrGame objectdefinitie:
function randOrd () return (Math.round (Math.random ()) - 0.5);
Deze functie wordt gebruikt om de afbeeldingen in willekeurige volgorde af te spelen. We zullen JavaScript's bellen soort() methode op een array en doorgeven randOrd als de parameter. Dit werkt in principe op dezelfde manier als beschreven in "De sorteermethode" in dit artikel.
Voeg het volgende toe onder de preloadImages () functie die je in de bovenstaande stap hebt toegevoegd:
functie drawImages () flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); We noemen de sorteermethode aan de afbeeldingen, passeren in onze randOrd functie, loop dan door de afbeeldingen, het toevoegen van elke afbeelding aan de #gamediv.
We gebruiken de jQuery-methode .attr om een klasse "kaart" toe te voegen aan elke afbeelding. Waarom? Omdat als we een level beëindigen, we de kaarten uit de #gamediv; dit geeft ons een manier om alleen de kaarten te targeten en niet allemaal afbeeldingen.
Hier vindt u links naar de methoden attr () en appendTo () van jQuery, zodat u hier meer over kunt leren.
Op dit moment moeten we klaar zijn om een aantal kaarten op het scherm te krijgen. Na de .elk() inbellen setImages bel de infoLoaded () functie en test de pagina.
function setImages (data) $ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item. server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, photoid: item.id);); infoLoaded ();
Als alles goed gaat, zou je 24 afbeeldingen met het Flickr-logo op het scherm moeten zien. Het kan even duren voordat ze worden weergegeven, omdat we de Flickr API aanroepen en de afbeeldingen ook laden.
We zullen de code een beetje wijzigen, zodat we de daadwerkelijke afbeeldingen nu kunnen bekijken. Wijzig de preloadImages () functie om de daadwerkelijke afbeelding te laten zien in plaats van de "cardFront.png":
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); for (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();
Test het spel nu.
De addListeners () functie voegt een klik luisteraar toe aan elk van de afbeeldingen die een functie aanroept doFlip (), die op zijn beurt het onderstaande beeld onthullen (als het logo momenteel wordt weergegeven).
Voeg het volgende toe onder de drawImages () functie die je in de bovenstaande stap hebt toegevoegd:
functie addListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).on("click", function (e) doFlip(e); ); We voegen de luisteraars toe in de drawImages () functie:
functie drawImages () flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); We hebben ook een manier nodig om de klikluisteraars uit de afbeeldingen te verwijderen. Voeg het volgende toe onder de addListeners () functie die u in de bovenstaande stap hebt toegevoegd.
function removeListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).off("click"); doFlip () De doFlip () functie wordt aangeroepen wanneer de gebruiker op een van de afbeeldingen klikt. Het toont de grote afbeeldingen aan de linker- en rechterkant van het hoofdgamplaygebied en roept vervolgens een functie aan checkForMatch () die controleert of de afbeeldingen overeenkomen.
Voeg het volgende toe onder de removeListeners () functie die u in de bovenstaande stap hebt toegevoegd.
functie doFlip (e) var theCard = e.target; $ (theCard) .attr ("src", theCard.imageSource); if ($ ('# image1'). css ('backgroundImage') == "none") $ ('# 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 ( "klik"); if (flickrGame.chosenCards.length == 2) removeListeners (); checkForMatch (); We krijgen eerst een verwijzing naar de kaart waarop is geklikt en deze is ingesteld src attribuut aan de URL van de daadwerkelijke afbeelding (in plaats van het Flickr-logo).
We controleren vervolgens of de CSS-achtergrond van de grote afbeelding aan de linkerkant (# image1) is gelijk aan "geen", en als dat het geval is, stellen we de achtergrondafbeelding in op dezelfde afbeelding als waarop we hebben geklikt. Als het niet gelijk is aan 'geen', betekent dit dat op een kaart is geklikt, dus we hebben de achtergrondafbeelding van de grote afbeelding op de rechts.
We controleren dat het chosenCards array (die we in een ogenblik zullen toevoegen) bevat deze kaart nog niet, voor een veilige huishouding, en dan op de array te duwen. We verwijderen ook de klikgebeurtenis van de kaart zodat deze er niet nog een keer op kan klikken.
Als het chosenCards lengte is gelijk aan 2, dit betekent dat de gebruiker twee kaarten heeft gekozen, dus we bellen removeListeners () om de klikgebeurtenis van de rest van de kaarten te verwijderen en de checkForMatch () functie (die we in de volgende stap zullen coderen) om te zien of de geselecteerde kaarten overeenkomen.
We moeten het toevoegen chosenCards array naar onze flickrGame object, dus doe dat nu:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: []
Zorg ervoor dat u erna een komma toevoegt de afbeeldingen[].
checkForMatch () De checkForMatch () functie controleert of de aangeklikte kaarten overeenkomen. Als ze dat doen, "verbergen" we ze; als ze dat niet doen, voegen we de luisteraars toe aan de overgebleven kaarten en laten we de speler nog een keer gaan.
Voeg het volgende toe onder de doFlip () functie die je in de bovenstaande stap hebt toegevoegd:
function checkForMatch () if (flickrGame.chosenCards.length == 2) if ($ ("# image1"). css ('background-image') == $ ("# image2"). css ('achtergrond' afbeelding ')) setTimeout (hideCards, 1000); else setTimeout (resetImages, 1000); Hier controleren we of het chosenCards lengte is gelijk aan 2. Als dat zo is, controleren we of de twee grote afbeeldingen hetzelfde zijn door hun achtergrond afbeelding. (We hadden in plaats daarvan de kleinere afbeeldingen kunnen gebruiken; kijk als een oefening of u dit kunt doen.)
Als de afbeeldingen overeenkomen, gebruiken we setTimeout () om de. te bellen kaarten verbergen() functie na een seconde; anders bellen we resetImages () na een seconde. Door deze functieaanroepen uit te stellen, voegen we een korte pauze toe aan het spel.
We zullen de functies coderen om de kaarten te verbergen en vervolgens de afbeeldingen opnieuw in te stellen.
kaarten verbergen() Als de gebruiker twee kaarten heeft vergeleken, verbergen we ze allebei en voegen de klikluisteraars toe aan de rest van de kaarten.
Voeg de volgende code toe onder de checkForMatch () functie die je in de bovenstaande stap hebt gemaakt:
function hideCards () $ (flickrGame.chosenCards [0]). animeren ('opacity': '0'); $ (flickrGame.chosenCards [1]). animeren ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ ("# image1"). css ('achtergrondafbeelding', 'geen'); $ ("# image2"). css ('achtergrondafbeelding', 'geen'); addListeners (); flickrGame.chosenCards = nieuwe array (); We gebruiken de methode animate () van jQuery om de dekking van beide kaarten naar 0 te tweenen, waardoor ze lijken te vervagen. We verwijderen ook de afbeeldingen uit de de afbeeldingen array, stel de achtergrond van de grote afbeeldingen opnieuw in op "none", voeg de luisteraars toe aan de andere afbeeldingen en reset onze chosenCards rangschikking.
Probeer het hier eens.
resetImages () Deze functie wordt uitgevoerd als de twee geselecteerde afbeeldingen niet overeenkomen. Het reset de kleine afbeeldingen ' src attributen terug naar "cardFront.png", stelt de achtergrond van de grote afbeelding in op "none", voegt de luisteraars toe aan de kaarten en stelt de chosenCards rangschikking.
Voeg het volgende toe onder de kaarten verbergen functie die u in de bovenstaande stap hebt toegevoegd.
function resetImages () $ (flickrGame.chosenCards [0]). attr ("src", "cardFront.png"); $ (flickrGame.chosenCards [1]). attr ("src", "cardFront.png"); $ ("# image1"). css ('achtergrondafbeelding', 'geen'); $ ("# image2"). css ('achtergrondafbeelding', 'geen'); addListeners (); flickrGame.chosenCards = nieuwe array (); Je kunt het spel nu echt spelen, behalve dat de afbeeldingen worden weergegeven. Om dat te veranderen, wijzigt u de preloadImages () functioneer als volgt:
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); for (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();
(Het is goed om dit heen en weer te veranderen voor eenvoudig testen.)
Dit is het resultaat!
Dat is het einde van het eerste deel van deze tutorial. Tot nu toe heb je een functioneel HTML5-spel gemaakt; in het volgende deel voeg je Pools toe en leer je hoe je:
Zie je dan!
