Share
În acest tutorial din două părți, veți învăța cum să utilizați JavaScript și HTML pentru a crea un joc de potrivire a cărților, alimentat de API-ul Flickr. Verificați demo-ul și citiți-l!
Pentru a putea utiliza API-ul Flickr, trebuie să fiți utilizator înregistrat pe flickr.com. Din pagina de pornire a Flickr, dați clic pe link-ul Înscrieți-vă.
După ce v-ați conectat, va trebui să vizitați App Garden pentru a începe.
Veți dori să marcați această pagină dacă intenționați să faceți o mulțime de dezvoltare Flickr, deoarece conține multe informații utile pentru dezvoltatori.
Faceți clic pe linkul "Creați o aplicație" odată ce ajungeți la App Garden.
Sub "Obțineți cheia API", dați clic pe linkul "Solicitați o cheie API".
Aici trebuie să alegeți dacă intenționați să utilizați aplicația în scopuri comerciale sau necomerciale. Pentru acest joc am ales non-comerciale.
Înainte de a ajunge la pagina Detalii despre aplicație. Introduceți numele aplicației și o descriere a aplicației dvs., acceptați acordurile și faceți clic pe butonul Trimitere.
Apoi, vi se va prezenta cheia și secretul. Nu vom folosi cheia secretă aici, deoarece aplicația noastră nu necesită autentificare. Notați cheia dvs. API, deoarece vom avea nevoie de ea pentru restul tutorialului.
Flickr are un API REST pentru dezvoltatori. Vom folosi aceste două metode din API:
flickr.photos.search metoda ne va permite să căutăm fotografii, în timp ce flickr.photos.getInfo ne va permite să obținem informații pentru o singură fotografie, cum ar fi numele de utilizator (proprietarul) fotografiei, titlul fotografiei și URL-ul paginii fotografiei de pe Flickr.
Dacă vizitați una dintre legăturile de mai sus, în partea de jos a paginii există o legătură către API Explorer unde puteți introduce unele date și puteți obține un exemplu de răspuns.
Imaginea de mai sus este pentru flickr.photos.search metodă. Mergeți mai departe și faceți clic pe link-ul acum.
Există o mulțime de opțiuni și poate părea copleșitoare, dar tot ceea ce ne interesează pentru acest tutorial este opțiunea "tag-uri"; Am intrat "câine" în caseta de căutare pentru etichete. Alegeți JSON ca metodă de ieșire, deoarece vom folosi JSON în acest tutorial.
În cele din urmă, apăsați butonul "Metoda de apelare", iar un exemplu de răspuns va fi returnat. Iată o parte din datele pe care le puteți aștepta să le primiți - ultimele câteva linii au fost eliminate:
"fotografii": "pagină": 1, "pagini": "49825", "perpage": 100, "total": "4982408", "foto" : "45596890 @ N00", "secret": "5f145a92b8", "server": "7083", "ferma": 8, "titlul": "ispublic"; , "proprietar": "45596890 @ N00", "secret": "9e1da794a3", "server": "7223" titlu ":" Rhea chewing "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338258850 "," proprietar ":" 8672236 @ N04 " "", "ispublic": 1, "isfriendly": 0, "isfamily": 0, "id0" 7338271122 "," proprietar ":" 49270434 @ N08 "," secret ":" 30876cfdf6 "," server ":" 7236 " este ":" 0 "," isfamily ": 0," id ":" 7338235972 "," proprietar ":" 8640124 @ N02 "," secret " : 8, "titlu": "Y: 4 Ziua 123: Vânturi", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7330075254"; "32081016 @ N07", "secret": "04cb99 "e", "server": "7239", "fermă": 8, "titlu": "câini nebuni și englezi ...", "ispublic" id: "7338229968", "proprietar": "67178219 @ N06", "secret": "92b4be222a", "server": "7095" "," ispublic ": 1," isfriendly ": 0," isfamily ": 0," id ":" 7338185610 "," owner ":" 7315798 @ N04 "," secret ":" 9a91bd1280 " : "7224", "ferma": 8, "titlu": "snuggle", "ispublic": 1, "isfriend": 0, "isfamily": 0, id 7338111264 ":" 80044484 @ N06 "," secret ":" f795c559e3 "," server ":" 7214 " "isfamily": 0, "id": "7338135744", "proprietar": "80023312 @ N07", "secret" ":" 0007_Ridgeback "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338136008 "," owner ":" 80023312 @ N07 " "," server ":" 7219 "," fermă ": 8," titlu ":" 0003_Pug "," ispublic ":" isfriendly " 38133290 "," proprietar ":" 80044484 @ N06 "," secret ":" a2e954aab0 "," server ":" 7098 " "server": "7071", "fermă": 0, "isfamily": 0, "id": "7338142010", "owner": "80023312 @ N07" : "Isfamily": 0, "id": "7338014824", "proprietar": "36700168 @ N04", " secret ":" 2625ab12a4 "," server ":" 8164 "," fermă ": 9," titlu ":" câine Nosferatus "," ispublic ": 1," isfriendly "; "id": "7338092614", "proprietar": "80023312 @ N07", "secret": "ee7210e0f1", "server": "8010" ispublic ": 1," isfamily ": 0, " id ":" 7338120200 "," owner ":" 80023312 @ N07 " 7245 "," farm ": 8," titlu ":" 0006_Cavalier "," ispublic ": 1," isfriend " 7315798 @ N04 "," secret ":" 327e97cb13 "," server ":" 7104 "," fermă ": 8," titlu ":" puppy love "," ispublic ": 1," isfriend ": 0, "isfamily": 0,
Vom folosi datele din răspuns pentru a construi URL-urile noastre pe imagini. URL-urile iau acest formular:
http: // ferma ferma-id .static.flickr.com / server id / id _ secret de _ [mstzb] .jpg
Pentru a face o adresă URL utilizabilă, înlocuim doar ceea ce se află în cu datele obținute de mai sus. De exemplu, primul element din fotografie array în interiorul JSON de mai sus este:
"id": "7338255166", "proprietar": "45596890 @ N00", "secret": "5f145a92b8", "server": "7083", "farm": 8; "ispublic": 1, "isfriend": 0, "isfamily": 0
... astfel încât adresa URL pe care trebuie să o construim este următoarea:
http://farm8.static.flickr.com/7083/7338255166_5f145a92b8_q.jpg
"Q" reprezintă dimensiunea imaginii: 150x150px.
Această legătură duce la această fotografie. Mai multe informații despre adresele URL pot fi găsite în documentația Flickr Documentation for URLs Source Source.
În descărcarea sursei există un fișier ZIP numit "StartHere.zip" care conține fișierele care sunt toate pregătite pentru dvs., gata să adauge un cod. Puteți căuta prin aceste fișiere pentru a obține și ideea structurii proiectului. Am inclus, de asemenea, un "README.txt" care explică structura în detaliu.
Folosim următoarele biblioteci JavaScript în acest proiect. Puteți să le descărcați separat dacă doriți.
Accentsconagua
document.ready () În directorul "js" veți găsi un nume de fișier JavaScript "flickrgame.js". Adăugați următorul cod în acest fișier.
$ (document) .ready (funcție () alert ("Ready");); Dacă testați pagina "index.html" acum, ar trebui să vedeți o alertă cu cuvântul "Ready".
Acest cod folosește jQuery .gata() , care se declanșează atunci când DOM-ul sa încărcat complet. Este important să apelați această metodă când codați aplicațiile, deoarece trebuie să vă asigurați că DOM-ul a fost încărcat înainte de a încerca să îl manipulați. De exemplu, dacă ați încercat să adăugați un handler de evenimente pentru clicuri pe un buton înainte ca DOM să fie încărcat și pregătit, acesta nu ar avea efect.
flickrGame Obiectul este literalVom folosi un obiect numit flickrGame pentru a păstra toate variabilele noastre ordonate și ordonate și din spațiul de nume global.
Introduceți codul următor în $ (Document) .ready () ați adăugat în pasul de mai sus, înlocuind alerta.
$ (document) .ready (funcție () var flickrGame = );
În cadrul flickrGame obiect literal adăugați următorul cod. Înlocuiți "API-ul cheie" cu cheia API pe care ați primit-o când v-ați înscris.
$ (document) .ready (funcție () var flickrGame = APIKEY: "API-ul dvs. cheie");
doSearch () doSearch () metoda va apela API-ul Flickr. Introduceți următoarele sub flickrGame obiect definiție literală (dar încă în interiorul $ Document.ready () funcţie):
funcția doSearch () var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; căutareURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags = câine" searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; căutareURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (căutareURL, setImages);
Aici construim interogarea noastră pas cu pas. Punem în evidență searchURL variabilă la metoda flickr.photos.search a API-ului Flickr.
Deoarece este un API REST, pentru ao numi, trebuie doar să construim o adresă URL cu parametrii necesari. Deci, aici folosim flickr.photos.search și solicită imagini etichetate cu "câine". Am setat formatul la "json" și am setat "jsoncallback =?", Ceea ce face ca funcția de apel invers să fie executată imediat ce datele sunt retrimise.
Prin setarea parametrului de licență tp 5,7 solicităm Flickr să ne dea doar imagini cu o licență Attribution-ShareAlike sau fără licență de copyright cunoscută.
Apoi folosim metoda jQuery $ .getJSON (), trecând prin metoda noastră searchURL și o trimitere la funcția de apel invers setImages () pe care o vom codifica în continuare.
setImages () În acest pas vom codifica setImages () și vizualizați rezultatele pe care le primim din Flickr. Introduceți codul de mai jos doSearch () funcția pe care ați adăugat-o în pasul de mai sus.
setImages (date) var tempString = ""; $ .each (date.photos.photo, funcție (i, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + element.server + '/ element.id + '_' + element.secret + '_' + 'q.jpg'; tempString + = imageURL + "
";); $ (" # urls "); html (tempString);
Aici inițiază o variabilă tempString care va păstra URL-urile pe care le primim de pe Flickr. În fiecare obiect, parametrul date deține JSON-ul care a fost returnat de la apelul către API-ul Flickr, așa cum este prezentat în pasul 3 - pentru a vedea că obiectele fotografice individuale se găsesc în data.photos.photo.
Putem folosi metoda $ .each () a lui jQuery pentru a trece prin fiecare obiect foto JSON care a fost returnat. În interiorul bucla construim Imagine URL, din nou așa cum este prezentat în pasul 3, apoi adăugați-l tempString, și în cele din urmă de ieșire tempString la div numit "url" prin modificarea directă a codului HTML al div.
Ideea aici este să vedem ce URL-uri primim de la apelul nostru către API-ul Flickr. Dacă urmăriți împreună cu codul sursă, am adăugat un div cu id = "" url-uri astfel încât am putea vedea acest lucru în pagina web. (O voi elimina în pasul următor).
În sfârșit, pentru ao vedea, trebuie să ne sunăm doSearch () funcţie. Adăugați acest drept sub setImages () funcţie.
doSearch ();
Puteți să-l testați aici. Este posibil să dureze o secundă sau două înainte de a vedea aceste date, în funcție de viteza conexiunii. Mai jos sunt primii câteva adrese URL returnate, în cazul în care nu urmați împreună cu codul sursă.
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
Vom păstra toate într-o matrice toate adresele URL pe care le primim din Flickr, mai degrabă decât blocate împreună ca un singur șir. Adăugați următoarele la flickrGame obiect.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imagineArray: []
(Asigurați-vă că adăugați virgula după APIKEY: "API-ul dvs. cheie".)
Acum, adăugați următoarele în cadrul setImages () funcţie. Am eliminat codul din pasul anterior, deoarece era doar pentru demonstrații.
$ .each (date.photos.photo, funcție (i, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + element.server + '/ item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, fotoid: item.id););
Aici împingem Imagine URL și ID-ul itemului pe imageArray folosind tastele Imagine URL și PHOTOID respectiv. Avem nevoie de Imagine URL pentru a construi imaginile noastre, și PHOTOID va fi utilizat pentru a identifica fotografia specială. De asemenea, trebuie să arătăm o atribuire pentru fotografiile pe care le folosim și, având identitatea lor, putem lega utilizatorul de fotografia de pe Flickr.
Nevoia pentru toate aceste date va deveni mai clară în timp ce ne mișcăm prin tutorial, așa că nu vă îngrijorați prea mult despre asta acum.
infoLoaded () infoLoaded () funcția va fi utilizată pentru încărcarea informațiilor despre fotografii. După ce toate informațiile despre fotografie au fost încărcate, infoLoaded () va apela o funcție numită preloadImages () care va preîncărca imaginile.
Odată ce toate imaginile au fost preîncărcate sunăm drawImages (), care plasează imaginile pe ecran și începe jocul.
Adăugați următoarele sub setImages () funcţie.
funcția infoLoaded (date)
date parametrul va menține JSON-ul pentru fiecare fotografie particulară. Vom reveni la acest lucru într-un pic; pentru moment vom folosi doar această funcție pentru a apela preloadImages () direct. Continuați și adăugați apelul acum:
funcția infoLoaded (date) preloadImages ();
preloadImages () preloadImages () funcția va fi utilizată pentru a crea și preîncărca imaginile pentru începutul jocului și pentru fiecare nivel. Noi le preîncărcați, astfel încât nu există o întârziere între momentul în care afișăm imaginile și când descărcăm.
Vom reveni la codul de preîncărcare mai târziu. Pentru moment, vom crea doar primele 12 imagini pentru începutul jocului. Avem nevoie de o nouă matrice pentru a ține aceste 12 imagini, deci adăugați următoarele la dvs. flickrGame obiect:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imagineArray: [], tempImages: []
Asigurați-vă că adăugați o virgulă după imageArray: [].
tempImages array este folosit pentru a deține 12 imagini la un moment dat. Jocul nostru folosește 12 imagini pe nivel, iar imageArray deține până la 36 de imagini (în funcție de cât de mulți am stabilit în căutarea noastră pe Flickr). Deci vom apuca 12 imagini din imageArray și să le păstrați tempImages.
Adăugați următorul cod sub infoLoaded () funcția pe care ați adăugat-o în pasul de mai sus.
funcția preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pentru (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);
Aici folosim metoda javascript lipitură() pentru a scoate 12 imagini din imageArray, și le plasați în tempImages matrice. Apoi folosim un imbricat pentru pentru a crea 24 de imagini.
Pentru fiecare dintre aceste 24 de imagini, creăm un nou Imagine, setați-o src la "cardFront.png" (o imagine pe care o veți vedea înainte ca cardul să fie răsturnat), creați o nouă proprietate numită imageSource care conține adresa URL a imaginii reale din Flickr pentru a fi afișată și apoi împingeți-o în matrice imaginile.
Trebuie să adăugăm imaginile pentru noi flickrGame obiect, așa face și acum.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imaginile: []
Asigurați-vă că adăugați virgula după tempImages [].
Să mergem mai departe și să sunăm drawImages () și funcția; odată ce l-am scris, aceasta va face imaginile de pe ecran. Adăugați următoarele după imbricate pentru buclă în preloadImages () funcţie.
funcția preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pentru (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();
drawImages () funcția pune de fapt imaginile pe ecran. Mai întâi amestecăm imaginile din imaginile folosind o funcție numită randSort și apoi să le adăugați la #gamediv secțiune a codului HTML.
Introduceți codul de mai jos flickrGame obiect definiție:
funcția randOrd () retur (Math.round (Math.random ()) - 0,5);
Această funcție este utilizată pentru a amesteca imaginile. Vom numi JavaScript fel() metoda pe o matrice și treci randOrd ca parametru. Acest lucru funcționează în principiu la fel cum este prezentat în "Abordarea de sortare" din acest articol.
Adăugați următoarele sub preloadImages () funcția pe care ați adăugat-o în pasul de mai sus:
funcția drawImages () flickrGame.theImages.sort (randOrd); pentru (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); Se numește metoda de sortare imaginile, trecând în noi randOrd apoi treceți prin buclă imaginile, adăugând fiecare imagine la #gamediv.
Folosim metoda jQuery .attr pentru a adăuga o clasă de "card" la fiecare imagine. De ce? Pentru că atunci când terminăm un nivel, eliminăm cardurile din #gamediv; acest lucru ne oferă o modalitate de a viza doar cardurile și nu toate imagini.
Iată linkurile la metodele jQuery lui attr () și appendTo (), astfel încât să puteți afla mai multe despre ele.
Ar trebui să fim gata să scoatem niște cărți pe ecran în acest moment. După .fiecare() sună setImages suna infoLoaded () funcția și testați pagina.
Funcția setImages (date) $ .each (date.photos.photo, funcția (i, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + element. server + '/' + item.id + '_' + element.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, fotoid: item.id); infoLoaded ();
Dacă totul merge bine ar trebui să vedeți 24 de imagini cu logo-ul Flickr pe ecran. S-ar putea să dureze un moment înainte să apară, pentru că sunăm API-ul Flickr și încărcăm și imaginile.
Vom face o mică schimbare a codului pentru a putea vedea imaginile reale pentru moment. Modificați preloadImages () pentru a afișa imaginea reală în loc de "cardFront.png":
funcția preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pentru (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();
Testați jocul acum.
addListeners () funcția va adăuga un ascultător de clic la fiecare dintre imaginile care apelează o funcție doFlip (), care, la rândul său, va dezvălui imaginea de dedesubt (dacă logo-ul este în prezent afișat).
Adăugați următoarele sub drawImages () funcția pe care ați adăugat-o în pasul de mai sus:
funcția addListeners () pentru (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).on("click", function (e) doFlip(e); ); Adăugăm ascultătorii în drawImages () funcţie:
funcția drawImages () flickrGame.theImages.sort (randOrd); pentru (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Avem nevoie de o modalitate de a elimina și ascultătorii de clicuri din imagini. Adăugați următoarele sub addListeners () funcția pe care ați adăugat-o în pasul de mai sus.
remove removeListeners () pentru (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).off("click"); doFlip () doFlip () este apelată când utilizatorul face clic pe una dintre imagini. Afișează imaginile mari din stânga și din dreapta zonei principale de gamplare și apoi apelează o funcție checkForMatch () care verifică dacă imaginile se potrivesc.
Adăugați următoarele sub removeListeners () funcția pe care ați adăugat-o în pasul de mai sus.
funcția doFlip (e) var theCard = e.target; $ (cartea) .attr ("src", card.imageSource); ('' # ')' css ('imageI') css ('backgroundImage') == "none") $ (' ; altceva $ ('# image2'). css ('backgroundImage', 'url (' +Card.imageSource + ')'); dacă (flickrGame.chosenCards.indexOf (Cardul) == -1) flickrGame.chosenCards.push (Cardul); $ (TheCard) .off ( "clic"); dacă (flickrGame.chosenCards.length == 2) removeListeners (); checkForMatch (); Mai întâi primim o referință la care carte a fost făcută clic și a fost setată src atribuiți URL-ului imaginii reale (mai degrabă decât sigla Flickr).
Apoi, verificăm dacă fundalul CSS al imaginii mari din stânga (# image1) este egal cu "nici unul", și dacă ne-am setat imaginea de fundal la aceeași imagine ca cardul am făcut clic pe. Dacă nu este egală cu "niciuna", atunci înseamnă că a fost făcută clic pe o carte, așadar am setat imaginea de fundal a imaginii mari pe dreapta.
Verificăm dacă chosenCards array (pe care o vom adăuga într-o clipă) nu conține deja această carte, pentru menținerea în siguranță a casei și apoi împingeți-o pe matrice. De asemenea, eliminăm evenimentul de clic de pe card, astfel încât să nu poată da clic pe acesta din nou.
În cazul în care chosenCards lungimea este egală cu 2 înseamnă că utilizatorul a ales două cărți, așa că sunăm removeListeners () pentru a elimina evenimentul de clic din restul cardurilor și apelarea checkForMatch () (pe care o vom codifica în pasul următor) pentru a vedea dacă cărțile selectate se potrivesc.
Trebuie să adăugăm chosenCards array la noi flickrGame obiect, așa facem acum:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imaginile: [], selectCards: []
Asigurați-vă că adăugați o virgulă după imaginile[].
checkForMatch () checkForMatch () Funcția verifică dacă cele două cărți clicate se potrivesc. Dacă o fac, atunci îi "ascundem"; dacă nu, atunci adăugăm ascultătorii înapoi la cărțile rămase și lăsăm jucătorului să plece.
Adăugați următoarele sub doFlip () funcția pe care ați adăugat-o în pasul de mai sus:
funcția checkForMatch () if (flickrGame.chosenCards.length == 2) if ($ ("# image1") css ("background-image") == $ (" imagine ')) setTimeout (ascundeCard, 1000); altceva setTimeout (resetImages, 1000); Aici, verificăm dacă chosenCards lungimea este egală cu 2. Dacă este, verificăm dacă cele două imagini mari sunt aceleași prin utilizarea lor imagine de fundal. (Am fi putut folosi imaginile mai mici, ca un exercițiu, vezi dacă poți face asta.)
Dacă imaginile se potrivesc, folosim setTimeout () pentru a apela hideCards () după o secundă; altfel suntem resetImages () după o secundă. Prin întârzierea acestor apeluri de funcții, adăugăm o pauză foarte scurtă jocului.
Vom codifica funcțiile pentru a ascunde cardurile și a reseta imaginile următoare.
hideCards () În cazul în care utilizatorul a comparat două cărți, le ascundem pe amândouă și le-am adăugat pe ascultătorii de clic înapoi la restul cărților.
Adăugați următorul cod sub checkForMatch () funcția pe care ați creat-o în pasul de mai sus:
funcția hideCards () $ (flickrGame.chosenCards [0]) animate ('opacity': '0'); $ (flickrGame.chosenCards [1]). animați ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ css ("imagine-imagine", "none"); $ css ("imagine-imagine", "none"); addListeners (); flickrGame.chosenCards = Array nou (); Folosim metoda jQuery's animate () pentru a spori opacitatea celor două cărți la 0, ceea ce le face să pară să se estompeze. De asemenea, eliminăm imaginile din imaginile array, resetați fundalul imaginilor mari la "none", adăugați ascultătorii înapoi la celelalte imagini și resetați-ne chosenCards mulțime.
Încercați-l aici.
resetImages () Această funcție este executată dacă cele două imagini selectate nu se potrivesc. Restabilește imaginile mici " src atribute înapoi la "cardFront.png", setarea fondului de imagini mari la "none", adăugarea ascultătorilor înapoi la carduri și resetarea chosenCards mulțime.
Adăugați următoarele sub hideCards funcția pe care ați adăugat-o în pasul de mai sus.
funcția resetImages () $ (flickrGame.chosenCards [0]) attr ("src", "cardFront.png"); $ (flickrGame.chosenCards [1]) .attr ("src", "cardFront.png"); $ css ("imagine-imagine", "none"); $ css ("imagine-imagine", "none"); addListeners (); flickrGame.chosenCards = Array nou (); Puteți juca de fapt jocul acum - cu excepția faptului că imaginile sunt afișate. Pentru a schimba asta înapoi, modificați preloadImages () funcționează ca atare:
funcția preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pentru (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();
(Este bine să schimbați acest lucru înainte și înapoi pentru testare ușoară.)
Iată rezultatul!
Acesta este sfârșitul primei părți a acestui tutorial. Până acum, ați realizat un joc funcțional HTML5; în partea următoare, veți adăuga poloneză, învățând cum să:
Ne vedem atunci!
