Share
I denne opplæringen tar vi et grunnleggende nettleserspill (som vi bygget i en Tuts + Premium-opplæring), og legg til fremdriftsfelt, en forhåndslaster, en splash-skjerm og mye mer polsk.
I denne Tuts + Premium-opplæringen bygget vi et grunnleggende kortspill med JavaScript, hvis bilder kom fra Flickr. Sjekk ut demoen:
Klikk for å prøve spillet som det er nå.
I denne opplæringen legger vi mye polsk til spillet, ved å implementere en forhåndslaster og fremdriftslinje, en splash-skjerm og et søkeordssøk. Ta en titt på hvordan spillet vil vise seg:
Klikk for å prøve spillet med forbedringene vi legger til.
I denne opplæringen lærer du JavaScript og HTML som er nødvendig for å kode alle disse forbedringene. Last ned kildefilene og hent mappen som heter Start her; Dette inneholder all koden fra slutten av Premium-opplæringen.
I flickrgame.js det kalles en funksjon preloadImage (), som inneholder denne linjen:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
For å teste, endre det til:
tempImage.src = "cardFront.jpg";
Dette vil vise bildene på kortene hele tiden, noe som gjør testing enklere. Du kan endre dette når som helst.
Nå, les videre!
Accentsconagua
addKeyPress () Akkurat nå har vi tagget "hund" hardkodd, men spillet vil bli kjedelig fort hvis vi tvinger brukeren til å bruke hundebilder hele tiden!
Søkeinngangen har satt der og ser pen ut, men er helt ufunksjonell hele tiden. La oss fikse det. Vi vil høre brukeren å trykke Enter-tasten og deretter ringe til doSearch () metode ved hjelp av hva de skrev inn for å ringe Flickr API.
Legg til følgende under resetImages () funksjon, i flickrgame.js.
funksjon addKeyPress () $ (dokument) .on ("tastetrykk", funksjon (e) hvis (e.keyCode == 13) doSearch ();); Her lytter vi etter en tastetrykk, og hvis nøkkelkode er lik 13, vi vet at de trykket på Enter-tasten så vi kaller doSearch () funksjon.
Vi må endre doSearch funksjon for å bruke teksten i inngangen, så gjør følgende endringer:
funksjon doSearch () if ($ ("# searchterm"). val ()! = "") $ (dokument) .off ("tastetrykk"); 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); Her kontrollerer vi først at inngangen ikke er tom (vi vil ikke søke etter noe), da fjerner vi tastetrykk lytteren. Endelig endrer vi tags for å bruke inntastens verdi.
Det siste vi må gjøre er å fjerne anropet til doSearch () i JS-filen. Finn hvor vi ringer manuelt doSearch () og fjern den. (Det er rett etter addKeyPress () funksjon.)
Ikke glem å faktisk ringe addKeyPress () funksjon. Jeg ringte det rett under der jeg forklarte det.
funksjon addKeyPress () $ (dokument) .on ("tastetrykk", funksjon (e) hvis (e.keyCode == 13) doSearch ();); addKeyPress (); Nå, hvis du tester spillet, vil du ikke se noen bilder før du gjør et søk.
Når vi foretar vår første samtale til Flickrs API, er det en liten forsinkelse. Vi vil vise en animert GIF (en "throbber") mens vi kontakter serveren, og fjern den når samtalen kommer tilbake.
Legg til følgende i doSearch () funksjon.
funksjon doSearch () if ($ ("# searchterm"). val ()! = "") $ (dokument) .off ("tastetrykk"); $ ("# infoprogress"). css ('synlighet': 'synlig'); 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); Dette setter #infoprogress div for å være synlig. Når informasjonen kommer tilbake fra Flickr, vil vi gjemme det. For å gjøre det, legg til følgende kode i setImages () funksjon:
funksjon setImages (data) $ ("# infoprogress"). css ('synlighet': 'skjult'); $ .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 du tester spillet nå, bør du se lastebildevisningen mens du kontakter Flickr API.
Vi trenger å få informasjonen for hvert bilde vi bruker. Vi ringer til Fremgangsmåten = flickr.photos.getInfo på hvert bilde, og ring deretter infoLoaded () Funger hver gang informasjonen lastes inn. Når informasjonen for hver bildet har lastet, fortsetter spillet som før.
Det er mye nytt informasjon å ta inn her, så vi vil bryte det ned trinnvis. Først legger du til følgende i setImages () funksjon:
funksjon setImages (data) $ ("# infoprogress"). css ('synlighet': 'skjult'); hvis (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('synlighet': 'skjult'); $ .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); 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);); ellers alert ("IKKE NÅR BILDER VAR TILBAKE"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Nå som vi får taggene fra brukeren, bør vi sørge for at nok bilder ble returnert for å lage et enkelt spill (12). Hvis ja, skjuler vi innspillet slik at spilleren ikke kan gjøre et annet søk midt i spillet. Vi setter en variabel getPhotoInfoURL og bruk Fremgangsmåten = flickr.photos.getInfo - Legg merke til at vi bruker item.id for photo_id. Vi bruker deretter jQuery's getJSON metode og samtale infoLoaded.
Hvis ikke nok bilder ble returnert, kaster vi et varsel og anrop addKeyPress () slik at brukeren kan gjøre et nytt søk.
Så vi trenger å vite hvor mange bilder som ble returnert fra samtalen til Flickr API, og vi lagrer dette i variabelen numberPhotosReturned, som vi legger til vår flickrGame gjenstand:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberBilderReturned: 0
(Pass på at du legger til et komma etter selectedCards: [].)
Vi kan ikke teste enda ennå; hvis vi gjorde det, ville vi ringe preloadImages () 36 ganger på rad siden det er alt vårt infoLoaded () funksjonen gjør for øyeblikket. Absolutt ikke hva vi vil. I neste trinn vil vi kutte ut infoLoaded () funksjon.
infoLoaded () De infoLoaded () funksjonen mottar informasjon om et enkelt bilde. Den legger til informasjonen til imageArray for riktig foto, og holder oversikt over hvor mange bilder info er lastet inn; hvis dette tallet er lik numberPhotosReturned, det ringer preloadImages ().
Slett anropet til preloadImages () og sett følgende inne i infoLoaded () funksjon:
flickrGame.imageNum + = 1; varindeks = 0; for (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();
Her øker vi imageNum variabel og sett en variabel index lik 0. Innenfor forløp kontrollerer vi for å se om PHOTOID i imageArray er lik den data.photo.id (husk data er en JSON-representasjon av det aktuelle bildet som behandles). Hvis de passer, setter vi inn index lik Jeg og oppdater riktig indeks i imageArray med en brukernavn og photoURL variabel. Vi trenger denne informasjonen når vi viser bildeattributtene senere.
Dette kan virke litt forvirrende, men alt vi gjør er å samsvare med bildene. Siden vi ikke vet hvilken rekkefølge de skal returneres fra serveren, sørger vi for at deres ID-kamp er, og da kan vi legge til brukernavn og photoURL variabler til bildet.
Til slutt, vi sjekker om imageNum er lik den numberPhotosReturned, og hvis det er så har alle bildene blitt behandlet så vi ringer preloadImages ().
Ikke glem å legge til imageNum til flickrGame gjenstand.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberBilderReturned: 0, imageNum: 0
(Pass på at du legger til et komma etter nummerBilderReturnert: 0.)
Hvis du tester nå, vil det ta litt lengre tid for deg å se bildene. På toppen av å ringe Flickr API for å hente bildene, får vi nå informasjon om hver enkelt av dem.
I dette trinnet får vi fremdriftslinjen som viser når vi legger inn bildeinformasjonen.
Legg til følgende kode i setImages () funksjon:
funksjon setImages (data) $ ("# infoprogress"). css ('synlighet': 'skjult'); $ ("# progressdiv"). css ('synlighet': 'synlig'); $ ("# progressdiv p"). tekst ("Loading Photo Information"); hvis (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('synlighet': 'skjult'); $ .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); 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);); ellers $ ("# progressdiv"). css ('synlighet': 'skjult'); varsling ("IKKE NÅR BILDER VAR TILBAKE"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Dette viser #progressdiv og endrer avsnittets tekst i #progressdiv for å lese "Laster bildeinformasjon". Hvis ikke nok bilder ble returnert skjuler vi #progressdiv.
Deretter legger du til følgende i infoLoaded () funksjon:
funksjon infoLadet (data) flickrGame.imageNum + = 1; var prosent = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ ("# progressbar"). fremdriftslinje (verdi: prosentandel); varindeks = 0; for (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(); Her setter vi en variabel prosentdel lik Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); Dette gjør at vi får et tall mellom 0 og 100. Så kaller vi $ ( "# Progressbar"). Progressbar () og sett verdi eiendom lik prosentdel.
Nå, hvis du tester spillet, skal det fungere som før, men med en fremdriftslinje. Vel, det er ett problem: fremdriftslinjen stikker rundt etter at bildene er trukket. I spillet legger vi først bildeinformasjonen, så laster vi inn bildene, og begge bruker fremdriftslinjen. Vi vil fikse dette i neste trinn.
I dette trinnet vil vi utlilize jQuery.imgpreload plugin (det er allerede i kilde nedlasting). Så snart all filinformasjon fra trinnene ovenfor er lastet, nullstiller fremdriftslinjen seg selv og overvåker lastingen av bildene.
Legg til følgende 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); $("#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(); ); Her setter vi #progressdiv å være synlig og endre avsnittet for å lese "Laster inn bilder". Vi oppretter en midlertidig rekkefølge og legger til de midlertidige bildene 'URL-ene til den, så send hele oppsettet til $ .imgpreload å sparke forspenningen.
De Hver funksjonen blir kjørt hver gang et bilde er forhåndslastet, og alle funksjonen blir kjørt når alle bildene er forhåndslastet. Innsiden Hver() vi sjekker for å forsikre deg om at bildet faktisk ble lastet, øke numImagesLoaded variabel, og bruk samme metode for prosentandelen og fremdriftslinjen som før. (De totalImages er 12 siden det hvor mange vi bruker per spill.)
Når alle bildene er forhåndslastet (det vil si når alle() er kjørt) satt vi #progessdiv å skjule og ringe drawImages () funksjon.
Vi må legge til numImagesLoaded og totalImages variabler til vår flickrGame gjenstand:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberBilderReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12
(Pass på at du legger til kommaet etter imageNum.)
Hvis du tester spillet nå, bør du se fremdriftslinjen for både bildeinformasjonen og for forhåndsbelastning av bildene.
For å overholde Flickr APIs vilkår for bruk, må vi vise attributtene for bildene vi bruker. (Det er også høflig å gjøre det.)
Legg til følgende kode i hideCards () funksjon:
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'); hvis (flickrGame.theImages.length == 0) $ ("# gamediv img.card"). fjern (); $ ("# gamediv"). css ('synlighet': 'skjult'); showAttributions (); addListeners (); flickrGame.chosenCards = new Array (); Her ser vi om antall bilder som er igjen er null, og i så fall vet vi at brukeren har passet alle kortene. Vi fjerner derfor alle kortene fra DOM og setter #gamediv å være skjult. Så kaller vi showAttributions () funksjon som vi vil kode neste.
I dette trinnet vil vi kode på showAttributions () funksjon.
Legg til følgende under checkForMatch () funksjonen du kodet i trinnene ovenfor:
funksjon showAttributions () $ ("# attributionsdiv"). css ('synlighet': 'synlig'); $ ("# attributionsdiv div"). hver (funksjon (indeks) $ (dette) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). neste (). html 'Brukernavn: '+ flickrGame.tempImages [index] .username +'
'+' Se bilde '); ); Her setter vi #attributionsdiv å være synlig, og deretter gå gjennom hver div i den. Det er 12 div, hver med et bilde og et avsnitt; vi bruker jQuery's finne() metode for å finne img innenfor div, sett den src av bildet til riktig Bildeadresse, og bruk jQuery's neste () metode for å angi brukernavn og photoURL til info fra Flickr.
Her er lenker til jQuery's find () og next () metoder, slik at du kan lære mer om dem.
Hvis du tester spillet nå og spiller gjennom et nivå, ser du attributtene med en lenke til bildet på Flickr. Du vil også se to knapper: ett for neste nivå og ett for et nytt spill. Vi vil få disse knappene til å fungere i de neste trinnene.
I vår samtale til Flickr API settes per side til 36, for å be om at mange bilder samtidig. Siden vi bruker 12 bilder per spill, betyr dette at det kan være opptil tre nivåer. I dette trinnet vil vi få knappen Next Level til å fungere.
Legg til følgende kode i setImages () funksjon:
funksjon setImages (data) // ... snip ... flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
Vi trenger å vite hvor mange nivåer spillet vil ha. Dette avhenger av hvor mange bilder som ble returnert fra vårt søk. Det vil ikke alltid være 36. For eksempel søkte jeg etter "hmmmm" og det returnerte om 21 bilder på den tiden. Vi skal bruke Math.floor () å runde nummeret ned - vi vil ikke ha 2,456787 nivåer, og det vil kaste spilllogikken langt unna.
Pass på at du legger til numberLevels variabel til flickrGame gjenstand:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberBilderReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0
(Ikke glem å legge til komma etter totalImages: 12.)
Endre nå drawImages () fungere som følger:
funksjon drawImages () flickrGame.currentLevel + = 1; $ ("# leveldiv"). css ('synlighet': 'synlig'). html ("Level" + flickrGame.currentLevel + "of" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Her øker vi nåværende nivå variabel, sett inn #leveldiv å være synlig og sett HTML av div for å lese hvilket nivå vi er på og hvor mange nivåer det er.
Igjen, vi må legge til nåværende nivå variabel til vår flickrGame gjenstand.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberBilderReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0, nåværende nivå: 0
(Jeg er sikker på at du ikke trenger å minne om nå, men sørg for at du legger til kommaet etterpå numberLevels: 0.)
Endre nå showAttributions () funksjon til følgende:
funksjon showAttributions () $ ("# leveldiv"). css ('synlighet': 'skjult'); $ ("# attributionsdiv"). css ('synlighet': 'synlig'); hvis (flickrGame.currentLevel == flickrGame.numberLevels) $ ("# nextlevel_btn"). css ('synlighet': 'skjult'); ellers $ ("# nextlevel_btn"). css ('synlighet': 'synlig'); $ ("# attributionsdiv div"). hver (funksjon (indeks) $ (dette) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl); $ (dette). finne ( 'p'). html ('Brukernavn: '+ flickrGame.tempImages [index] .username +'
'+' Se bilde '); ); Vi skjuler #leveldiv ved å sette sin synlighet til skjult.
Deretter sjekker vi om nåværende nivå er lik den numberLevels. Hvis de er like, er det ikke flere tilgjengelige nivåer, så vi skjuler #nextlevel_btn; ellers viser vi det.
Til slutt må vi koble opp #nextlevel_btn. Legg til følgende kode under addKeyPress () Funksjonen du opprettet i trinnet ovenfor:
$ ("# nextlevel_btn"). ("klikk", funksjon (e) $ (dette) .css ('synlighet': 'skjult'); $ ("# gamediv"). css ':' synlig '); $ ("# attributionsdiv"). css (' synlighet ':' skjult '); flickrGame.numImagesLoaded = 0; preloadImages ();); Her skjuler vi knappen, avslører #gamediv, gjem #attributionsdiv, tilbakestill numImagesLoaded variabel og ring preloadImages () som tar tak i de neste 12 bildene.
Du kan teste spillet nå og skal kunne spille gjennom alle nivåene. Vi vil koble opp #newgame_btn i de kommende trinnene.
Du kan starte et nytt spill når som helst, men etter at alle nivåene har blitt spilt, er det eneste alternativet. I dette trinnet vil vi koble opp #newgame_btn.
Legg til følgende under koden for #nextlevel_btn du la til i trinnet ovenfor:
$ ("# newgame_btn") på ("klikk", funksjon (e) $ ("# gamediv"). css ('synlighet': 'synlig'); $ ("# leveldiv"). css ('synlighet': 'skjult'); $ ("# attributionsdiv"). css ('synlighet': 'skjult') ); $ ("# nextlevel_btn"). css ('synlighet': 'skjult'); flickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = nytt Array (); flickrGame.currentLevel = 0 ; flickrGame.numberLevels = 0; addKeyPress ();); Her avslører vi #gamediv, gjem #leveldiv og #attributionsdiv, avsløre #searchdiv, og skjul #nextlevel_btn. Vi nullstiller noen variabler og ringer addKeyPress () slik at brukeren kan søke igjen.
Hvis du tester nå, bør du kunne starte et nytt spill når som helst, så vel som når alle nivåer har blitt spilt.
Spillet er komplett når det gjelder spill, men vi må vise en splash-skjerm. Vi gjør dette i neste trinn.
Vi må gjøre noen endringer i vår CSS-fil. Spesielt må vi sette #gamediv synlighet til skjult, og angi #introscreen å synliggjøre. Åpen stiler / game.css og gjør disse endringene nå:
#gamediv posisjon: absolutt; venstre: 150px; bredde: 600 piksler; høyde: 375px; grense: 1 px solid svart; padding: 10px; color: # FF0080; synlighet: skjult; bakgrunn: #FFFFFF url ('... /pattern.png'); #introscreen posisjon: absolutt; venstre: 150px; bredde: 600 piksler; høyde: 375px; grense: 1 px solid svart; padding-top: 10px; color: # FF0080; synlighet: synlig; bakgrunn: #FFFFFF url ('... /pattern.png'); padding-left: 80px; Neste må vi endre addKeyPress () funksjon. Fjern alt fra addKeyPress () og erstatt den med følgende:
funksjon addKeyPress () $ (dokument) .on ("tastetrykk", funksjon (e) hvis (e.keyCode == 13) hvis (! flickrGame.gameStarted) hideIntroScreen (); annet doSearch (); flickrGame.gameStarted = true;); Her kontrollerer vi om brukeren har trykket på Enter-tasten, så kontrollerer vi om spillet har startet. Hvis det ikke har vi ringe hideIntroScreen (); ellers kaller vi doSearch (); Uansett, merker vi spillet etter å ha startet. Dette betyr at første gang brukeren trykker på Enter, vil den ringe hideIntroScreen (), og neste gang brukeren trykker på Enter-tasten, vil den ringe doSearch ().
Nå må vi kode på hideIntroScreen () funksjon. Legg til følgende under addKeyPress () funksjon:
funksjon hideIntroScreen () $ ("# gamediv"). css ('synlighet': 'synlig'); $ ("# introscreen"). css ('synlighet': 'skjult'); Hvis du tester spillet nå, bør du se sprutskjermen. trykk Enter og du kan spille spillet som før.
Akkurat nå hvis nok bilder ikke blir returnert for et spill, oppdager vi et varsel. Selv om dette fungerer, kan vi få det til å se litt finere ut ved hjelp av jQuery UIs dialog.
Vi må redigere index.html, så åpne den og legg til følgende rett inne i #gamediv:
Ikke nok bilder ble returnert, vennligst prøv et annet søkeord.
Nå trenger vi å knytte det inn. Legg til følgende under
hideIntroScreen ()funksjon i JS-filen:$ ("# dialog"). dialog (autoOpen: false);Denne koden konverterer
#dialogdiv inn i en dialog; vi deaktiverer funksjonen for automatisk åpning.Vi vil utløse denne dialogen for å åpne i stedet for varselet vi hadde før, så fjern varselet fra
setImages ()funksjonen og erstatt den med følgende:ellers $ ("# progressdiv"). css ('synlighet': 'skjult'); $ ( "# Dialog") dialog ( 'åpen.'); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Nå, hvis ikke nok bilder returneres, får vi en fin utseende dialog, i stedet for å bruke et varsel som minner om nettsider fra 90-tallet.
Ikke glem å endre denne linjen, fra
preloadImages ():tempImage.src = "cardFront.jpg";... tilbake til dette:
tempImage.src = flickrGame.tempImages [i] .imageUrl;... ellers vil spillet bli litt for enkelt!
Test nå det siste spillet. Hvis noe ikke er helt riktig, kan du alltid sammenligne din kilde til min, eller stille et spørsmål i kommentarene.
Konklusjon
Vi har kodet et morsomt lite spill ved hjelp av bilder fra Flickr API, og gitt det et anstendig lag eller to av polish. Jeg håper du likte denne opplæringen og lærte noe som var verdt. Takk for å lese og ha det gøy!
