Finish Av en Flickr-Based Pairs spillet med Javascript
Del
Del
5
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi ta en enkel nettleser spill (som vi bygget i en Tuts + Premium opplæringen), og legge til fremdriftsindikatorer, en preloader, en splash screen, og mye mer polish.
Innledning
I denne Tuts + Premium tutorial, bygde vi en grunnleggende kortspill spillet med Javascript, der bildene kom fra Flickr. Sjekk ut demo:
Klikk for å prøve spillet som det er nå
I denne opplæringen, vil vi legge til en masse polish til spillet, ved. implementere en preloader og fremdriftslinje, en splash skjermen, og et søkeord. Ta en titt på hvordan spillet vil slå ut.
Klikk for å prøve spillet med de forbedringene vi skal legge
I denne opplæringen, vil du lære Javascript og HTML nødvendig å kode alle disse forbedringene. Last ned kildefilene og pakke mappen som heter StartHere; Dette inneholder all koden fra slutten av Premium tutorial
I flickrgame.js er det en funksjon som heter preloadImage (), som inneholder denne linjen:.
tempImage.src = flickrGame.tempImages [i] .imageUrl;
I forbindelse med testing, endre det til:
tempImage.src = "cardFront.jpg";
Dette vil vise bildene på kortene hele tiden, noe som gjør testing mye enklere . Du kan endre dette tilbake når som helst
Nå, les videre
Trinn 1:.! AddKeyPress ()
Akkurat nå har vi merkelappen "hund" hard kodet, men spillet vil bli kjedelig raskt hvis vi tvinge brukeren til å bruke hunden til bilder hele tiden!
Letingen innspill har sittet der og ser pen, men å være helt ikke-fungerende hele denne tiden. La oss fikse det. Vi vil lytte for brukeren å trykke Enter, og deretter ringe doSearch () metode med bruk av hva de har skrevet i å ringe Flickr API.
Legg til følgende under resetImages () -funksjonen, i flickrgame.js .
funksjon addKeyPress () {$ (document) .På ("tastetrykk", funksjon (e) {if (e.keyCode == 13) {doSearch ();}});}
Her kan vi lytte for et tastetrykk, og hvis nøkkelkoder er lik 13, vet vi at de trykket på Enter-tasten, så vi kaller doSearch () -funksjonen.
Vi må endre doSearch funksjonen til å bruke teksten i input, så gjøre følgende endringer:
funksjons doSearch () {if "{$ (document) .off (tastetrykk"); ($ ("# SEARCH") val () = ".!)" Var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# SEARCH") val (.); searchURL + = "& per_page = 36" searchURL + = "& lisens = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); }}
Her sjekker vi først at inngangen er ikke tom (vi ønsker ikke å søke for ingenting), så vi fjerner tastetrykk lytteren. Til slutt, endre vi kodene for å bruke inngangsverdi.
Det siste vi trenger å gjøre er å fjerne kallet til doSearch () i JS-fil. Finn hvor vi manuelt ringer doSearch () og fjern det. (Det er rett etter addKeyPress () -funksjonen.)
Ikke glem å faktisk ringe addKeyPress () -funksjonen. Jeg kalte det rett under der jeg erklærte den
funksjon addKeyPress () {$ (document) .På ("tastetrykk", funksjon (e) {if (e.keyCode == 13) {doSearch ();.}} );} addKeyPress ();
Hvis du nå teste spillet vil du ikke se noen bilder før du gjør et søk
Trinn 2:. Kontakte Server
Når vi gjør vår første samtale til Flickr API er det en liten forsinkelse. Vi vil vise en animert GIF (en "Throbber") mens vi kontakte server, og ta det når samtalen kommer tilbake.
Legg til følgende til doSearch () -funksjonen.
Funksjon doSearch () {if ($ ("# SEARCH") val () = ".") {$ (document) .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 =" + $ ("# SEARCH") val (.); searchURL + = "& per_page = 36" searchURL + = "& lisens = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); }}
Dette setter #infoprogress div å være synlig. Når informasjonen kommer tilbake fra Flickr, vil vi skjule det. For å gjøre dette, legg til følgende kode i de setImages () -funksjonen:
funksjons setImages (data) {$ ("# infoprogress") css ({'synlighet': 'skjult'}).; $ .each (data.photos.photo, funksjon (i, element) {var Bildeadresse = 'http: //gård' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push ({Bildeadresse: Bildeadresse, PHOTOID: item.id});}); infoLoaded ();}
Hvis du teste spillet nå, bør du se loader bildevisning mens kontakter Flickr API
Trinn 3:. Få Photo Info
trenger å få informasjon for hvert bilde vi bruker. Vi vil kalle metoden = flickr.photos.getInfo på hvert bilde, og deretter ringe infoLoaded () -funksjonen hver gang informasjonen er lastet. Når informasjonen for hver Det er mye ny informasjon å ta inn her, så vi vil bryte det ned steg for steg. Først legger følgende til setImages () -funksjonen: Nå som vi får kodene fra brukerens vi bør sørge for nok bilder ble returnert for å gjøre opp et enkelt spill (12). Hvis ja, vi skjule innspill slik at spilleren ikke kan gjøre et nytt søk midt i spillet. Vi setter en variabel getPhotoInfoURL og bruke metoden = flickr.photos.getInfo - varsel om at vi bruker item.id for photo_id. Vi deretter bruke jQuery er getJSON metode, og ringe infoLoaded. Hvis ikke nok bildene ble returnert, kaster vi opp et varsel og kaller addKeyPress () slik at brukeren kan gjøre et nytt søk. Så vi trenger å vite hvor mange bilder ble returnert fra samtalen til Flickr API, og vi lagrer dette i variabelen numberPhotosReturned, som vi legger til vår flickrGame objekt: (Pass på at du legger til et komma etter chosenCards: [].) Vi kan ikke teste ennå; hvis vi gjorde vi ville være å kalle preloadImages () 36 ganger på rad siden det er all vår infoLoaded () -funksjonen gjør i øyeblikket. Definitivt ikke det vi ønsker. I neste trinn vil vi kjøtt ut infoLoaded () -funksjonen infoLoaded () -funksjonen mottar informasjon om et enkelt bilde. Den legger informasjonen til imageArray for riktig bilde, og holder orden på hvor mange bilder 'info er lastet; dersom dette tallet er lik numberPhotosReturned, kaller det preloadImages () Slett kallet til preloadImages () og sette følgende inne i infoLoaded () -funksjonen. Her kan vi øke den imageNum variabel og sette en variabel indeks lik 0. Inne i for loop vi sjekke for å se om PHOTOID i imageArray er lik data.photo.id (huske data er en JSON representasjon av det aktuelle bildet som blir behandlet). Dersom de gjør det vi setter indeksen lik i og oppdatere den aktuelle indeksen i imageArray med brukernavn og photoURL variabel. Vi trenger denne informasjonen når vi viser bilde attribusjoner senere. Dette kan virke litt forvirrende, men alt vi gjør er å matche opp bildene. Siden vi ikke vet i hvilken rekkefølge de vil bli returnert fra serveren vi sørge for at deres id kamp, og da kan vi legge til brukernavn og photoURL variabler på bildet. Til slutt sjekker vi om imageNum er lik numberPhotosReturned, og hvis det er da alle bildene er blitt behandlet så vi kaller preloadImages (). Ikke glem å legge imageNum til flickrGame objektet. (Pass på at du legger til et komma etter numberPhotosReturned: 0.) Hvis du tester nå det vil ta litt lengre tid for deg å se bildene. På toppen av ringer Flickr API for å hente bildene, er vi nå å få informasjon om hver enkelt av dem I dette trinnet vi . vil få fremdriftslinjen viser når vi legg i foto informasjon Legg til følgende kode til setImages () -funksjonen: Dette viser #progressdiv og endrer avsnitts teksten i #progressdiv å lese "Legge Photo Information". . Hvis ikke nok bilder ble returnert vi skjule #progressdiv Neste legge følgende til infoLoaded () -funksjonen: Her har vi satt en variabel andel lik Math.floor (flickrGame.imageNum /flickrGame.numberPhotosReturned * 100); dette gjør at vi får et tall mellom 0 og 100. Så vi kaller $ ("# progressbar"). progressbar () og sett verdien eiendommen lik prosentandel. Hvis du nå teste spillet det skal fungere akkurat som før, men med en fremdriftslinje. Vel, det er ett problem: fremdriftslinjen kjepper rundt etter bildene blir trukket. I spillet vi først legger du i foto informasjon, så vi preload bildene og begge bruker fremdriftslinjen. Vi vil fikse dette i neste trinn I dette trinnet vil vi utlilize den jQuery.imgpreload plugin (det er allerede i kilden nedlasting). Så snart all filinformasjonen fra punktene ovenfor har blitt lastet, fremdriftslinjen tilbakestilles og overvåker lasting av bildene Legg følgende til preloadImages () -funksjonen. Her kan vi sette #progressdiv å være synlige og endre paragraf å lese "Legge bilder". Vi setter opp en midlertidig array og legge de midlertidige bildenes webadresser til den, så pass hele array til $ .imgpreload til kick off forspenning. hver funksjon blir kjørt hver gang et bilde er forhåndslastet, og all funksjon blir kjørt når alle bildene er forhåndsinstallert. Inni hver () vi sjekke at bildet faktisk ble lastet, øke den numImagesLoaded variabel, og bruke samme metode for andelen og fremdriftslinjen som før. (The totalImages er 12 siden det hvor mange vi bruker per spill.) Når alle bildene er forhåndslastet (det vil si når alle () kjøres) vi satt #progessdiv til skjulte og ringe . drawImages () -funksjonen Vi må legge til numImagesLoaded og totalImages variabler til vår flickrGame objekt: (Pass på at du legger komma etter imageNum.) Hvis du teste spillet nå Du bør se fremdriftslinjen for både foto informasjon og for forbelastning av bildene For å være i samsvar med Flickr API vilkårene for tjenesten Vi må vise attribusjoner for bildene vi bruker. (Det er også høflig å gjøre det.) Legg til følgende kode i løpet av de hideCards () -funksjonen. Her sjekker vi om antall bilder som er null, og hvis så vi vet at brukeren har matchet alle kortene. Vi derfor fjerne alle kortene fra DOM og sette #gamediv å være skjult. Så, vi kaller de showAttributions () -funksjonen som vi vil kode neste I dette trinnet vil vi kode showAttributions () -funksjonen Legg til følgende under checkForMatch () -funksjonen du kodet i trinnene ovenfor: Her kan vi sette #attributionsdiv å være synlig, og deretter sløyfe gjennom hver div i den. Det er 12 divs, hver med et bilde og et avsnitt; vi bruker jQuery sin find () metode for å finne img innenfor div, sett src på bildet til riktig Bildeadresse, og bruke jQuery neste () metode for å angi brukernavn og photoURL til info fra Flickr. Her er linker til jQuery sin find () og neste () metoder slik at du kan lære mer om dem. Hvis du teste spillet nå og spille gjennom et nivå, vil du se attribusjoner med en link til bildet på Flickr. Du vil også se to knapper: en for neste nivå og en for et nytt spill. Vi vil få disse knappene arbeider i de neste trinnene I vår samtale til Flickr API vi satt per_page til 36, for å be om at mange bilder på en gang. Siden vi bruker 12 bilder per kamp, betyr dette at det kan være opp til tre nivåer. I dette trinnet vil vi få neste nivå knappen arbeids Legg til følgende kode i løpet av de setImages () -funksjonen. Vi trenger å vite hvor mange nivåer spillet vil ha. Dette avhenger av hvor mange bilder ble returnert fra våre søk. Det vil ikke alltid være 36. For eksempel, jeg søkte etter "hmmmm" og det returnerte ca 21 bilder på den tiden. Vi vil bruke Math.floor () å runde tallet ned - vi ønsker ikke 2.456787 nivåer, tross alt, og det ville kaste spillet logikk vei av Pass på at du legger til numberLevels variabel til. den flickrGame objekt: (Ikke glem å legge komma etter totalImages: 12.) Nå endrer drawImages () funksjon som følger: Her er vi tilvekst den Current variabel, sette #leveldiv å være synlig og sette HTML av div til å lese hvilket nivå vi er på og hvor mange nivåer det er Nok en gang må vi legge til Current variabelen til vår flickrGame objekt (jeg er sikker på at du ikke trenger å minne nå, men sørg for at du legger komma etter numberLevels: 0 .) Nå endrer showAttributions () -funksjonen til følgende: Vi skjule #leveldiv ved å sette sin synlighet til skjult Til slutt må vi koble opp #nextlevel_btn. Legg til følgende kode under addKeyPress () -funksjonen du opprettet i trinnet ovenfor. Her kan vi skjule knappen, avsløre #gamediv, skjule #attributionsdiv, nullstille numImagesLoaded variabel, og kaller preloadImages () som tar for seg de neste 12 bildene Du kan teste spillet nå, og bør være i stand til å spille gjennom alle nivåer. 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åer har blitt spilt som er det eneste alternativet. I dette trinnet vil vi koble opp #newgame_btn Legg til følgende under koden for #nextlevel_btn du har lagt i trinnet ovenfor:.. Her kan vi avsløre #gamediv, skjule #leveldiv og #attributionsdiv, avsløre #searchdiv, og skjule #nextlevel_btn. Vi deretter tilbakestille noen variabler, og kaller addKeyPress () slik at brukeren kan søke på nytt. Hvis du tester nå du bør være i stand til å starte et nytt spill til enhver tid, samt når alle nivåer har blitt spilt . Spillet er fullført så langt gameplay er opptatt av, men vi må vise en splash screen. Vi vil gjøre dette i neste trinn Vi trenger å gjøre noen endringer i våre CSS-fil. Spesielt må vi sette #gamediv synlighet til skjult, og sette #introscreen til synlig. Åpne stiler /game.css og gjøre disse endringene nå: Neste vi må endre addKeyPress () -funksjonen. Fjern alt fra addKeyPress () og erstatte det med følgende: Her kan vi sjekke om brukeren har trykket på Enter-tasten, så sjekker vi om spillet har startet. Hvis det ikke har vi kaller hideIntroScreen (); ellers kaller vi doSearch (); Uansett, vi markere spillet å ha startet. Dette betyr at første gang brukeren trykker Enter vil kalle hideIntroScreen (), og neste gang brukeren trykker på enter-tasten vil kalle doSearch (). Nå må vi kode hideIntroScreen () -funksjonen . Legg til følgende under addKeyPress () -funksjonen: Hvis du teste spillet nå skal du se splash skjermen; trykk Enter, og du kan spille spillet som før Akkurat nå hvis nok bilder ikke blir returnert for et spill, dukker vi opp et varsel. Selv om dette fungerer, kan vi gjøre det ser litt penere ved å bruke jQuery UI sin dialog Vi trenger å redigere index.html, så åpne den og legge til følgende rett innenfor #gamediv. Nå må vi knytte det inn Føy til følgende under hideIntroScreen () funksjon i JS filen: Vi ønsker å utløse denne dialogen for å åpne stedet for varsling vi hadde før, så fjerner varselet fra setImages () funksjon og erstatte det med følgende:. Nå, hvis ikke nok bilder blir returnert får vi en fin ser dialog, i stedet for å bruke et varsel minner om nettsider fra 90-tallet Anmeldelser Ikke glem å endre denne linjen, fra preloadImages (): ... tilbake til dette: ... ellers, vil spillet være litt for lett Nå teste det endelige spillet!. Hvis noe ikke er helt riktig, kan du alltid sammenligne din kilde til mine, eller stille et spørsmål i kommentarfeltet. Vi har kodet et morsomt lite spill ved hjelp av bilder fra Flickr API, og gitt det en anstendig lag eller to av polish. Jeg håper du likte denne opplæringen, og lært noe verdt. Takk for lesing og ha det gøy! Anmeldelser
bilder er lastet, fortsetter spillet som før.
funksjons setImages (data) {$ ("# infoprogress") css ({'synlighet': 'skjult'}).; if (data.photos.photo.length > = 12) {$ ("# searchdiv") css ({'synlighet': 'skjult'}).; $ .each (data.photos.photo, funksjon (i, element) {var Bildeadresse = 'http: //gård' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push ({Bildeadresse: Bildeadresse, PHOTOID: item.id}); Var getPhotoInfoURL = "http: //api .flickr.com /tjenester /hvile /method = flickr.photos.getInfo? "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; getPhotoInfoURL + = "& format = json"; getPhotoInfoURL + = "& jsoncallback =?"; $ .getJSON (getPhotoInfoURL, infoLoaded);}); } Else {alert ("Ikke nok IMAGES ble returnert"); addKeyPress (); } FlickrGame.numberPhotosReturned = flickrGame.imageArray.length;}
Var flickrGame = {apikey: "76656089429ab3a6b97d7c899ece839d", imageArray: [ ,,,0],], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0}
Trinn 4:. InfoLoaded ()
flickrGame.imageNum + = 1; Var index = 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] ._ innhold; }} If (flickrGame.imageNum == flickrGame.numberPhotosReturned) {preloadImages (); }}
Var flickrGame = {apikey : "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0, imageNum: 0}
Trinn 5:. Progress Bar for Photo Info
funksjons setImages (data) {$ ("# infoprogress") css ({. 'synlighet': 'skjult'}); . $ ("# progressdiv") css ({'synlighet': 'synlig'}); $ ("# progressdiv p") tekst ("Legge bildeinformasjon."); if (data.photos.photo.length > = 12) {$ ("# searchdiv") css ({'synlighet': 'skjult'}).; $ .each (data.photos.photo, funksjon (i, element) {var Bildeadresse = 'http: //gård' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push ({Bildeadresse: Bildeadresse, PHOTOID: item.id}); Var getPhotoInfoURL = "http: //api .flickr.com /tjenester /hvile /method = flickr.photos.getInfo? "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; getPhotoInfoURL + = "& format = json"; getPhotoInfoURL + = "& jsoncallback =?"; $ .getJSON (getPhotoInfoURL, infoLoaded);}); } Else {. $ ("# Progressdiv") css ({'synlighet': 'skjult'}); alert ("Ikke nok IMAGES ble returnert"); addKeyPress (); } FlickrGame.numberPhotosReturned = flickrGame.imageArray.length;}
funksjon infoLoaded (data) {flickrGame.imageNum + = 1; Var prosent = Math.floor (flickrGame.imageNum /flickrGame.numberPhotosReturned * 100); $ ("# progressbar") progressbar ({verdi: prosent}).; Var index = 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] ._ innhold; }} If (flickrGame.imageNum == flickrGame.numberPhotosReturned) {preloadImages (); }}
Trinn 6:. Preloading de Images
Funksjons 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 ({'synlighet': 'synlig'}).; $ ("# progressdiv p") tekst ("Legge Images."); Var tempImageArray = []; for (var i = 0; i < flickrGame.tempImages.length; i ++) {tempImageArray.push (flickrGame.tempImages [i] .imageUrl); } $ .imgpreload (TempImageArray, {hvert: function () {if ($ (denne) .data ('lastet')) {flickrGame.numImagesLoaded ++; Var prosent = Math.floor (flickrGame.numImagesLoaded /flickrGame.totalImages * 100); $ ("# progressbar") progressbar ({verdi: prosent});}}, alt.: function () {$ ("# progressdiv") css ({'synlighet': 'skjult'}); drawImages (. );}});}
Var flickrGame = {apikey: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12}
Trinn 7:. Viser de Tilskrivelser
Funksjons hideCards () {$ (flickrGame.chosenCards [0]) animere ({'opacity' : '0'}); . $ (flickrGame.chosenCards [1]) animere ({'opacity': '0'}); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ ("# image1") css ('background-image "," ingen.'); $ ("# image2") css ('background-image "," ingen.'); . if (flickrGame.theImages.length == 0) {$ ("# gamediv img.card") fjern (); . $ ("# gamediv") css ({'synlighet': 'skjult'}); showAttributions (); } AddListeners (); flickrGame.chosenCards = new Array ();}
Trinn 8:. Vis Tilskrivelser
.
funksjons showAttributions () {$ ("# attributionsdiv") css ({'synlighet': 'synlig'}).; $ ("# attributionsdiv div"). hver (funksjon (indeks) {$ (denne) .Finn ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). neste (). html ( '< span > Brukernavn: < /span >' + flickrGame.tempImages [index] .username + '< br />' + '< a href = "" + flickrGame.tempImages [index] .photoURL + '"target =" _ blank "> Se Bilder < /a >');});}
Trinn 9:. Next Level
Funksjons setImages (data) {//... klipp ... flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned /12);}
Var flickrGame = {apikey: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages : 12, numberLevels: 0}
funksjons drawImages () {flickrGame .currentLevel + = 1; .. $ ("# leveldiv") css ({'synlighet': 'synlig'}) html ("Level" + flickrGame.currentLevel + "med" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i ++) {$ (flickrGame.theImages [i]) attr ("klasse", "kort") appendTo ("# gamediv")..; } AddListeners ();.}
Var flickrGame = {apikey. "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0, Current: 0}
funksjons showAttributions () {$ ("# leveldiv") css ({'synlighet':. 'skjult'}); . $ ("# attributionsdiv") css ({'synlighet': 'synlig'}); if (flickrGame.currentLevel == flickrGame.numberLevels) {$ ("# nextlevel_btn") css ({'synlighet': 'skjult'}).; } Else {. $ ("# Nextlevel_btn") css ({'synlighet': 'synlig'}); .} $ ("# Attributionsdiv div") hvert (funksjon (indeks) {$ (denne) .Finn ('img') attr ('src', flickrGame.tempImages [index] .imageUrl.), $ (Denne). finne ("p") html ('< span > Brukernavn: < /span >'. + flickrGame.tempImages [index] .username + '< br />' + '< a href = "' + flickrGame.tempImages [index] .photoURL + '"target =" _ blank "> Se Bilder < /a >');});}
<. p> Neste sjekker vi om Current er lik de numberLevels. Hvis de er like, det er ingen flere nivåer tilgjengelig så vi skjule #nextlevel_btn; ellers, viser vi det.
$ ("# Nextlevel_btn") på ("klikk", funksjon (e) {$ (denne) CSS ({'synlighet' .: 'skjult'}); $ ("# gamediv") css ({'synlighet': 'synlig'}); $ ("# attributionsdiv") css ({'synlighet':. 'skjult'}); flickrGame .numImagesLoaded = 0; preloadImages ();});.
Trinn 10:. Starte et nytt spill
$ ("# Newgame_btn") på ("klikk" , funksjon (e) {$ ("# gamediv") css ({'synlighet': 'synlig'}); $ ("# leveldiv") css ({'synlighet': 'skjult'});.. $ ( "#attributionsdiv") css ({'synlighet': 'skjult'}); $ ("# searchdiv") css ({'synlighet': 'synlig'}..), $ ("# nextlevel_btn") css (. {'synlighet': 'skjult'}); flickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = new Array (); flickrGame.currentLevel = 0; flickrGame.numberLevels = 0; addKeyPress ();});
Trinn 11:. Splash Screen
#gamediv {position: absolute; left: 150px; width: 600px; høyde: 375px; border: 1px solid black; padding: 10px; color: # FF0080; synlighet : skjult; bakgrunn: #FFFFFF url ('../pattern.png'); } #introscreen {position: absolute; left: 150px; width: 600px; høyde: 375px; border: 1px solid black; padding-top: 10px; color: # FF0080; synlighet: synlig, bakgrunn: #FFFFFF url ('.. /pattern.png '); padding-left: 80px;}
funksjon addKeyPress () {$ (document) .På ("tastetrykk", funksjon (e) {if (e.keyCode == 13) {if (! flickrGame.gameStarted) {hideIntroScreen ();} else {doSearch ();} flickrGame.gameStarted = true;}});}
funksjon hideIntroScreen () {$ ("# gamediv") css ({'synlighet': 'synlig'}).; . $ ("# introscreen") css ({'synlighet': 'skjult'});}
Trinn 12:. A Better Alert
< div id = "gamediv" > < div id = "dialog" title = "Sorry" > < p > Ikke nok bildene ble returnert, kan du prøve et annet søkeord. < /p > < /div >
$ ("# dialog") dialog.. ({Autoopen: falsk}); < p> Denne koden konverterer #dialog div inn i en dialog; vi deaktivere auto-open-funksjonen
} else {. $ ("# progressdiv") css ({'synlighet': 'skjult'}); $ ("# dialog") dialog ("åpen. '); addKeyPress (); } FlickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned /12);.}
tempImage.src = "cardFront.jpg";
tempImage.src = flickrGame.tempImages [i] .imageUrl;
Konklusjon