Share
In questo tutorial in due parti, imparerai come utilizzare JavaScript e HTML per creare un gioco di abbinamento di carte basato sull'API di Flickr. Guarda la demo e continua a leggere!
Per poter utilizzare l'API di Flickr devi essere un utente registrato su flickr.com. Dalla home page di Flickr, fare clic sul collegamento Registrati.
Una volta effettuato l'accesso, è necessario visitare l'App Garden per iniziare.
Ti consigliamo di aggiungere questa pagina ai segnalibri se stai pensando di fare un sacco di sviluppo su Flickr, dato che contiene molte informazioni utili per gli sviluppatori.
Fai clic sul link "Crea un'app" una volta arrivato all'app Garden.
Sotto "Ottieni la tua chiave API", fai clic sul link "Richiedi una chiave API".
Qui dovrai scegliere se utilizzare l'app per scopi commerciali o non commerciali. Per questo gioco ho scelto non commerciale.
Successivamente sarai indirizzato alla pagina Dettagli app. Inserisci il nome della tua app e una descrizione di cosa fa la tua app, accetta gli accordi e fai clic sul pulsante Invia.
Successivamente, ti verrà presentata la tua chiave e il tuo segreto. Non useremo la chiave segreta qui perché la nostra app non richiede l'autenticazione. Prendi nota della tua chiave API, poiché ne avremo bisogno per il resto di questo tutorial.
Flickr ha un'API REST per gli sviluppatori. Utilizzeremo questi due metodi dall'API:
Il flickr.photos.search metodo ci permetterà di cercare le foto, mentre il flickr.photos.getInfo il metodo ci permetterà di ottenere informazioni per una singola foto, come il nome utente (proprietario) della foto, il titolo della foto e l'URL della pagina della foto su Flickr.
Se visiti uno dei link sopra, nella parte inferiore della pagina c'è un link all'API Explorer dove puoi inserire alcuni dati e ottenere una risposta di esempio.
L'immagine qui sopra è per il flickr.photos.search metodo. Vai avanti e fai clic sul link ora.
Ci sono molte opzioni, e può sembrare travolgente, ma tutto ciò a cui siamo interessati per questo tutorial è l'opzione "tags"; Ho inserito "cane" nella casella di ricerca dei tag. Scegli JSON come metodo di output, dato che utilizzeremo JSON in questo tutorial.
Infine, premere il pulsante "Metodo chiamata" e verrà restituito un esempio della risposta. Ecco una parte del tipo di dati che ci si può aspettare di ricevere: le ultime righe sono state tagliate:
"foto": "pagina": 1, "pagine": "49825", "per pagina": 100, "totale": "4982408", "foto": ["id": "7338255166", "proprietario ":" 45596890 @ N00 "," segreto ":" 5f145a92b8 "," server ":" 7083 "," farm ": 8," titolo ":" Cute Rhea "," ispublic ": 1," isfriend ": 0 , "isfamily": 0, "id": "7338254718", "proprietario": "45596890 @ N00", "segreto": "9e1da794a3", "server": "7223", "farm": 8, " title ":" Rhea chewing "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338258850 "," owner ":" 8672236 @ N04 "," secret ": "d0a5c4124c", "server": "8027", "farm": 9, "title": "", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": " 7338271122 "," proprietario ":" 49270434 @ N08 "," segreto ":" 30876cfdf6 "," server ":" 7236 "," farm ": 8," title ":" 286 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338235972 "," owner ":" 8640124 @ N02 "," secret ":" a583d6aa48 "," server ":" 7085 "," farm " : 8, "title": "Y: 4 Day 123: Wind sweeps", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7330075254", "owner": "32081016 @ N07", "segreto": "04cb99 e8a7 "," server ":" 7239 "," farm ": 8," title ":" Mad dogs and Englishmen ... "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338229968 "," owner ":" 67178219 @ N06 "," secret ":" 92b4be222a "," server ":" 7095 "," farm ": 8," title ":" Le petit chien dans la prairie "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338185610 "," owner ":" 7315798 @ N04 "," secret ":" 9a91bd1280 "," server ":" 7224 "," farm ": 8," title ":" snuggle "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338111264 "," proprietario ":" 80044484 @ N06 "," segreto ":" f795c559e3 "," server ":" 7214 "," farm ": 8," titolo ":" DSC_0408 "," ispublic ": 1," isfriend ": 0, "isfamily": 0, "id": "7338135744", "proprietario": "80023312 @ N07", "segreto": "d37c015be6", "server": "7234", "farm": 8, "titolo ":" 0007_Ridgeback "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338136008 "," owner ":" 80023312 @ N07 "," secret ":" 259e50ebaa "," server ":" 7219 "," farm ": 8," title ":" 0003_Pug "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 73 38133290 "," proprietario ":" 80044484 @ N06 "," segreto ":" a2e954aab0 "," server ":" 7098 "," farm ": 8," titolo ":" _DSC0032 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338142010 "," owner ":" 80023312 @ N07 "," secret ":" 34809c804f "," server ":" 7071 "," farm " : 8, "title": "0009_WireFox", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7338014824", "owner": "36700168 @ N04", " secret ":" 2625ab12a4 "," server ":" 8164 "," farm ": 9," title ":" Nosferatus "dog", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7338092614", "proprietario": "80023312 @ N07", "segreto": "ee7210e0f1", "server": "8010", "farm": 9, "title": "0002_GreatDane", " ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338120200 "," owner ":" 80023312 @ N07 "," secret ":" 38b5c49f4f "," server ":" 7245 "," farm ": 8," title ":" 0006_Cavalier "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338159814 "," owner ":" 7315798 @ N04 "," segreto ":" 327e97cb13 "," server ":" 7104 "," farm ": 8," title ":" puppy love "," ispublic ": 1," isfriend ": 0, "isfamily": 0,
Useremo i dati dalla risposta per costruire i nostri URL alle immagini. Gli URLS hanno questo formato:
http: // farm farm-id .static.flickr.com / server id / id _ secret _ [mstzb] .jpg
Per creare un URL utilizzabile, sostituiamo semplicemente ciò che è all'interno di con i dati che otteniamo dall'alto. Ad esempio, il primo elemento dal foto l'array all'interno del JSON sopra riportato è:
"id": "7338255166", "proprietario": "45596890 @ N00", "segreto": "5f145a92b8", "server": "7083", "farm": 8, "title": "Cute Rhea", "ispublic": 1, "isfriend": 0, "isfamily": 0
... quindi l'URL che dobbiamo costruire è questo:
http://farm8.static.flickr.com/7083/7338255166_5f145a92b8_q.jpg
La "q" indica la dimensione dell'immagine: 150x150px.
Quel link porta a questa foto. Maggiori informazioni sugli URL sono disponibili nella documentazione di Flickr per URL di origine delle foto.
Nel download di origine c'è un file ZIP chiamato "StartHere.zip" che contiene i file disposti per te, pronto per aggiungere del codice. Puoi sfogliare questi file per ottenere un'idea della struttura del progetto. Ho anche incluso un "README.txt" che spiega la struttura in modo più dettagliato.
Stiamo usando le seguenti librerie JavaScript in questo progetto. Puoi scaricarli separatamente se lo desideri.
Accentsconagua
document.ready () All'interno della cartella "js" troverai il nome di un file JavaScript "flickrgame.js". Aggiungi il seguente codice a questo file.
$ (document) .ready (function () alert ("Ready");); Se testate la pagina "index.html" ora, dovreste vedere un avviso con la parola "Pronto".
Questo codice usa jQuery .pronto() metodo, che viene generato quando il DOM è completamente caricato. È importante chiamare questo metodo quando si codificano le app, perché è necessario assicurarsi che il DOM sia stato caricato prima di provare a manipolarlo. Ad esempio, se si è tentato di aggiungere un gestore di eventi click a un pulsante prima che il DOM fosse caricato e pronto, non avrebbe alcun effetto.
flickrGame Oggetto letteraleUseremo un oggetto chiamato flickrGame per mantenere tutte le nostre variabili pulite e ordinate e fuori dallo spazio dei nomi globale.
Inserisci il seguente codice all'interno del $ (Document) .ready () hai aggiunto nel passaggio precedente, sostituendo l'avviso.
$ (document) .ready (function () var flickrGame = );
All'interno del flickrGame oggetto letterale aggiungere il seguente codice. Sostituisci "YOUR API KEY" con la chiave API che hai ricevuto al momento della registrazione.
$ (document) .ready (function () var flickrGame = APIKEY: "LA TUA API KEY");
doSearch () Il doSearch () il metodo chiamerà l'API di Flickr. Inserisci il seguente sotto il flickrGame definizione letterale dell'oggetto (ma ancora all'interno del $ Document.ready () funzione):
function doSearch () var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags = dog" searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages);
Qui costruiamo la nostra richiesta passo dopo passo. Indichiamo il searchURL variabile al metodo flickr.photos.search dell'API di Flickr.
Poiché si tratta di un'API REST, per chiamarla abbiamo solo bisogno di costruire un URL con i parametri richiesti. Quindi, qui stiamo usando il flickr.photos.search metodo, e richiedendo immagini taggate con "cane". Abbiamo impostato il formato su "json" e impostato "jsoncallback =?", Che rende la funzione di callback eseguita non appena i dati sono stati recuperati.
Impostando il parametro di licenza tp 5,7 chiediamo a Flickr di fornirci solo immagini con una licenza Attribution-ShareAlike o senza alcuna licenza di copyright nota.
Usiamo quindi il metodo $ .getJSON () di jQuery, passando nel nostro searchURL e un riferimento alla funzione di callback setImages () che codificheremo dopo.
setImages () In questo passaggio verrà codificato il codice setImages () funzione e visualizzare i risultati che otteniamo da Flickr. Inserisci il seguente codice sotto il doSearch () funzione che hai aggiunto nel passaggio precedente.
function setImages (data) var tempString = ""; $ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; tempString + = imageURL + "
";); $ (" # urls "). html (tempString);
Qui inizializziamo una variabile tempString che conserverà gli URL che riceviamo da Flickr. All'interno di ogni oggetto, il parametro dati detiene il JSON che è stato restituito dalla chiamata all'API di Flickr, come illustrato nel passaggio 3 - in modo che possiamo vedere che i singoli oggetti fotografici si trovano in data.photos.photo.
Possiamo usare il metodo $ .each () di jQuery per fare il ciclo di ogni oggetto fotografico JSON che è stato restituito. All'interno del ciclo costruiamo il URL dell'immagine, di nuovo come descritto nel passaggio 3, quindi aggiungilo a tempString, e infine prodotto tempString al div chiamato "urls" modificando direttamente l'HTML del div.
Il punto qui è vedere quali URL stiamo ottenendo dalla nostra chiamata all'API di Flickr. Se stai seguendo il codice sorgente, ho aggiunto un div con id = "URL" quindi potremmo vederlo nella pagina web. (Lo rimuoverò nel passaggio successivo.)
Infine, per vederlo effettivamente, dobbiamo chiamare il nostro doSearch () funzione. Aggiungi questo proprio sotto il setImages () funzione.
doSearch ();
Puoi testarlo qui. Potrebbe essere necessario un secondo o due prima di vedere questi dati, a seconda della velocità di connessione. Di seguito sono riportati i primi URL restituiti, nel caso in cui non si segua il codice sorgente.
http://farm9.static.flickr.com/8025/7183874333_9b8b43dfe1_q.jpg http://farm9.static.flickr.com/8003/7368215016_3c42485ee9_q.jpg http://farm6.static.flickr.com/5467/7179453807_a4c871311f_q. jpg http://farm9.static.flickr.com/8002/7364322976_4f02a954ea_q.jpg http://farm9.static.flickr.com/8026/7177956063_6d92435602_q.jpg http://farm8.static.flickr.com/7221/7177959671_025cc2381b_q .jpg
Archiviamo tutti gli URL che recuperiamo da Flickr in un array, anziché raggruppati come una singola stringa. Aggiungi il seguente al flickrGame oggetto.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: []
(Assicurati di aggiungere la virgola dopo il APIKEY: "LA TUA API KEY".)
Ora, aggiungi il seguente all'interno del setImages () funzione. Ho rimosso il codice dal passaggio precedente, poiché era solo a scopo dimostrativo.
$ .each (data.photos.photo, function (i, item) 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););
Qui spingiamo il URL dell'immagine e numero identificativo dell'oggetto sul imageArray usando i tasti URL dell'immagine e PHOTOID rispettivamente. Abbiamo bisogno del URL dell'immagine costruire le nostre immagini e il PHOTOID sarà usato per identificare la foto particolare. Abbiamo anche bisogno di mostrare un'attribuzione per le foto che usiamo, e avendo il loro id possiamo collegare l'utente alla foto su Flickr.
La necessità di tutti questi dati diventerà più chiara man mano che passeremo attraverso il tutorial, quindi non preoccuparti troppo per ora.
infoLoaded () Il infoLoaded () la funzione verrà utilizzata per caricare le informazioni delle foto. Dopo che tutte le informazioni sulla foto sono state caricate, infoLoaded () chiamerà una funzione chiamata preloadImages () che precaricherà le immagini.
Una volta che tutte le immagini sono state precaricate chiamiamo drawImages (), che posiziona le immagini sullo schermo e il gioco inizia.
Aggiungi il seguente sotto il setImages () funzione.
funzione infoLoaded (data)
Il dati parametro terrà il JSON di ogni foto particolare. Torneremo su questo tra un po '; per ora useremo questa funzione per chiamare preloadImages () direttamente. Vai avanti e aggiungi la chiamata ora:
function infoLoaded (data) preloadImages ();
preloadImages () Il preloadImages () la funzione verrà utilizzata per creare e precaricare le immagini per l'inizio del gioco e per ogni livello. Li precarichiamo quindi non ci sono ritardi tra quando mostriamo le immagini e quando vengono scaricate.
Torneremo al codice di precaricamento in seguito. Per ora, creeremo solo le prime 12 immagini per l'inizio del gioco. Abbiamo bisogno di un nuovo array per contenere queste 12 immagini, quindi aggiungi il seguente al tuo flickrGame oggetto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: []
Assicurati di aggiungere una virgola dopo imageArray: [].
Il tempimages array è usato per contenere 12 immagini alla volta. Il nostro gioco utilizza 12 immagini per livello, e il imageArray contiene fino a 36 immagini (a seconda di quante impostiamo nella nostra ricerca su Flickr). Quindi prenderemo 12 immagini dal imageArray e conservali in tempimages.
Aggiungi il seguente codice sotto il infoLoaded () funzione che hai aggiunto nel passaggio precedente.
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); per (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);
Qui usiamo il metodo javascript splice () estrarre 12 immagini dal imageArray, e metterli nel tempimages array. Quindi usiamo un nidificato per loop per creare 24 immagini.
Per ognuna di queste 24 immagini, ne creiamo una nuova Immagine, impostare il suo src su "cardFront.png" (un'immagine che vedrai prima che la carta venga capovolta), crea una nuova proprietà chiamata Imagesource che contiene l'URL dell'immagine reale di Flickr da visualizzare, quindi lo inserisce nell'array le immagini.
Dobbiamo aggiungere le immagini a noi flickrGame oggetto, fallo ora.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: []
Assicurati di aver aggiunto la virgola dopo tempimages [].
Andiamo avanti e chiamiamo il drawImages () funzione pure; una volta che lo abbiamo scritto, questo renderà le immagini sullo schermo. Aggiungi il seguente dopo l'annidato per loop in preloadImages () funzione.
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); per (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
Il drawImages () la funzione mette effettivamente le immagini sullo schermo. Per prima cosa mischiamo le immagini nel le immagini array usando una funzione chiamata randSort e quindi aggiungerli al #gamediv sezione dell'HTML.
Inserisci il seguente codice sotto il flickrGame definizione dell'oggetto:
function randOrd () return (Math.round (Math.random ()) - 0.5);
Questa funzione è usata per mescolare le immagini. Chiameremo JavaScript ordinare() metodo su un array e passare randOrd come parametro Funziona sostanzialmente allo stesso modo descritto in "L'approccio di ordinamento" in questo articolo.
Aggiungi il seguente sotto il preloadImages () funzione che hai aggiunto nel passaggio precedente:
function drawImages () flickrGame.theImages.sort (randOrd); per (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); Chiamiamo il metodo di ordinamento su le immagini, passando nel nostro randOrd funzione, quindi passa attraverso le immagini, aggiungendo ogni immagine al #gamediv.
Usiamo il metodo jQuery .attr aggiungere una classe di "carta" a ciascuna immagine. Perché? Perché quando finiamo un livello, rimuoviamo le carte dal #gamediv; questo ci dà un modo per indirizzare solo le carte e non tutti immagini.
Qui ci sono i link ai metodi attr () e appendTo () di jQuery in modo che tu possa saperne di più su di loro.
Dovremmo essere pronti per ottenere alcune carte sullo schermo a questo punto. Dopo il .ogni() chiamare setImages chiama il infoLoaded () funzione e testare la pagina.
function setImages (data) $ .each (data.photos.photo, function (i, item) 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 ();
Se tutto va bene dovresti vedere 24 immagini con il logo di Flickr sullo schermo. Potrebbe volerci un momento prima che vengano visualizzati, perché stiamo chiamando l'API di Flickr e caricando anche le immagini.
Faremo una piccola modifica al codice in modo da poter vedere le immagini reali per ora. Modifica il preloadImages () funzione per mostrare l'immagine reale al posto di "cardFront.png":
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); per (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = flickrGame.tempImages[i].imageUrl; //"cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
Prova il gioco ora.
Il addListeners () la funzione aggiungerà un click listener a ciascuna delle immagini che chiama una funzione doFlip (), che a sua volta rivelerà l'immagine sottostante (se il logo è attualmente visualizzato).
Aggiungi il seguente sotto il drawImages () funzione che hai aggiunto nel passaggio precedente:
function addListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).on("click", function (e) doFlip(e); ); Aggiungiamo gli ascoltatori nel drawImages () funzione:
function drawImages () flickrGame.theImages.sort (randOrd); per (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Abbiamo bisogno di un modo per rimuovere anche gli ascoltatori di clic dalle immagini. Aggiungi il seguente sotto il addListeners () funzione che hai aggiunto nel passaggio precedente.
function removeListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).off("click"); doFlip () Il doFlip () la funzione viene chiamata quando l'utente fa clic su una delle immagini. Visualizza le immagini grandi a sinistra ea destra dell'area di gamplay principale, quindi chiama una funzione checkForMatch () che controlla se le immagini corrispondono.
Aggiungi il seguente sotto il removeListeners () funzione che hai aggiunto nel passaggio precedente.
function doFlip (e) var theCard = e.target; $ (theCard) .attr ("src", theCard.imageSource); if ($ ('# image1'). css ('backgroundImage') == "none") $ ('# image1'). css ('backgroundImage', 'url (' + theCard.imageSource + ')') ; else $ ('# image2'). css ('backgroundImage', 'url (' + theCard.imageSource + ')'); if (flickrGame.chosenCards.indexOf (theCard) == -1) flickrGame.chosenCards.push (theCard); $ (TheCard) .OFF ( "click"); if (flickrGame.chosenCards.length == 2) removeListeners (); checkForMatch (); Per prima cosa otteniamo un riferimento a quale carta è stata selezionata e impostata src attributo all'URL dell'immagine reale (piuttosto che al logo di Flickr).
Verifichiamo quindi se lo sfondo CSS della grande immagine a sinistra (# image1) è uguale a "none" e se lo è, impostiamo la sua immagine di sfondo sulla stessa immagine della carta su cui abbiamo cliccato. Se non è uguale a "nessuno", significa che una carta è stata cliccata, quindi impostiamo l'immagine di sfondo della grande immagine sul destra.
Controlliamo che il chosenCards la matrice (che aggiungeremo in un momento) non contiene già questa scheda, per una pulizia sicura, quindi la spinge sull'array. Inoltre, rimuoviamo l'evento click dalla scheda in modo che non possano più cliccarci sopra.
Se la chosenCards la lunghezza è uguale a 2 significa che l'utente ha scelto due carte, quindi chiamiamo removeListeners () rimuovere l'evento click dal resto delle carte e chiamare il checkForMatch () funzione (che codificheremo nel passaggio successivo) per vedere se le carte selezionate corrispondono.
Abbiamo bisogno di aggiungere il chosenCards matrice al nostro flickrGame oggetto, quindi fallo ora:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chooseCards: []
Assicurati di aggiungere una virgola dopo le immagini[].
checkForMatch () Il checkForMatch () la funzione controlla se le due carte cliccate corrispondono. Se lo fanno, li "nascondiamo"; se non lo fanno, aggiungiamo gli ascoltatori alle carte rimanenti e lasciamo che il giocatore faccia un altro tentativo.
Aggiungi il seguente sotto il doFlip () funzione che hai aggiunto nel passaggio precedente:
function checkForMatch () if (flickrGame.chosenCards.length == 2) if ($ ("# image1"). css ('background-image') == $ ("# image2"). css ('background image ')) setTimeout (hideCards, 1000); else setTimeout (resetImages, 1000); Qui, controlliamo se il chosenCards la lunghezza è uguale a 2. Se lo è, controlliamo se le due grandi immagini sono le stesse usando le loro immagine di sfondo. (Avremmo potuto usare invece le immagini più piccole, come esercizio, vedi se puoi farlo.)
Se le immagini corrispondono, useremo setTimeout () chiamare il hideCards () funzione dopo un secondo; altrimenti chiamiamo resetImages () dopo un secondo. Ritardando queste chiamate di funzione, aggiungiamo una pausa molto breve al gioco.
Codificheremo le funzioni per nascondere le carte e ripristinare le immagini successive.
hideCards () Se l'utente ha abbinato due carte, le nascondiamo entrambe e aggiungiamo gli ascoltatori di clic al resto delle carte.
Aggiungi il seguente codice sotto il checkForMatch () funzione creata nel passaggio precedente:
function hideCards () $ (flickrGame.chosenCards [0]). animate ('opacity': '0'); $ (flickrGame.chosenCards [1]). animate ('opacità': '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', 'none'); $ ("# image2"). css ('background-image', 'none'); addListeners (); flickrGame.chosenCards = new Array (); Usiamo il metodo animate () di jQuery per interpolare l'opacità di entrambe le carte su 0, facendole apparire in dissolvenza. Rimuoviamo anche le immagini dal le immagini array, reimposta gli sfondi delle immagini grandi su "none", aggiungi gli ascoltatori alle altre immagini e reimposta i nostri chosenCards schieramento.
Provalo qui.
resetImages () Questa funzione viene eseguita se le due immagini selezionate non corrispondono. Reimposta le immagini piccole ' src torna a "cardFront.png", imposta lo sfondo delle immagini grandi su "none", aggiunge gli ascoltatori alle carte e reimposta il chosenCards schieramento.
Aggiungi il seguente sotto il hideCards funzione che hai aggiunto nel passaggio precedente.
function resetImages () $ (flickrGame.chosenCards [0]). attr ("src", "cardFront.png"); $ (flickrGame.chosenCards [1]). attr ("src", "cardFront.png"); $ ("# image1"). css ('background-image', 'none'); $ ("# image2"). css ('background-image', 'none'); addListeners (); flickrGame.chosenCards = new Array (); Puoi effettivamente giocare ora - tranne che le immagini stanno mostrando. Per cambiarlo, modifica il preloadImages () funzione in questo modo:
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); per (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
(È bene cambiare questo avanti e indietro per un facile test.)
Ecco il risultato!
Questa è la fine della prima parte di questo tutorial. Finora, hai creato un gioco HTML5 funzionale; nella parte successiva, aggiungerai lo smalto, imparando come:
Ci vediamo!
