, afslutte en flickr - baseret par spil med javascript,,,,, andel,,,,,,,, 5,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i denne forelæsning, tager vi en grundlæggende browser spil (som vi byggede på en tuts + præmie tutor), og der tilsættes der barer, en preloader, lidt skærm, og mange flere polske.,,, indførsel, i denne tuts + præmie tutor. vi har bygget en grundlæggende kort matchende spil med javascript, hvis billeder kommer fra flickr.tjek demo:,,,, klik til at prøve de spil, som det er nu, i denne forelæsning, vil vi tilføje en masse polske på spil ved at gennemføre en preloader og fremskridt bar et plask skærm, og en søgning på nøgleord.se, hvordan kampen går:,,,, klik til at prøve spil med de forbedringer, som vi vil tilføje, i denne forelæsning, vil du lære javascript og html nødvendigt at kode alle disse forbedringer.download kilden filer og ekstrakt mappen, starthere, og det indeholder alle de kode fra udgangen af præmien tutor.,, flickrgame.js, der er en funktion, preloadimage(),, som indeholder denne linje:, tempimage.src = flickrgame. tempimages [i]. imageurl; for afprøvning af, ændre det til, tempimage.src = "cardfront jpg". dette vil vise billederne på kort tid, hvilket gør kontrol lettere.du kan ændre det tilbage., læs nu!,, trin 1:, addkeypress(), lige nu har vi mærket "hund" svært krypterede, men kampen bliver kedeligt hurtigt, hvis vi tvinger brugeren til at bruge hund billeder hele tiden!den lede bidrag har siddet der ser godt ud, men som er fuldstændig ikke - funktionelle hele tiden.lad os ordne det.vi vil lytte til brugeren til tryk på enter og så kalde det, dosearch(), metode med, hvad de skrev til flickr api -., tilføjes følgende under, resetimages(), funktion, i flickrgame. js,., funktion addkeypress() {$(dokument). ("keypress" funktion (e) (hvis (e.keycode = = 13) (dosearch();}})}, her lytter vi til en keypress, og hvis de, keycode svarer til 13, ved vi, at de pressede enter, så vi kalder det, dosearch(), funktion, er vi nødt til at ændre den, dosearch, funktion, use teksten i input, så foretage følgende ændringer:, funktion dosearch() (hvis ($("# searchterm"). val()!= ") ($(dokument). (" keypress "), var searchurl =" http://api.flickr.com/services/rest/?metode = flickr. billeder. - "searchurl + =" & api_key = "+ flickrgame.apikey; searchurl + =" & tags = "+ $("&#searchterm "). val(); searchurl + =" & per_page = 36 "searchurl + =" & - = 5,7 "searchurl + =" & format = json "searchurl + =" & jsoncallback =? "og $. getjson (searchurl, setimages)}}, her, vi først kontrollere, at input er ikke tom (vi vil ikke finde noget), skal vi fjerne, keypress, til at lytte.endelig er vi ændre, mærker, at anvende input er værdi. den sidste ting, vi skal gøre, er at fjerne opfordringen til, dosearch() i det dossier.finde ud af, hvor vi er manuelt at ringe, dosearch(), og fjerne den.- det er lige efter, addkeypress(), funktion.), glem ikke at ringe, addkeypress(), funktion.jeg kaldte det lige under, hvor jeg erklæret det., funktion addkeypress() {$(dokument). ("keypress" funktion (e) (hvis (e.keycode = = 13) (dosearch();}})} addkeypress();, hvis du nu prøve spil, du vil ikke se nogen billeder, før du foretager en søgning.,, trin 2: at kontakte server, når vi gør vores første indkaldelse til flickr er api - der er en lille forsinkelse.vi vil vise en animeret gif ("throbber"), mens vi kontakt - - og fjerne det, når de opkald kommer tilbage. føje følgende til det, dosearch(), funktion, funktion dosearch() (hvis ($("# searchterm"). val()!= ") ($(dokument). (" keypress "); $("&#infoprogress "). css (('synlighed": "synlig"}), var searchurl = "http://api.flickr.com/services/rest/?metode = flickr. billeder. - "searchurl + =" & api_key = "+ flickrgame.apikey; searchurl + =" & tags = "+ $("&#searchterm "). val(); searchurl + =" & per_page = 36 "searchurl + =" & - = 5,7 "searchurl + =" & format = json "searchurl + =" & jsoncallback =? "og $. getjson (searchurl, setimages)), fastsætter,&#infoprogress, div. skal være synlig.når oplysningerne stammer tilbage fra flickr, vi vil skjule det.for at gøre det, tilføje følgende kode til, setimages(), funktion:, funktion setimages (data) ($("# infoprogress"). css (('visibility ":" skjulte "}); $. hver (data.photos.photo, funktion (- punkt) (var - imageurl = http: //akvakulturbrug + item.farm +. statisk. flickr. kom /+ item.server + « /» + item.id + _ + item.secret + _" + "q.jpg; flickrgame. imagearray. tryk ((imageurl: imageurl, photoid: item.id})}); infoloaded();}, hvis du prøve spil nu, du skulle se den pålæsser billede viser, mens kontakter flickr api -.,, trin 3: få foto - info, vi har brug for at få oplysninger om hvert enkelt billede, vi bruger.vi vil kalde, metode = flickr.photos.getinfo på hvert billede, og så kalde det, infoloaded(), funktion, hver gang de oplysninger er ladt.når de oplysninger for hvert billede er ladt, spillet fortsætter som før. der er en masse nye oplysninger for at tage her, så vi vil bryde det ned, skridt for skridt.første, tilføjes følgende til, setimages(), funktion:, funktion setimages (data) ($("# infoprogress"). css (('synlighed: "skjulte"}); hvis (data.photos.photo.length > = 12) ($("# searchdiv") css ({"synlighed". "skjulte"}); $. hver (data.photos.photo, funktion (- punkt) (var - imageurl = http: //farm + item.farm +. statisk. flickr. kom /+ item.server + « /» + item.id + _ + item.secret + _ "+" q.jpg "; flickrgame. imagearray. tryk ((imageurl: imageurl, photoid: item.id}), var getphotoinfourl =" http://api.flickr.com/services/rest/?metode = flickr. billeder. getinfo "getphotoinfourl + =" & api_key = "+ flickrgame.apikey; getphotoinfourl + =" & photo_id = "+ item.id; getphotoinfourl + =" & format = json "getphotoinfourl + =" & jsoncallback =? "og $. getjson (getphotoinfourl, infoloaded)})} andre (varsling ("ikke nok billeder var vendt tilbage"); addkeypress();} flickrgame.numberphotosreturned = flickrgame.imagearray.length;}, nu hvor vi er ved at få mærker fra brugeren skal vi sikre nok billeder var vendt tilbage til en enkelt kamp (12).hvis vi gemme det input, så den spiller, kan ikke gøre en ny søgning mellemspil.vi sætter en variabel, getphotoinfourl, og anvende den metode = flickr.photos.getinfo - meddelelse, som vi bruger, item.id, for, photo_id,.vi så bruge den jquery er, getjson, metode og ringe, infoloaded,., hvis ikke nok billeder var vendt tilbage, vi kaster en alarm og ring, addkeypress(), så brugeren kan gøre en ransagningskendelse., så vi er nødt til at vide, hvor mange billeder var vendt tilbage fra opfordringen til flickr api - og vi opbevares i den variabel, numberphotosreturned,, som vi tilføje vores, flickrgame, formål, var flickrgame = {apikey: "76656089429ab3a6b97d7c899ece839d", imagearray: [...], tempimages: [...], theimages: [...], chosencards: [...], numberphotosreturned: 0} (sørg for at tilføje en komma efter, chosencards: [...]). kan vi ikke prøve endnu. hvis vi gjorde det, ville vi være ringe, preloadimages(), 36 gange i træk, da det er vores, infoloaded(), funktion, gør i øjeblikket.det ønsker vi ikke.i løbet af de næste skridt vil vi udfylde den funktion, infoloaded(),.,, trin 4:, infoloaded(),,, infoloaded(), funktion modtager oplysninger om et enkelt billede.det er de oplysninger, imagearray, for korrekt billede, og holder øje med, hvor mange billeder "info er blevet indladet; hvis dette antal er lig med numberphotosreturned, kræver det, preloadimages(),., udelade opfordringen til, preloadimages(), og følgende i, infoloaded(), funktion, flickrgame.imagenum: + = 1; var indeks = 0 for (var - jeg = 0. jeg < flickrgame.imagearray.length; jeg + +) (hvis (flickrgame. imagearray [i]. photoid = = data. foto. id) (indeks = i flickrgame. imagearray [indeks]. brugernavn = data.photo.owner.username; flickrgame. imagearray [register]. photourl = data. foto. url - adresser. url [0]. _content;}} hvis (flickrgame.imagenum = = flickrgame. numberphotosreturned) (preloadimages();}}, vi tillæg than imagenum, variabel og en variabel, indeks, svarende til 0.inden for loop, vi tjekker for at se, om det, photoid i, imagearray, svarer til den, data.photo.id, husker du, data, er en json repræsentation af det nuværende billede, der behandles).hvis de er i overensstemmelse med det, indeks svarende til, jeg og ajourføre relevante indeks i, imagearray med, brugernavn, og photourl, variabel.vi har brug for disse oplysninger, når vi viser billedet beføjelserne senere. det virker måske lidt forvirrende, men alt, hvad vi gør, er matchende med billederne.da vi ikke kender den rækkefølge, hvori de er vendt tilbage fra serveren, vi sørger for deres id - kamp, og så kan vi tilføje, brugernavn, og photourl, variabler til billedet. endelig, at vi kontrollere, om, imagenum, svarer til den, numberphotosreturned, og, hvis det er så alle billeder er blevet behandlet så vi kalder, preloadimages(),., glem ikke at tilføje, imagenum, til, flickrgame, objekt., var flickrgame = {apikey: "76656089429ab3a6b97d7c899ece839d", imagearray: [...], tempimages: [...], theimages: [...], chosencards: [...], numberphotosreturned: 0, imagenum: 0}, sørg for at tilføje et komma efter, numberphotosreturned: 0.), hvis du prøve nu, det vil tage lidt længere tid for dig at se billederne.på toppen af, at flickr api - for at hente billederne, vi er nu ved at få oplysninger om hvert enkelt af dem.,, løntrin 5: fremskridt bar for foto - info, i dette skridt, vil vi få fremskridt bar viser, når vi lader foto oplysninger. tilsættes følgende kode til, setimages(), funktion:, funktion setimages (data) ($("# infoprogress"). css (('synlighed: "skjulte"}); $("# progressdiv"). css ((' synlighed ":" synlig "}); $("&#progressdiv p "). tekst (" belastning foto oplysninger. "); hvis (data.photos.photo.length > = 12) ($("&#searchdiv "). css (('synlighed:" skjulte "}); $. hver (data.photos.photo, funktion (- punkt) (var - imageurl = http: //farm + -tem.farm +. statisk. flickr. kom /+ item.server + « /» + item.id + _ + item.secret + _ "+" q.jpg; flickrgame. imagearray. tryk ((imageurl: imageurl, photoid: item.id}), var getphotoinfourl = "http://api.flickr.com/services/rest/?metode = flickr. billeder. getinfo "getphotoinfourl + =" & api_key = "+ flickrgame.apikey; getphotoinfourl + =" & photo_id = "+ item.id; getphotoinfourl + =" & format = json "getphotoinfourl + =" & jsoncallback =? "og $. getjson (getphotoinfourl, infoloaded)})} andre {$("# progressdiv"). css (('synlighed: "skjulte"}); - indberetningen ("ikke nok billeder var vendt tilbage"); addkeypress();} flickrgame.numberphotosreturned = flickrgame.imagearray.length;}, det viser,&#progressdiv, og ændrer punkt tekst i,&#progressdiv, at læse "- foto oplysninger".hvis der ikke er nok billeder var vendt tilbage vi gemme,&#progressdiv,., næste føje følgende til den, infoloaded(), funktion:, funktion infoloaded (data) (flickrgame.imagenum + = 1; var procent = matematik. etage (flickrgame.imagenum /flickrgame.numberphotosreturned * 100); $("# progressbar"). progressbar ({værdi: procentdel}) var indeks = 0 for (var - jeg = 0. jeg < flickrgame.imagearray.length; jeg + +) (hvis (flickrgame. imagearray [i]. photoid = = data. foto. id) (indeks = jeg flickrgame. imagearray [indeks]. brugernavn = data.photo.owner.username; flickrgame. imagearray [register]. photourl = data. foto. url - adresser. url [0]. _content;}} hvis (flickrgame.imagenum = = flickrgame. numberphotosreturned) (preloadimages();}}, her har vi fastsat en varii stand, procentdel lig med matematik. etage (flickrgame.imagenum /flickrgame.numberphotosreturned * 100); dette er helt sikker på, at vi får et nummer mellem 0 og 100.så ringer vi til $("# progressbar"). progressbar(), og den værdi, der svarer til ejendom, procent,., hvis du nu prøve spillet det bør fungere som før, men med en statusbar.- der er et problem: de fremskridt, bar bliver hængende efter billederne bliver trukket.i den kamp, vi først belastning billedet oplysninger, så vi preload billederne og bruger de fremskridt, bar.vi vil ordne dette i næste trin, trin 6: preloading billederne i dette skridt, vil vi utlilize den jquery.imgpreload stik af (det er allerede i kilden til download).så snart alle indgive oplysninger fra ovennævnte foranstaltninger har været ladt, der bar nulstiller sig og overvåger lastningen af billeder, føje følgende til den, preloadimages(), funktion:, funktion preloadimages() {flickrgame.tempimages = flickrgame. imagearray. splejsning (0, 12) til (var - jeg = 0, - < flickrgame.tempimages.length; jeg + +) (for (var - j = 0 j < 2) j + +) (var - tempimage = nye image(); tempimage.src = "cardfront. men heller ikke dér er menneskene sikre" tempimage.imagesource = flickrgame. tempimages [i]. imageurl; flickrgame. theimages. tryk (tempimage)}} $("# progressdiv"). css (('synlighed ":" synlig "}); $("&#progressdiv p "). tekst (" belastning billeder ")og var tempimagearray = []; (var - jeg = 0. jeg < flickrgame.tempimages.length; jeg + +) (tempimagearray. tryk (flickrgame. tempimages [i]. imageurl)} $. imgpreload (tempimagearray (hver: funktion () (hvis ($(data ('loaded ").)) (flickrgame. numimagesloaded + + var procent = matematik. etage (flickrgame.numimagesloaded /flickrgame.totalimages * 100); $("&#progressbar "). progressbar ((værdi: procentdel})}}, alle: funktion () ($("&#progressdiv "). css (('synlighed:" skjulte "}); drawimages();}})}, vi selvt,&#progressdiv, være synlig og ændre punkt at læse "- billeder".der er nedsat et midlertidigt system og tilføje den midlertidige billeder "url - adresser på det, så giv hele antennegruppe til $. imgpreload, op til preload.,, hver funktion bliver hver gang et billede er fyldt op, og alle funktion bliver, når alle de billeder, er blevet fyldt op.indenfor, each(), vi tjekker, at billedet var ladt, forøgelse af den, numimagesloaded, variable, og anvende den samme metode for den procentdel og fremskridt, som før.(de totalimages, er 12, fordi det, hvor mange vi bruger pr. kamp.), når alle de billeder, er blevet fyldt op (det er, når all(), ledes) fastsatte vi den,&#progessdiv, skjulte og kalder den, drawimages(), funktion. er vi nødt til at tilføje, numimagesloaded, og, totalimages, variabler til vores, flickrgame, formål, var flickrgame = {apikey: "76656089429ab3a6b97d7c899ece839d", imagearray: [...], tempimages: [...], theimages: [...], chosencards: [...], numberphotosreturned: 0, imagenum: 0, numimagesloaded: 0, totalimages: 12), (sørg for at tilføje kommaet efter, imagenum.), hvis du tester kampen nu, du skal se de fremskridt, bar for både foto oplysninger og for preloading billederne.,, trin 7, der viser de beføjelser, conform til flickr api ansættelsesvilkår, er vi nødt til at vise beføjelserne for de billeder, vi bruger.(It's also polite to do so.),Add the following code within the ,hideCards(), function:, function hideCards() { \t$(flickrGame.chosenCards[0]).animate({ \t\t'opacity': '0' \t}); \t$(flickrGame.chosenCards[1]).animate({ \t\t'opacity': '0' \t}); \tflickrGame.theImages.splice(flickrGame.theImages.indexOf(flickrGame.chosenCards[0]), 1); \tflickrGame.theImages.splice(flickrGame.theImages.indexOf(flickrGame.chosenCards[1]), 1); \t$("#image1").css('background-image', 'none'); \t$("#image2").css('background-image', 'none'); \t \tif (flickrGame.theImages.length == 0) { \t\t$("#gamediv img.card").remove(); \t\t$("#gamediv").css({ \t\t\t'visibility': 'hidden' \t\t}); \t\tshowAttributions(); \t} \taddListeners(); \tflickrGame.chosenCards = new Array(); },Here, vi kontrollere, om antallet af billeder tilbage, er nul, og hvis vi ved, brugeren har matchet alle kortene.vi er derfor fjerne alle kortene fra dom og fastsætte,&#gamediv, det skal være skjult.så kalder vi det, showattributions(), funktion, som vi vil kode næste.,, trin 8: vise afskrivninger i dette skridt, vil vi - kode, showattributions(), funktion, tilføjes følgende under, checkformatch(), funktion i kodet i ovennævnte foranstaltninger:, funktion showattributions() {$("# attributionsdiv"). css (('visibility ":" synlig "}); $("&#attributionsdiv div "). hver (funktion (indeks) {$(dette). ('img '). attr ('src, flickrgame. tempimages [og]. imageurl).next(). html (< span > brugernavn: < /span > + flickrgame. tempimages [indeks]. brugernavn + < br /> + < en href = "+ flickrgame. tempimages [indeks] photourl + «." målet = "_blank" > betragtning foto < /a > ');})}, vi fastsætter,&#attributionsdiv, skal være synlig, og så loop gennem hver div inden for det.der er 12 divs, hver med et billede og et punkt, vi bruger jquery er, find(), en metode til at finde, img inden for lufttransport, sæt, src, af det billede, at den korrekte, imageurl, og brug jquery er, next(), en metode til at fastsætte, brugernavn, og photourl, til info fra flickr. her er forbindelser til jquery er find() og next() metoder, så du kan lære mere om dem. hvis du prøve spil og spille gennem en plan, og du vil se de beføjelser, med et link til et billede på flickr.vil du også se på to knapper: en til næste niveau og et nyt spil.vi vil få dem i de næste skridt, skridt 9: næste trin i vores opfordring til flickr api - vi, per_page til 36, for at anmode om, at mange billeder på en gang.da vi er ved hjælp af 12 billeder pr. parti, det betyder, at der kan være op til tre niveauer.i dette skridt, vil vi få det næste niveau knap. tilsættes følgende kode inden for, setimages(), funktion:, funktion setimages (data) (//...klip...flickrgame.numberphotosreturned = flickrgame.imagearray.length; flickrgame.numberlevels = matematik. etage (flickrgame.numberphotosreturned /12)}, vi har brug for at vide, hvor mange niveauer vil spillet.det afhænger af, hvor mange billeder var vendt tilbage fra vores søgen.det vil ikke altid være 36.for eksempel, jeg søgte på "javel" og vendte tilbage med 21 billeder på det tidspunkt.vi skal bruge matematik. floor(), runde antallet ned - - vil vi ikke 2.456787 niveauer efter, og det ville tabe kampen logiske vej., sørg for at tilføje, numberlevels, variabel til, flickrgame, formål, var flickrgame = {apikey: "76656089429ab3a6b97d7c899ece839d", imagearray: [], tempimages: [...], theimages: [...], chosencards: [...], numberphotosreturned: 0, imagenum: 0, numimagesloaded: 0, totalimages: 12, numberlevels: 0} (glem ikke at tilføje komma efter, totalimages: 12.), nu ændre, drawimages(), fungere som ændringer:, funktion drawimages() {flickrgame.currentlevel + = 1 $("# leveldiv"). css (('visibility ":" synlig "}). http: //(" plan "+ flickrgame.currentlevel +" af "+ flickrgame. numberlevels); flickrgame. theimages. form (randord) til (var - jeg = 0. jeg < flickrgame.theimages.length; jeg + +) ($(flickrgame. theimages [i]). attr ("time", "kort"). appendto ("# gamediv")} addlisteners();}, vi her. tilvækst, blive, variabel, der,&#leveldiv, være synlig og fastsætte html af div til at læse det niveau, vi er, og hvor mange niveauer er der. endnu en gang er vi nødt til at tilføje, at vores blive variable, flickrgame, objekt., var flickrgame = {apikey: "76656089429ab3a6b97d7c899ece839d", imagearray: [...], tempimages: [...], theimages: [...], chosencards: [...], numberphotosreturned: 0, imagenum: 0, numimagesloaded: 0, totalimages: 12, numberlevels: 0, blive: 0}, er jeg sikker på, at du ikke behøver at blive mindet om by now, but make sure you add the comma after ,numberLevels: 0,.),Now modify the ,showAttributions(), function to the following:, function showAttributions() { \t$("#leveldiv").css({ \t\t'visibility': 'hidden' \t}); \t$("#attributionsdiv").css({ \t\t'visibility': 'visible' \t}); \tif (flickrGame.currentLevel == flickrGame.numberLevels) { \t\t$("#nextlevel_btn").css({ \t\t\t'visibility': 'hidden' \t\t}); \t} else { \t\t$("#nextlevel_btn").css({ \t\t\t'visibility': 'visible' \t\t}); \t} \t$("#attributionsdiv div").each(function (index) { \t\t$(this).find('img').attr('src', flickrGame.tempImages[index].imageUrl); \t\t$(this).find('p').html('<span>Username: </span> ' + flickrGame.tempImages[index].username + '<br/>' + '<a href="' + flickrgame. tempimages [indeks]. photourl + "mål =" _blank "> betragtning foto < /a > ');})}, vi gemmer den,&#leveldiv, ved at dens synlighed, skjult. næste vi kontrollere, om det, blive svarer det, numberlevels,.hvis de er ensartede, er der ikke flere niveauer, der er til rådighed, så vi gemmer den,&#nextlevel_btn,, så vi viser det. endelig skal vi tråd op,&#nextlevel_btn,.der tilføjes følgende kode under, addkeypress(), funktion, de skabte i skridt over: $("# nextlevel_btn"). ("klik" funktion (e) ($(dette). css (('visibility ":" skjulte "}); $("&#gamediv css ("). ('visibility": "synlig"}); $("# attributionsdiv"). css (('visibility ":" skjulte "}); flickrgame.numimagesloaded = 0, preloadimages().}), vi skjuler den knap, viser,&#gamediv, skjule,&#attributionsdiv, tager den, numimagesloaded variable, og ring, preloadimages(), som tager fat i de næste 12 billeder. kan du prøve spil nu og bør være i stand til at spille på alle niveauer.vi vil tråd op,&#newgame_btn i de kommende skridt, skridt 10: begynder et nyt spil, du kan begynde et nyt spil til enhver tid, men efter alle disse niveauer har spillet, det er den eneste mulighed.In this step we will wire up the ,#newgame_btn,.,Add the following beneath the code for the ,#nextlevel_btn, you added in the step above:, $("#newgame_btn").on("click", function (e) { \t$("#gamediv").css({ \t\t'visibility': 'visible' \t}); \t$("#leveldiv").css({ \t\t'visibility': 'hidden' \t}); \t$("#attributionsdiv").css({ \t\t'visibility': 'hidden' \t}); \t$("#searchdiv").css({ \t\t'visibility': 'visible' \t}); \t$("#nextlevel_btn").css({ \t\t'visibility': 'hidden' \t}); \tflickrGame.imageNum = 0; \tflickrGame.numImagesLoaded = 0; \tflickrGame.imageArray = new Array(); \tflickrGame.currentLevel = 0; \tflickrGame.numberLevels = 0; \taddKeyPress(); });,Here we reveal the ,#gamediv,, hide the ,#leveldiv, and ,#attributionsdiv,, reveal the ,#searchdiv, og gem den,&#nextlevel_btn,.vi så stille nogle variabler, og ring, addkeypress(), så brugeren kan søge igen. hvis du prøve nu, du skal være i stand til at starte et nyt spil, til enhver tid, og når alle niveauer har spillet. det spil, er fuldstændig for så vidt angår gameplay er bekymret, men vi er nødt til at vise en plask skærm.vi vil gøre dette inden for de næste skridt, skridt 11: plask skærm, er vi nødt til at foretage nogle ændringer til vores css fil.konkret har vi behov for at fastsætte,&#gamediv, sigtbarhed til skjult, og fastsætte,&#introscreen, synlige.åben, styles /game.css, og de ændringer, der nu:,&#gamediv {holdning: absolut; tilbage: 150px; bredde: 600px. højde: 375px; grænse: 1px fast sort polstring: 10px; farve:&#ff0080; synlighed: skjulte; baggrund:&#ffffff url ("... /mønster. men heller ikke dér er menneskene sikre")}&#introscreen {holdning: absolut; tilbage: 150px; bredde: 600px. højde: 375px; grænse: 1px fast sort polstring top: 10px; farve:&#ff0080; synlighed: synlig baggrund:&#ffffff url ("... /mønster. men heller ikke dér er menneskene sikre) polstring til venstre: 80px;} vi er nødt til at ændre den, addkeypress(), funktion.fjern alt fra, addkeypress() og erstatte den med følgende:, funktion addkeypress() {$(dokument). ("keypress" funktion (e) (hvis (e.keycode = = 13) (hvis (!flickrgame. gamestarted) (hideintroscreen();} andre (dosearch();} flickrgame.gamestarted = sandt.}})}, vi ser, hvis brugeren har presset på enter, vil vi kontrollere, om spillet er begyndt.hvis ikke vi kalder, hideintroscreen(),; i modsat fald opfordrer vi dosearch(),; enten måde markerer vi kampen, som startede.det betyder, at første gang brugeren trykker det ringer ind, hideintroscreen(), og næste gang bruger presser enter kalder den, dosearch(),., nu er vi nødt til at kode, hideintroscreen(), funktion.der tilføjes følgende under, addkeypress(), funktion:, funktion hideintroscreen() {$("# gamediv"). css (('visibility ":" synlig "}); $("&#introscreen "). css (('visibility": "skjulte"})}, hvis du tester kampen nu - se splash skærm, tryk på enter, og du kan spille som før.,, trin 12: en bedre indberetning, lige nu, hvis nok billeder ikke er vendt tilbage til en kamp, vi far en alarm.selv om det virker, kan vi få det til at se lidt sødere ved hjælp af jquery ui er dialog. vi er nødt til at redigere index.html, så åbner den og tilføje følgende ret i,&#gamediv,,,,,,,, < div id = "gamediv" > < div. id = "dialog" afsnit = "undskyld" > < p > ikke nok billeder var vendt tilbage, prøv et andet nøgleord. < /p > < /div >, nu skal vi binde det.der tilføjes følgende under, hideintroscreen(), funktion i det dossier: $("# dialog"). dialog ((autoopen: falske}); denne kode omformer,&#dialog, div til en dialog, og vi uskadeliggøre auto åbne træk. ønsker vi at udløse denne dialog åbne i stedet for indberetningen, vi havde før, og så fjerne alarmen fra, setimages(), funktion og erstatte det med følgende:, andet ($("# progressdiv"). css (('synlighed: "skjulte"}); $("# dialog"). dialog ('open'); addkeypress();} flickrgame.numberphotosreturned = flickrgame.imagearray.length; flickrgame.numberlevels = matematik. etage (flickrgame.numberphotosreturned /12)}, hvis ikke nok billeder er vendt tilbage, vi får en pændialog, i stedet for at bruge en indberetning om websider fra 90 'erne, glem ikke at ændre denne linje fra, preloadimages():, tempimage.src = "cardfront jpg", tilbage til det, tempimage.src = flickrgame. tempimages [i]. imageurl;, - - ellers vil spillet blive lidt for let!nu prøve sidste spil.hvis noget er ikke rigtigt, du altid kan sammenligne din kilde til mine, eller stille et spørgsmål i bemærkningerne. konklusion - har vi mærket en sjov lille spil brugte billeder fra flickr api - og givet det en ordentlig lag eller to polske.jeg håber, du nød det pædagogiske og lærte noget af værdi.tak for læse - og have det sjovt!,