Share
I denne todelte opplæringen lærer du hvordan du bruker JavaScript og HTML for å lage et kortspill som drives av Flickr API. Sjekk ut demoen, og les videre!
For å kunne bruke Flickr API må du være registrert bruker på flickr.com. Fra hjemmesiden til Flickr klikker du på Registrer-lenken.
Når du er logget inn, må du besøke App Garden for å komme i gang.
Du vil ønske å bokmerke denne siden hvis du planlegger å gjøre mye Flickr-utvikling, da det inneholder mye nyttig informasjon for utviklere.
Klikk på koblingen "Opprett en app" når du kommer til App Garden.
Under "Få API-nøkkelen din" klikker du koblingen "Be om en API-nøkkel".
Her må du velge om du har tenkt å bruke appen for kommersielle eller ikke-kommersielle formål. For dette spillet valgte jeg ikke-kommersiell.
Neste blir du tatt til Appdetaljer-siden. Skriv inn navnet på appen din og en beskrivelse av hva appen din gjør, godta avtalene og klikk på Send-knappen.
Deretter vil du bli presentert med nøkkelen din og din hemmelighet. Vi vil ikke bruke den hemmelige nøkkelen her, siden vår app ikke krever godkjenning. Legg merke til API-nøkkelen din, ettersom vi trenger det for resten av denne opplæringen.
Flickr har en REST API for utviklere. Vi bruker disse to metodene fra API: et:
De flickr.photos.search Metode vil tillate oss å søke etter bilder, mens flickr.photos.getInfo Metoden vil tillate oss å få informasjon om et enkelt bilde, for eksempel brukernavn (eier) av bildet, tittel på bildet og nettadressen til fotografens side på Flickr.
Hvis du besøker en av koblingene ovenfor, nederst på siden, er det en lenke til API Explorer hvor du kan skrive inn noen data og få et eksempelrespons.
Bildet ovenfor er for flickr.photos.search metode. Gå videre og klikk på linken nå.
Det er mange alternativer, og det kan virke overveldende, men alt vi er interessert i for denne opplæringen er alternativet "koder"; Jeg kom inn i "hunden" i søkeboksen for etiketter. Velg JSON som utgangsmetode, da vi skal bruke JSON i denne opplæringen.
Til slutt trykker du på "Ring Metode" -knappen, og et eksempel på svaret blir returnert. Her er en del av typen data du kan forvente å motta - de siste linjene er kuttet ut:
"sider": "49825", "per side": 100, "totalt": "4982408", "bilde": ["id": "7338255166", "eier ":" 45596890 @ N00 "," hemmelig ":" 5f145a92b8 "," server ":" 7083 "," gård ": 8," tittel ":" Cute Rhea "," ispublic ": 1," isfriend ": 0 , "isfamily": 0, "id": "7338254718", "eier": "45596890 @ N00", "hemmelig": "9e1da794a3", "server": "7223" tittel ":" Rhea chewing "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338258850 "," eier ":" 8672236 @ N04 "," hemmelig " "domenet": "", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": " 7338271122 "," eier ":" 49270434 @ N08 "," hemmelig ":" 30876cfdf6 "," server ":" 7236 "," gård ": 8," tittel ":" 286 "," ispublic " isfamilie ": 0," isfamily ": 0," id ":" 7338235972 "," eier ":" 8640124 @ N02 "," hemmelig ":" a583d6aa48 "," server ":" 7085 " : 8, "title": "Y: 4 Day 123: Wind sweeps", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7330075254", "eier" "32081016 @ N07", "hemmelig": "04cb99 e8a7 "," server ":" 7239 "," farm ": 8," title ":" Mad dogs and Englishmen ... "," ispublic ": 1," isfriend ": 0," isfamily ": 0 id ":" 7338229968 "," eier ":" 67178219 @ N06 "," hemmelig ":" 92b4be222a "," server ":" 7095 "," gård ": 8," tittel ":" Le petit chien dans la prairie "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338185610 "," eier ":" 7315798 @ N04 "," hemmelig ":" 9a91bd1280 " ":" 7224 "," gård ": 8," tittel ":" snuggle "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338111264 " ":" 80044484 @ N06 "," hemmelig ":" f795c559e3 "," server ":" 7214 "," gård ": 8," tittel ":" DSC_0408 "," ispublic ": 1," isfriend " "isfamily": 0, "id": "7338135744", "eier": "80023312 @ N07", "hemmelig": "d37c015be6", "server": "7234", "gård": 8, "tittel ":" 0007_Ridgeback "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338136008 "," eier ":" 80023312 @ N07 "," hemmelig ":" 259e50ebaa "," server ":" 7219 "," gård ": 8," tittel ":" 0003_Pug "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 73 38133290 "," eier ":" 80044484 @ N06 "," hemmelig ":" a2e954aab0 "," server ":" 7098 "," gård ": 8," tittel ":" _DSC0032 "," ispublic ": 1, isfriend ": 0," isfamily ": 0," id ":" 7338142010 "," eier ":" 80023312 @ N07 "," hemmelig ":" 34809c804f "," server ":" 7071 " : "," "0", "id": "7338014824", "eier": "36700168 @ N04", " hemmelig ":" 2625ab12a4 "," server ":" 8164 "," gård ": 9," tittel ":" Nosferatus "hund", "ispublic": 1, "isfriend": 0, "isfamily": 0 "id": "7338092614", "eier": "80023312 @ N07", "hemmelig": "ee7210e0f1", "server": "8010", "gård": 9, "tittel": "0002_GreatDane" ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338120200 "," eier ":" 80023312 @ N07 "," hemmelig ":" 38b5c49f4f "," server " 7245 "," gård ": 8," tittel ":" 0006_Cavalier "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338159814 " 7315798 @ N04 "," hemmelig ":" 327e97cb13 "," server ":" 7104 "," gård ": 8," tittel ":" Puppy Love "," ispublic ": 1," isfriend " 0, "isfamily": 0,
Vi bruker dataene fra svaret til å konstruere våre URLS til bildene. Nettadressene tar dette skjemaet:
http: // farm farm-id .static.flickr.com / server-id / id _ hemmelig _ [mstzb] JPG
For å lage en brukbar nettadresse erstatter vi bare hva som er inne i med dataene vi får fra ovenfor. For eksempel, det første elementet fra bilde array inne ovenfor JSON er:
"id": "7338255166", "eier": "45596890 @ N00", "hemmelig": "5f145a92b8", "server": "7083", "gård": 8, "tittel": "Cute Rhea" "ispublic": 1, "isfriend": 0, "isfamily": 0
... så nettadressen vi trenger å konstruere er dette:
http://farm8.static.flickr.com/7083/7338255166_5f145a92b8_q.jpg
"Q" angir størrelsen på bildet: 150x150px.
Denne lenken fører til dette bildet. Mer informasjon om nettadressene finnes i Flickr Dokumentasjon for Photo Source URLS.
I kilde nedlastingen er det en ZIP-fil kalt "StartHere.zip" som inneholder filene alle lagt ut for deg, klar til å legge til noen kode. Du kan bla gjennom disse filene for å få en ide om prosjektets struktur. Jeg har også tatt med en "README.txt" som forklarer strukturen mer detaljert.
Vi bruker følgende JavaScript-biblioteker i dette prosjektet. Du kan laste dem ned separat hvis du ønsker det.
Accentsconagua
document.ready () I "js" -mappen finner du et JavaScript-filnavn "flickrgame.js". Legg til følgende kode i denne filen.
$ (dokument) .ready (funksjon () alarm ("Klar");); Hvis du tester «index.html» siden nå, bør du se et varsel med ordet "Klar".
Denne koden bruker jQuery's .klar() metode, som blir sparket når DOM har fullstendig lastet. Det er viktig å ringe denne metoden når du koder appene dine, fordi du må sørge for at DOM er lastet inn før du prøver å manipulere det. Hvis du for eksempel prøvde å legge til en klikkhendelseshåndterer til en knapp før DOM ble lastet og klar, ville det ikke ha noen effekt.
flickrGame Objekt LiteralVi skal bruke et objekt som heter flickrGame for å holde alle våre variabler ryddige og ryddige og ut av det globale navneområdet.
Skriv inn følgende kode i $ (Document) .ready () du la til i trinnet ovenfor, erstatte varselet.
$ (dokument) .ready (funksjon () var flickrGame = );
Innen flickrGame objektet bokstavelig legg til følgende kode. Bytt ut "API-KEY" med API-nøkkelen du mottok da du registrerte deg.
$ (dokument) .ready (funksjon () var flickrGame = APIKEY: "DIN API KEY");
doSearch () De doSearch () Metoden vil ringe til Flickr API. Skriv inn følgende under flickrGame objektet bokstavelig definisjon (men fortsatt inne i $ Document.ready () funksjon):
funksjon doSearch () var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags = hund" searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages);
Her bygger vi opp spørringen vår for steg. Vi peker på searchURL variabel til flickr.photos.search-metoden i Flickr API.
Som det er en REST API, for å ringe det, trenger vi bare å konstruere en URL med de nødvendige parametrene. Så, her bruker vi flickr.photos.search metode, og be om bilder merket med "hund". Vi har satt formatet til "json" og satt "jsoncallback =?", Som gjør tilbakeringingsfunksjonen utført så snart dataene blir spilt tilbake.
Ved å sette lisensparameteren tp 5,7 Vi ber Flickr å bare gi oss bilder med en Attribution-ShareAlike lisens eller uten kjente opphavsrettigheter.
Vi bruker deretter jQuery's $ .getJSON () -metode, passerer i vår searchURL og en henvisning til tilbakeringingsfunksjonen setImages () som vi vil kode neste.
setImages () I dette trinnet vil vi kode på setImages () funksjon og se resultatene vi kommer tilbake fra Flickr. Skriv inn følgende kode under doSearch () funksjonen du har lagt til i trinnet ovenfor.
funksjon setImages (data) var tempString = ""; $ .each (data.photos.photo, funksjon (jeg, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; tempString + = imageURL + "
";); $ (" # urls "). html (tempString);
Her initialiserer vi en variabel tempString som vil holde nettadressene vi får fra flickr. Innenfor hvert objekt, parameteren data holder JSON som ble returnert fra samtalen til Flickr API, slik det er beskrevet i trinn 3 - slik at vi kan se at de enkelte fotobjektene finnes i data.photos.photo.
Vi kan bruke jQuery's $ .each () -metode til å løpe gjennom hvert JSON-fotoobjekt som ble returnert. Inne i løkken konstruerer vi imageurl, igjen som beskrevet i trinn 3, legg det til tempString, og til slutt produksjon tempString til div som heter "urls" ved direkte å endre HTML av div.
Poenget her er å se hvilke nettadresser vi får fra vår samtale til Flickr API. Hvis du følger med kildekoden, la jeg til en div med id = "URL-adresser" så vi kunne se dette på nettsiden. (Jeg vil fjerne den i neste trinn.)
Til slutt, for å se det, må vi ringe vår doSearch () funksjon. Legg til dette rett under setImages () funksjon.
doSearch ();
Du kan teste det her. Det kan ta et sekund eller to før du ser disse dataene, avhengig av tilkoblingshastigheten. Nedenfor er de første nettadressene returnert, hvis du ikke følger med kildekoden.
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
Vi lagrer alle nettadressene vi kommer tilbake fra Flickr i en matrise, i stedet for fastkjørt sammen som en enkelt streng. Legg til følgende i flickrGame gjenstand.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: []
(Pass på at du legger til kommaet etter APIKEY: "DIN API KEY".)
Legg nå følgende i setImages () funksjon. Jeg fjernet koden fra det forrige trinnet, som det var bare for demonstrasjonsformål.
$ .each (data.photos.photo, funksjon (jeg, element) 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););
Her skyver vi imageurl og item.id på imageArray ved hjelp av tastene Bildeadresse og PHOTOID henholdsvis. Vi trenger Bildeadresse å konstruere våre bilder, og PHOTOID vil bli brukt til å identifisere det aktuelle bildet. Vi må også vise en attribusjon for bildene vi bruker, og ved å ha deres id kan vi koble brukeren til bildet på Flickr.
Behovet for alle disse dataene blir tydeligere da vi beveger oss gjennom opplæringen, så vær ikke bekymret for mye om det for nå.
infoLoaded () De infoLoaded () funksjonen vil bli brukt til å laste inn informasjonen til bildene. Etter at all bildeinformasjon er lastet inn, infoLoaded () vil ringe en funksjon som heter preloadImages () som vil forhåndsbelaste bildene.
Når alle bildene har blitt forhåndslastet, ringer vi drawImages (), som plasserer bildene på skjermen, og spillet begynner.
Legg til følgende under setImages () funksjon.
funksjon infoLadet (data)
De data parameteren vil holde JSON av hvert bestemt bilde. Vi kommer tilbake til dette litt; for nå vil vi bare bruke denne funksjonen til å ringe preloadImages () direkte. Gå videre og legg til anropet nå:
funksjon infoLoaded (data) preloadImages ();
preloadImages () De preloadImages () funksjonen vil bli brukt til å lage og forhåndsbelaste bildene for starten av spillet, og for hvert nivå. Vi forhåndslaster dem, så det er ingen forsinkelser mellom når vi viser bildene og når de laster ned.
Vi kommer tilbake til forhåndsbelaste koden senere. For nå vil vi bare lage de første 12 bildene for starten av spillet. Vi trenger et nytt utvalg for å holde disse 12 bildene, så legg til følgende til din flickrGame gjenstand:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: []
Pass på at du legger til et komma etter imageArray: [].
De tempImages array brukes til å holde 12 bilder om gangen. Vårt spill bruker 12 bilder per nivå, og imageArray Har opptil 36 bilder (avhengig av hvor mange vi satt i vårt søk til Flickr). Så vi vil ta tak i 12 bilder fra imageArray og lagre dem inn tempImages.
Legg til følgende kode under infoLoaded () funksjonen du har lagt til i trinnet ovenfor.
funksjon 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);
Her bruker vi javascript-metoden spleise () å trekke 12 bilder ut av imageArray, og legg dem inn i tempImages array. Vi bruker deretter en nestet til sløyfe for å lage 24 bilder.
For hver av disse 24 bildene oppretter vi en ny Bilde, sett sin src til "cardFront.png" (et bilde du vil se før kortet er vendt over), opprett en ny eiendom som heter imageSource som inneholder nettadressen til det faktiske bildet fra Flickr som skal vises, og deretter skyver det inn i matrisen bildene.
Vi må legge til bildene til vår flickrGame objekt, så gjør det nå.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: []
Pass på at du legger til kommaet etter tempImages [].
La oss fortsette å ringe drawImages () fungere også; Når vi har skrevet det, vil dette gjøre bildene på skjermen. Legg til følgende etter det nestede til sløyfe i preloadImages () funksjon.
funksjon 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 () funksjonen setter faktisk bildene på skjermen. Vi shuffle først bildene i bildene array ved hjelp av en funksjon som kalles randSort og legg dem deretter til #gamediv delen av HTML-koden.
Skriv inn følgende kode under flickrGame objektdefinisjon:
funksjon randOrd () return (Math.round (Math.random ()) - 0.5);
Denne funksjonen brukes til å blande bildene. Vi vil ringe til JavaScript sortere() metode på en matrise og passere inn randOrd som parameter. Dette fungerer i utgangspunktet på samme måte som beskrevet i "Sorteringsmetoden" i denne artikkelen.
Legg til følgende under preloadImages () Funksjon du har lagt til i trinnet ovenfor:
funksjon drawImages () flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); Vi kaller typen metode på bildene, passerer i vår randOrd funksjon, deretter loop gjennom bildene, legger til hvert bilde til #gamediv.
Vi bruker jQuery-metoden .attr å legge til en klasse med "kort" til hvert bilde. Hvorfor? Fordi når vi slutter et nivå, fjerner vi kortene fra #gamediv; Dette gir oss en måte å målrette mot bare kortene og ikke alle Bilder.
Her er lenker til jQuery's attr () og appendTo () -metoder, slik at du kan lære mer om dem.
Vi bør være klare til å få noen kort på skjermen på dette tidspunktet. Etter .Hver() ring inn setImages Ring infoLoaded () funksjon og test siden.
funksjon setImages (data) $ .each (data.photos.photo, funksjon (jeg, element) 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 ();
Hvis alt går bra, bør du se 24 bilder med Flickr-logoen på skjermen. Det kan ta et øyeblikk før de viser, fordi vi ringer Flickr API og laster bildene også.
Vi vil gjøre en liten endring i koden slik at vi kan se de faktiske bildene for nå. Endre preloadImages () funksjon for å vise det faktiske bildet i stedet for "cardFront.png":
funksjon 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 spillet nå.
De addListeners () funksjonen vil legge til en klikklytter til hvert av bildene som kaller en funksjon doFlip (), som igjen vil vise bildet under (hvis logoen er for øyeblikket vist).
Legg til følgende under drawImages () Funksjon du har lagt til i trinnet ovenfor:
funksjon addListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).on("click", function (e) doFlip(e); ); Vi legger til lytterne i drawImages () funksjon:
funksjon drawImages () flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Vi trenger en måte å fjerne klikklyttere fra bildene også. Legg til følgende under addListeners () funksjonen du har lagt til i trinnet ovenfor.
funksjon removeListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).off("click"); doFlip () De doFlip () funksjon kalles når brukeren klikker på ett av bildene. Den viser de store bildene til venstre og høyre for det viktigste gamplayområdet, og kaller deretter en funksjon checkForMatch () som sjekker om bildene stemmer overens.
Legg til følgende under removeListeners () funksjonen du har lagt til i trinnet ovenfor.
funksjon doFlip (e) var theCard = e.target; $ (theCard) .attr ("src", theCard.imageSource); hvis ($ ('# image1'). css ('backgroundImage') == "ingen") $ ('# image1'). css ('backgroundImage', 'url (' + theCard.imageSource + ')') ; ellers $ ('# image2'). css ('backgroundImage', 'url (' + theCard.imageSource + ')'); hvis (flickrGame.chosenCards.indexOf (theCard) == -1) flickrGame.chosenCards.push (theCard); $ (TheCard) .off ( "klikk"); hvis (flickrGame.chosenCards.length == 2) removeListeners (); checkForMatch (); Vi får først en referanse til hvilket kort som ble klikket og sett det src Tilskrive URL-adressen til selve bildet (i stedet for Flickr-logoen).
Vi sjekker deretter om CSS-bakgrunnen til det store bildet til venstre (# image1) er lik "ingen", og hvis det er satt vi bakgrunnsbildet til det samme bildet som kortet vi klikket på. Hvis det ikke er lik «ingen», betyr det at et kort er klikket, så vi stiller bakgrunnsbildet til det store bildet på Ikke sant.
Vi sjekker at chosenCards array (som vi legger til i et øyeblikk) ikke allerede inneholder dette kortet, for sikker housekeeping, og deretter skyve den på arrayen. Vi fjerner også klikkhendelsen fra kortet slik at de ikke kan klikke på det igjen.
Hvis chosenCards Lengden er lik 2, det betyr at brukeren har valgt to kort, så vi ringer removeListeners () for å fjerne klikkhendelsen fra resten av kortene og ringe til checkForMatch () funksjon (som vi vil kode i neste trinn) for å se om de valgte kortene stemmer overens.
Vi må legge til chosenCards array til vår flickrGame objekt, så gjør det nå:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: []
Pass på å legge til et komma etter bildene[].
checkForMatch () De checkForMatch () funksjonen sjekker om de to klikkte kortene stemmer overens. Hvis de gjør så skjuler vi dem; Hvis de ikke gjør det, legger vi lytterne tilbake til de resterende kortene og lar spilleren ha en annen tur.
Legg til følgende under doFlip () Funksjon du har lagt til i trinnet ovenfor:
funksjonen checkForMatch () if (flickrGame.chosenCards.length == 2) if ($ ("# image1"). css ('bakgrunnsbilde') == $ ("# image2"). css bilde ')) setTimeout (hideCards, 1000); ellers setTimeout (resetImages, 1000); Her kontrollerer vi om chosenCards lengden er lik 2. Hvis det er, sjekker vi om de to store bildene er de samme ved å bruke deres bakgrunnsbilde. (Vi kunne ha brukt de mindre bildene i stedet, som en øvelse, se om du kan gjøre dette.)
Hvis bildene stemmer overens, bruker vi setTimeout () å ringe hideCards () fungere etter et sekund; ellers kaller vi resetImages () etter et sekund. Ved å forsinke disse funksjonssamtalene legger vi til en veldig kort pause i spillet.
Vi kodes funksjonene for å skjule kortene og tilbakestille bildene neste.
hideCards () Hvis brukeren passet to kort, skjuler vi dem begge, og legger til klikkelyttene tilbake til resten av kortene.
Legg til følgende kode under checkForMatch () Funksjonen du opprettet i trinnet ovenfor:
funksjon 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 ('bakgrunnsbilde', 'ingen'); $ ("# image2"). css ('bakgrunnsbilde', 'ingen'); addListeners (); flickrGame.chosenCards = new Array (); Vi bruker jQuery's animate () -metode for å tween begge kortets opasitet til 0, slik at de ser ut til å falme ut. Vi fjerner også bildene fra bildene array, tilbakestill de store bildene til "ingen", legg til lytterne tilbake til de andre bildene, og tilbakestill vår chosenCards matrise.
Prøv det her.
resetImages () Denne funksjonen kjøres hvis de to valgte bildene ikke stemmer overens. Det tilbakestiller de små bildene ' src attributter tilbake til "cardFront.png", setter de store bildene bakgrunnen til "ingen", legger lytterne tilbake til kortene, og tilbakestiller de chosenCards matrise.
Legg til følgende under hideCards funksjonen du har lagt til i trinnet ovenfor.
Funksjonstilpasninger () $ (flickrGame.chosenCards [0]). Attr ("src", "cardFront.png"); $ (flickrGame.chosenCards [1]). Attr ("src", "cardFront.png"); $ ("# image1"). css ('bakgrunnsbilde', 'ingen'); $ ("# image2"). css ('bakgrunnsbilde', 'ingen'); addListeners (); flickrGame.chosenCards = new Array (); Du kan faktisk spille spillet nå - bortsett fra at bildene vises. For å endre det tilbake, endre preloadImages () fungere som slik:
funksjon 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();
(Det er godt å endre dette frem og tilbake for enkel testing.)
Her er resultatet!
Det er slutten på den første delen av denne opplæringen. Så langt har du laget et funksjonelt HTML5-spill; I neste del legger du til polsk, lærer å:
Ser deg da!
