Share
În acest tutorial, vom lua un joc de browser de bază (pe care l-am construit într-un tutorial Tuts + Premium) și vom adăuga bare de progres, un preloader, un ecran de pornire și mult mai polonez.
În acest tutorial Tuts + Premium, am construit un joc de bază de potrivire a cărților cu JavaScript, ale cărui imagini au provenit de pe Flickr. Verificați demo-ul:
Faceți clic pentru a încerca jocul așa cum este acum.
În acest tutorial, vom adăuga o mulțime de poloneză jocului, prin implementarea unei bare de preloader și progres, a unui ecran de pornire și a unei căutări de cuvinte cheie. Aruncați o privire asupra modului în care se va produce jocul:
Faceți clic pentru a încerca jocul cu îmbunătățirile pe care le vom adăuga.
În acest tutorial, veți învăța JavaScript și codul HTML necesar pentru a codifica toate aceste îmbunătățiri. Descărcați fișierele sursă și extrageți directorul numit Începe aici; aceasta conține tot codul de la sfârșitul tutorialului Premium.
În flickrgame.js există o funcție numită preloadImage (), care conține această linie:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
În scopul testării, modificați-l la:
tempImage.src = "cardFront.jpg";
Acest lucru va arăta imaginile de pe carduri tot timpul, ceea ce face ca testarea să fie mult mai ușoară. Puteți schimba acest lucru în orice moment.
Acum citiți mai departe!
Accentsconagua
addKeyPress () Chiar acum avem eticheta "câine" greu codificată, dar jocul se va plictisi repede dacă vom forța utilizatorul să folosească fotografii de câine tot timpul!
Intrarea de căutare a fost așezată acolo caută destul, dar fiind complet nefuncțională tot acest timp. Să rezolvăm asta. Vom asculta ca utilizatorul să apese tasta Enter și apoi să apeleze doSearch () folosind metoda pe care au introdus-o pentru a apela API-ul Flickr.
Adăugați următoarele sub resetImages () funcția, în flickrgame.js.
funcția addKeyPress () $ (document) .on ("apăsați tasta", funcția (e) if (e.keyCode == 13) doSearch ();); Aici ascultăm pentru o apăsare de taste și dacă cod cheie este egal cu 13, știm că au apăsat tasta Enter pentru a apela doSearch () funcţie.
Trebuie să modificăm doSearch pentru a utiliza textul în intrare, efectuați următoarele modificări:
funcția doSearch () if ($ ("# searchterm")) val ()! = "") $ (document). var căutareURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; căutareURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm") val (); searchURL + = "& per_page = 36" căutareURL + = "& license = 5,7"; căutareURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (căutareURL, setImages); Aici, verificăm mai întâi că intrarea nu este goală (nu vrem să căutăm nimic), apoi eliminăm keypress ascultător. În cele din urmă, modificăm Etichete pentru a utiliza valoarea de intrare.
Ultimul lucru pe care trebuie să-l facem este să eliminăm apelul doSearch () în fișierul JS. Găsiți unde sunăm manual doSearch () și scoateți-l. (Este imediat după addKeyPress () funcţie.)
Nu uitați să sunați de fapt addKeyPress () funcţie. Am spus-o exact acolo unde am spus-o.
funcția addKeyPress () $ (document) .on ("apăsați tasta", funcția (e) if (e.keyCode == 13) doSearch ();); addKeyPress (); Acum, dacă testați jocul, nu veți vedea imagini până când nu faceți o căutare.
Când facem primul nostru apel la API-ul Flickr, există o mică întârziere. Vom arăta un animat GIF (un "throbber") în timp ce contactăm serverul și îl vom elimina odată ce apelul va reveni.
Adăugați următoarele la doSearch () funcţie.
funcția doSearch () if ($ ("# searchterm")) val ()! = "") $ (document). $ ("# infoprogress"). css ('visibility': 'visible'); var căutareURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; căutareURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm") val (); searchURL + = "& per_page = 36" căutareURL + = "& license = 5,7"; căutareURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (căutareURL, setImages); Aceasta stabilește #infoprogress div pentru a fi vizibil. Odată ce informațiile revin din Flickr, o vom ascunde. Pentru a face acest lucru, adăugați următorul cod la setImages () funcţie:
funcția setImages (date) $ ("# infoprogress"). css ('visibility': 'hidden'); $ .each (date.photos.photo, funcție (i, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + element.server + '/ item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, fotoid: item.id);); infoLoaded (); Dacă încercați jocul acum, ar trebui să vedeți imaginea încărcătorului în timpul contactării API-ului Flickr.
Trebuie să obținem informațiile pentru fiecare fotografie pe care o folosim. Vom numi Metoda = flickr.photos.getInfo pe fiecare fotografie, apoi apelați infoLoaded () funcționează de fiecare dată când informațiile sunt încărcate. Odată ce informațiile pentru fiecare fotografia a fost încărcată, jocul continuă ca mai înainte.
Există o mulțime de informații noi care trebuie luate aici, așa că o vom rupe pas cu pas. Mai întâi, adăugați următoarele elemente la setImages () funcţie:
funcția setImages (date) $ ("# infoprogress"). css ('visibility': 'hidden'); dacă data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibility': 'hidden'); $ .each (date.photos.photo, funcție (i, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + element.server + '/ + + '+' q.jpg '; flickrGame.imageArray.push (imageUrl: imageURL, fotoid: 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 + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); altceva alertă ("NU S-AU RETURNAT IMAGINILE EXCURSATE"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Acum, când primim etichetele de la utilizator, trebuie să ne asigurăm că au fost returnate suficiente imagini pentru a forma un singur joc (12). Dacă da, ascundem intrarea, astfel încât jucătorul să nu poată efectua altă căutare la mijlocul jocului. Am stabilit o variabilă getPhotoInfoURL și utilizați Metoda = flickr.photos.getInfo - observați că folosim ID-ul itemului pentru photo_id. Apoi folosim jQuery getJSON metoda și apelul infoLoaded.
Dacă nu s-au returnat suficiente imagini, vom emite o alertă și vom apela addKeyPress () astfel încât utilizatorul poate face o altă căutare.
Așadar, trebuie să știm câte imagini au fost returnate de la apelul la API-ul Flickr și stocăm acest lucru în variabilă numberPhotosReturned, pe care le adăugăm la noi flickrGame obiect:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imagini: [], carti alese: [], numarFotografieReturnat: 0
(Asigurați-vă că adăugați o virgulă după aleseCard: [].)
Nu putem încerca încă; dacă am fi făcut, sunăm preloadImages () De 36 de ori la rând, din moment ce este totul nostru infoLoaded () funcționează în prezent. Cu siguranță nu ceea ce vrem. În următoarea etapă, vom elabora infoLoaded () funcţie.
infoLoaded () infoLoaded () funcția primește informații despre o singură fotografie. Se adaugă informațiile la imageArray pentru fotografia potrivită și ține evidența a câte informații despre fotografii au fost încărcate; dacă acest număr este egal cu numberPhotosReturned, se cheamă preloadImages ().
Ștergeți apelul la preloadImages () și puneți următoarele în interiorul infoLoaded () funcţie:
flickrGame.imageNum + = 1; var index = 0; pentru (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();
Aici creștem valoarea imageNum și setați o variabilă index egal cu 0. În interiorul buclă for pentru a verifica pentru a vedea dacă PHOTOID în imageArray este egal cu data.photo.id (amintiți-vă date este o reprezentare JSON a imaginii curente care este procesată). Dacă se potrivesc, vom seta index egal cu eu și să actualizeze indexul corespunzător în imageArray cu nume de utilizator și photoURL variabil. Vom avea nevoie de aceste informații atunci când vom arăta atribuțiile imaginii mai târziu.
Acest lucru poate părea puțin confuz, dar tot ceea ce facem este să potrivim fotografiile. Din moment ce nu știm ordinea în care vor fi returnate de pe server, ne asigurăm că meciul id-ului lor, și apoi putem adăuga nume de utilizator și photoURL variabile la fotografie.
În sfârșit, verificăm dacă imageNum este egal cu numberPhotosReturned, și dacă este atunci toate imaginile au fost procesate astfel încât să sunăm preloadImages ().
Nu uitați să adăugați imageNum la flickrGame obiect.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imaginile: [], carti alese: [], numarFotografii redate: 0,
(Asigurați-vă că adăugați o virgulă după Număr fotografii redate: 0.)
Dacă încercați acum, va dura puțin mai mult pentru a vedea fotografiile. În afară de a apela API-ul Flickr pentru a prelua fotografiile, acum obținem informații despre fiecare dintre ele.
În acest pas vom afișa bara de progres când încărcăm informațiile despre fotografie.
Adăugați următorul cod la setImages () funcţie:
funcția setImages (date) $ ("# infoprogress"). css ('visibility': 'hidden'); $ ("# progressdiv"). css ('vizibilitate': 'vizibil'); $ ("# progressdiv p") text ("Încărcarea informațiilor despre fotografie"); dacă data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibility': 'hidden'); $ .each (date.photos.photo, funcție (i, element) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + element.server + '/ + + '+' q.jpg '; flickrGame.imageArray.push (imageUrl: imageURL, fotoid: 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 + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); altceva $ ("# progressdiv"). css ('visibility': 'hidden'); alertă ("NU S-AU RETURNAT IMAGINILE MARE"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Aceasta arată #progressdiv și modifică textul paragrafului în #progressdiv pentru a citi "Încărcarea informațiilor despre fotografie". Dacă nu s-au returnat suficiente imagini, ascundem #progressdiv.
Înainte de a adăuga următoarele la infoLoaded () funcţie:
funcția infoLoaded (date) flickrGame.imageNum + = 1; var procent = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ (bara de progres #). bara de progres (value: percentage); var index = 0; pentru (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();
Aici am stabilit o variabilă procent egal cu Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); acest lucru ne asigură că avem un număr între 0 și 100. Apoi sunăm $ ( "# ProgressBar"). ProgressBar () și setați valoare proprietate egală cu procent.
Acum, dacă testați jocul ar trebui să funcționeze la fel ca înainte, dar cu un bar de progres. Există o problemă: bara de progres se blochează după ce imaginile sunt trase. În joc încărcăm mai întâi informațiile despre fotografie, apoi preîncărcăm imaginile și ambele folosim bara de progres. Vom remedia acest lucru în pasul următor.
În acest pas vom folosi pluginul jQuery.imgpreload (acesta este deja în descărcarea sursei). Imediat ce toate informațiile despre fișier din etapele de mai sus au fost încărcate, bara de progres se resetează și monitorizează încărcarea imaginilor.
Adăugați următoarele la preloadImages () funcţie:
funcția preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); pentru (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); $("#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(); ); Aici am setat #progressdiv pentru a fi vizibile și a schimba paragraful pentru a citi "Încărcarea imaginilor". Am creat o matrice temporară și adăugăm URL-urile temporare ale imaginilor, apoi trecem întreaga matrice $ .imgpreload pentru a da startul preîncărcării.
fiecare funcționează de fiecare dată când o fotografie este preîncărcată, și toate se execută atunci când toate imaginile au fost preîncărcate. Interior fiecare() verificăm să vă asigurați că imaginea a fost încărcată, incrementați-o numImagesLoaded variabile și folosiți aceeași metodă pentru bara de procent și bara de progres ca mai înainte. (The totalImages este de 12, deoarece cât de mulți folosim pe joc.)
Odată ce toate imaginile au fost preîncărcate (adică când toate() este rulat) am setat #progessdiv pentru a ascunde și pentru a apela drawImages () funcţie.
Trebuie să adăugăm numImagesLoaded și totalImages variabilele noastre flickrGame obiect:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imagini: [], carti alese: [], numarFotografii redate: 0, imageNum: 0, numImagesLoaded: 0, totalImages:
(Asigurați-vă că adăugați virgula după imageNum.)
Dacă încercați acum jocul, ar trebui să vedeți bara de progres atât pentru informațiile despre fotografie cât și pentru preîncărcarea imaginilor.
Pentru a vă conforma cu Termenii și condițiile API Flickr, trebuie să afișați atribuții pentru imaginile pe care le folosim. (Este, de asemenea, politicos să faceți acest lucru.)
Adăugați următorul cod în hideCards () funcţie:
funcția hideCards () $ (flickrGame.chosenCards [0]) animate ('opacity': '0'); $ (flickrGame.chosenCards [1]). animați ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ css ("imagine-imagine", "none"); $ css ("imagine-imagine", "none"); dacă (flickrGame.theImages.length == 0) $ ("# gamediv img.card") eliminați (); $ ("# gamediv") css ('vizibilitate': 'ascuns'); showAttributions (); addListeners (); flickrGame.chosenCards = Array nou (); Aici, verificăm dacă numărul de imagini rămase este zero și dacă știm că utilizatorul a corespuns tuturor cardurilor. Prin urmare, eliminăm toate cardurile din DOM și setăm #gamediv a fi ascunsă. Apoi, numim showAttributions () funcție pe care o vom codifica în continuare.
În acest pas vom codifica showAttributions () funcţie.
Adăugați următoarele sub checkForMatch () funcția pe care ați codificat-o în pașii de mai sus:
funcția showAttributions () $ ("# atributionsdiv"). css ('visibility': 'visible'); $ (this) .find ('img') attr ('src', flickrGame.tempImages [index] .imageUrl) next () html ( 'Nume de utilizator: '+ flickrGame.tempImages [index] .username +'
'+' Vezi fotografia '); ); Aici am setat #attributionsdiv pentru a fi vizibil, și apoi bucla prin fiecare div în ea. Există 12 div, fiecare cu o imagine și un paragraf; folosim jQuery găsi() metoda de a găsi img în div, setați src a imaginii la cea corectă Imagine URL, și folosiți jQuery Următor →() metoda de a seta nume de utilizator și photoURL la informațiile de pe Flickr.
Aici găsiți linkuri către metodele find () și next () ale jQuery pentru a afla mai multe despre ele.
Dacă testați acum jocul și jucați un nivel, veți vedea atribuțiile cu un link spre imaginea de pe Flickr. Veți vedea, de asemenea, două butoane: unul pentru nivelul următor și unul pentru un joc nou. Vom face aceste butoane să lucreze în pașii următori.
În apelul nostru către API-ul Flickr pe care l-am setat per pagină la 36 de ani, pentru a solicita multe imagini simultan. Deoarece utilizăm 12 imagini pe joc, înseamnă că pot exista până la trei niveluri. În acest pas vom obține butonul Next Level.
Adăugați următorul cod în setImages () funcţie:
funcția setImages (date) // ... snip ... flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
Trebuie să știm câte niveluri va avea jocul. Acest lucru depinde de cât de multe imagini au fost returnate din căutarea noastră. Nu va fi întotdeauna 36. De exemplu, am căutat "hmmmm" și a returnat aproximativ 21 de fotografii în acel moment. Vom folosi Math.floor () pentru a runda numărul în jos - nu vrem 2.456787 niveluri, la urma urmei, și ar arunca logica joc de joc.
Asigurați-vă că adăugați numberLevels variabilă la flickrGame obiect:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imagini: [], carti alese: [], numarFotoReturnat: 0, imageNum: 0, numImagesLoaded: 0, totalImages:
(Nu uitați să adăugați virgula după totalImages: 12.)
Acum modificați drawImages () funcționează după cum urmează:
funcția drawImages () flickrGame.currentLevel + = 1; ("Level" + "flickrGame.currentLevel +" din "+ flickrGame.numberLevels"); css ('visibility': 'visible'); flickrGame.theImages.sort (randOrd); pentru (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Aici creștem valoarea nivelul actual variabile, setați #leveldiv pentru a fi vizibil și a seta codul HTML al divului pentru a citi nivelul la care suntem și câte niveluri există.
Încă o dată, trebuie să adăugăm nivelul actual variabilă pentru noi flickrGame obiect.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], Imaginile: [], selectCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: currentLevel: 0
(Sigur nu aveți nevoie să reamintiți până acum, dar asigurați-vă că adăugați virgula după numere de nivele: 0.)
Acum modificați showAttributions () funcționează la următoarele:
function show () $ ("# leveldiv"). css ('visibility': 'hidden'); $ ("# attributionsdiv"). css ('vizibilitate': 'vizibil'); dacă flickrGame.currentLevel == flickrGame.numberLevels) $ ("# nextlevel_btn"). css ('visibility': 'hidden'); altceva $ ("# nextlevel_btn"). css ('visibility': 'visible'); $ (("attributionsdiv div") fiecare (funcția (index) $ (this) .find ('img'). găsi ( 'p'). html (“Nume de utilizator: '+ flickrGame.tempImages [index] .username +'
'+' Vezi fotografia '); ); Ne ascundem #leveldiv prin stabilirea vizibilității acestuia ascuns.
Apoi verificăm dacă nivelul actual este egal cu numberLevels. Dacă ele sunt egale, nu mai există niveluri disponibile pentru a ascunde #nextlevel_btn; în caz contrar, le arătăm.
În cele din urmă, trebuie să efectuăm un apel #nextlevel_btn. Adăugați următorul cod sub addKeyPress () funcția pe care ați creat-o în pasul de mai sus:
$ ("# nextlevel_btn") pe ("clic", funcția (e) $ (this) .css ('visibility' ':' vizibil '); $ ("# attributionsdiv"); css (' visibility ':' hidden '); Aici ascundem butonul, dezvăluim #gamediv, ascundeți #attributionsdiv, resetați numImagesLoaded variabilă și apel preloadImages () care captează următoarele 12 imagini.
Puteți testa jocul acum și ar trebui să puteți juca prin toate nivelurile. Vom conecta #newgame_btn în pașii următori.
Puteți începe oricând un nou joc, dar după ce toate nivelele au fost jucate, aceasta este singura opțiune. În acest pas vom sârmă #newgame_btn.
Adăugați următoarele sub codul pentru #nextlevel_btn ați adăugat în pasul de mai sus:
$ ("# newgame_btn") pe ("click", funcția (e) $ ("gamediv" 'visibility': 'hidden')); $ ("# attributionsdiv") css ('visibility' FlickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = array nou (); flickrGame.currentLevel = 0 ($ # nextlevel_btn) ; flickrGame.numberLevels = 0; addKeyPress ();); Aici dezvăluim #gamediv, ascundeți #leveldiv și #attributionsdiv, dezvălui #searchdiv, și ascundeți #nextlevel_btn. Apoi resetați unele variabile și sunați addKeyPress () astfel că utilizatorul poate căuta din nou.
Dacă testați acum, ar trebui să puteți începe un nou joc în orice moment, precum și atunci când toate nivelele au fost jucate.
Jocul este complet în ceea ce privește gameplay-ul, dar trebuie să afișăm un ecran de pornire. Vom face acest lucru în pasul următor.
Trebuie să modificăm fișierul nostru CSS. Mai precis, trebuie să setăm #gamediv vizibilitatea ascunsă și setați #introscreen la vizibil. Deschis stiluri / game.css și faceți aceste modificări acum:
#gamediv poziție: absolută; stânga: 150px; lățime: 600px; height: 375px; frontieră: 1px solid negru; padding: 10px; color: # FF0080; vizibilitate: ascunse; fundal: #FFFFFF url ('... /pattern.png'); #introscreen poziție: absolută; stânga: 150px; lățime: 600px; height: 375px; frontieră: 1px solid negru; padding-top: 10px; color: # FF0080; vizibilitate: vizibil; fundal: #FFFFFF url ('... /pattern.png'); padding-left: 80px; Înainte trebuie să schimbăm addKeyPress () funcţie. Eliminați totul de la addKeyPress () și înlocuiți-l cu următoarele:
funcția addKeyPress () $ (document) .on ("apăsați tasta", funcția (e) if (e.keyCode == 13) if (flickrGame.gameStarted) hideIntroScreen (); flickrGame.gameStarted = true;); Aici verificăm dacă utilizatorul a apăsat tasta Enter, apoi verificăm dacă jocul a început. Dacă nu ne-am sunat hideIntroScreen (); altfel, suntem doSearch (); în orice caz, marchează jocul ca fiind început. Aceasta înseamnă că prima dată când utilizatorul apasă Enter, va apela hideIntroScreen (), iar data viitoare utilizatorul apasă tasta Enter pe care o va apela doSearch ().
Acum trebuie să codificăm hideIntroScreen () funcţie. Adăugați următoarele sub addKeyPress () funcţie:
funcția hideIntroScreen () $ ("# gamediv"). css ('visibility': 'visible'); $ ("# introscreen"). css ('vizibilitate': 'ascuns'); Dacă încercați jocul acum, ar trebui să vedeți ecranul de pornire; apăsați Enter și puteți juca jocul ca mai înainte.
În momentul în care suficiente imagini nu sunt returnate pentru un joc, vom afișa o alertă. Deși acest lucru funcționează, putem face să pară puțin mai frumos prin utilizarea dialogului jQuery UI.
Trebuie să editați index.html, deschideți-o astfel și adăugați-o imediat în interiorul #gamediv:
Nu s-au returnat suficiente imagini, încercați un alt cuvânt cheie.
Acum avem nevoie de legătura înăuntru. Adăugați următoarele sub
hideIntroScreen ()funcția în fișierul JS:$ ("dialog de dialog") (autoOpen: false);Acest cod convertește
#dialogdiv într-un dialog; dezactivați funcția de deschidere automată.Vrem să declanșăm deschiderea acestui dialog în loc de alerta pe care am avut-o înainte, eliminând astfel alerta de la
setImages ()funcția și înlocuiți-l cu următoarele:altceva $ ("# progressdiv"). css ('visibility': 'hidden'); $ ( "# Dialog") de dialog ( 'deschis').; addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Acum, dacă nu sunt returnate suficiente imagini, vom obține un dialog frumos, în loc să folosim o alertă care să reamintească pagini web din anii '90.
Nu uitați să schimbați această linie, de la
preloadImages ():tempImage.src = "cardFront.jpg";... înapoi la acest lucru:
tempImage.src = flickrGame.tempImages [i] .imageUrl;... altfel, jocul va fi un pic prea ușor!
Acum testați jocul final. Dacă ceva nu este corect, puteți compara întotdeauna sursa cu a mea sau puteți pune o întrebare în comentarii.
Concluzie
Am codificat un joc distractiv folosind imagini din API-ul Flickr și i-am dat un strat decent sau două de poloneză. Sper că v-ați bucurat de acest tutorial și ați învățat ceva meritoriu. Vă mulțumim că ați citit și că vă distrați!
