Share
In questo tutorial, eseguiremo un browser game di base (che abbiamo creato in un tutorial Tuts + Premium) e aggiungere barre di avanzamento, un preloader, una schermata iniziale e molto più lucido.
In questo tutorial Tuts + Premium, abbiamo creato un gioco di corrispondenza delle carte di base con JavaScript, le cui immagini provengono da Flickr. Guarda la demo:
Clicca per provare il gioco così com'è ora.
In questo tutorial, aggiungeremo molto smalto al gioco, implementando un preloader e una barra di avanzamento, una schermata iniziale e una ricerca per parola chiave. Dai un'occhiata a come andrà a finire il gioco:
Clicca per provare il gioco con i miglioramenti che aggiungeremo.
In questo tutorial imparerai il codice JavaScript e HTML necessari per codificare tutti questi miglioramenti. Scarica i file sorgente ed estrai la cartella chiamata Comincià qui; questo contiene tutto il codice dalla fine del tutorial Premium.
Nel flickrgame.js c'è una funzione chiamata preloadImage (), che contiene questa linea:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
Ai fini del test, cambiarlo in:
tempImage.src = "cardFront.jpg";
Questo mostrerà le immagini sulle carte tutto il tempo, il che rende il test molto più facile. Puoi cambiarlo in qualsiasi momento.
Ora, continua a leggere!
Accentsconagua
addKeyPress () In questo momento abbiamo il codice "cane" codificato, ma il gioco diventerà noioso rapidamente se costringiamo l'utente a usare sempre le foto dei cani!
L'input di ricerca è stato seduto lì con un bell'aspetto, ma essendo totalmente non-funzionale per tutto questo tempo. Risolviamolo. Ascolteremo l'utente per premere il tasto Invio e quindi chiamare il doSearch () metodo usando qualunque cosa abbiano digitato per chiamare l'API di Flickr.
Aggiungi il seguente sotto il resetImages () funzione, in flickrgame.js.
function addKeyPress () $ (document) .on ("keypress", function (e) if (e.keyCode == 13) doSearch ();); Qui ascoltiamo un keypress e se il chiave è uguale a 13, sappiamo che hanno premuto il tasto Invio così chiamiamo il doSearch () funzione.
Abbiamo bisogno di modificare il doSearch funzione per utilizzare il testo nell'input, quindi apportare le seguenti modifiche:
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("keypress"); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Qui, per prima cosa controlliamo che l'input non sia vuoto (non vogliamo cercare nulla), quindi rimuoviamo il pressione di un tasto ascoltatore. Infine, alteriamo il tag per usare il valore dell'input.
L'ultima cosa che dobbiamo fare è rimuovere la chiamata a doSearch () nel file JS. Trova dove stiamo chiamando manualmente doSearch () e rimuoverlo. (È proprio dopo il addKeyPress () funzione.)
Non dimenticare di chiamare effettivamente il addKeyPress () funzione. L'ho chiamato proprio sotto dove l'ho dichiarato.
function addKeyPress () $ (document) .on ("keypress", function (e) if (e.keyCode == 13) doSearch ();); addKeyPress (); Ora se testi il gioco non vedrai nessuna immagine finché non effettuerai una ricerca.
Quando facciamo la nostra prima chiamata all'API di Flickr c'è un leggero ritardo. Mostreremo un GIF animato (un "throbber") mentre contattiamo il server e lo rimuoviamo una volta che la chiamata ritorna.
Aggiungi il seguente al doSearch () funzione.
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("keypress"); $ ("# infoprogress"). css ('visibility': 'visible'); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Questo imposta il #infoprogress div per essere visibile. Una volta che le informazioni torneranno da Flickr, le nasconderemo. Per fare ciò, aggiungi il seguente codice al setImages () funzione:
function setImages (data) $ ("# infoprogress"). css ('visibility': 'hidden'); $ .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 stai testando il gioco ora, dovresti vedere l'immagine del loader mostrare mentre contatti l'API di Flickr.
Abbiamo bisogno di ottenere le informazioni per ogni foto che usiamo. Chiameremo il method = flickr.photos.getInfo su ogni foto, quindi chiama il infoLoaded () funzione ogni volta che le informazioni vengono caricate. Una volta l'informazione per ogni la foto è stata caricata, il gioco continua come prima.
Ci sono molte nuove informazioni da prendere qui, quindi lo scomporremo passo dopo passo. Innanzitutto, aggiungi quanto segue al setImages () funzione:
function setImages (data) $ ("# infoprogress"). css ('visibility': 'hidden'); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibility': 'hidden'); $ .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); var getPhotoInfoURL = "http: // api .flickr.com / services / rest /? method = flickr.photos.getInfo "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; getPhotoInfoURL + =" & format = json "; getPhotoInfoURL + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); else alert ("NON ABBASTANZA IMMAGINI SONO STATI RESTITUITI"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Ora che stiamo ricevendo i tag da parte dell'utente dovremmo assicurarci che siano state restituite abbastanza immagini per creare un singolo gioco (12). Se è così, nascondiamo l'input in modo che il giocatore non possa effettuare un'altra ricerca a metà partita. Impostiamo una variabile getPhotoInfoURL e usa il method = flickr.photos.getInfo - nota che stiamo usando il numero identificativo dell'oggetto per il photo_id. Quindi usiamo il jQuery getJSON metodo e chiama infoLoaded.
Se non vengono restituite abbastanza immagini, solleviamo un avviso e chiamiamo addKeyPress () quindi l'utente può fare un'altra ricerca.
Quindi abbiamo bisogno di sapere quante immagini sono state restituite dalla chiamata all'API di Flickr e la memorizziamo nella variabile numberPhotosReturned, che aggiungiamo al nostro flickrGame oggetto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0
(Assicurati di aggiungere una virgola dopo scelteCard: [].)
Non possiamo ancora testare; se lo facessimo, chiameremmo preloadImages () 36 volte di seguito dato che è tutto nostro infoLoaded () la funzione fa al momento. Sicuramente non quello che vogliamo. Nel prossimo passo approfondiremo il infoLoaded () funzione.
infoLoaded () Il infoLoaded () la funzione riceve informazioni su una singola foto. Aggiunge le informazioni al imageArray per la foto corretta e tiene traccia di quante informazioni sono state caricate; se questo numero è uguale a numberPhotosReturned, chiama preloadImages ().
Elimina la chiamata a preloadImages () e metti il seguente all'interno del infoLoaded () funzione:
flickrGame.imageNum + = 1; indice var = 0; per (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();
Qui incrementiamo il imageNum variabile e impostare una variabile indice uguale a 0. All'interno del ciclo for controlliamo se il file PHOTOID nel imageArray è uguale al data.photo.id (ricorda il dati è una rappresentazione JSON dell'immagine attualmente in fase di elaborazione). Se corrispondono corrispondono a noi indice uguale a io e aggiorna l'indice appropriato nel imageArray con un nome utente e photoURL variabile. Avremo bisogno di queste informazioni quando mostreremo le attribuzioni dell'immagine in seguito.
Questo potrebbe sembrare un po 'confuso, ma tutto quello che stiamo facendo è abbinare le foto. Dal momento che non conosciamo l'ordine con cui verranno restituiti dal server, ci assicureremo che il loro id corrisponda, e quindi potremo aggiungere il nome utente e photoURL variabili alla foto.
Infine, controlliamo se imageNum è uguale al numberPhotosReturned, e se è allora tutte le immagini sono state elaborate, così chiamiamo preloadImages ().
Non dimenticare di aggiungere il imageNum al flickrGame oggetto.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0
(Assicurati di aggiungere una virgola dopo il numberPhotosReturned: 0.)
Se fai il test ora ci vorrà un po 'più tempo per vedere le foto. Oltre a chiamare l'API di Flickr per recuperare le foto, ora stiamo ottenendo informazioni su ciascuna di esse.
In questo passaggio verrà visualizzata la barra di avanzamento quando carichiamo le informazioni sulla foto.
Aggiungi il seguente codice al setImages () funzione:
function setImages (data) $ ("# infoprogress"). css ('visibility': 'hidden'); $ ("# progressdiv"). css ('visibility': 'visible'); $ ("# progressdiv p"). text ("Caricamento delle informazioni sulla foto"); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibility': 'hidden'); $ .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); var getPhotoInfoURL = "http: // api .flickr.com / services / rest /? method = flickr.photos.getInfo "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; getPhotoInfoURL + =" & format = json "; getPhotoInfoURL + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); else $ ("# progressdiv"). css ('visibility': 'hidden'); avviso ("NON ABBASTANZA IMMAGINI SONO STATI RESTITUITI"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Questo mostra il #progressdiv e cambia il testo del paragrafo all'interno del #progressdiv leggere "Caricamento delle informazioni sulla foto". Se non sono state restituite abbastanza immagini, nascondiamo il #progressdiv.
Quindi aggiungere il seguente al infoLoaded () funzione:
function infoLoaded (data) flickrGame.imageNum + = 1; var percentage = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ ("# progressbar"). progressbar (valore: percentuale); indice var = 0; per (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(); Qui impostiamo una variabile percentuale uguale a Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); questo ci assicura di ottenere un numero compreso tra 0 e 100. Quindi chiamiamo $ ( "# Progressbar"). Progressbar () e impostare il valore proprietà pari a percentuale.
Ora se testi il gioco dovrebbe funzionare come prima, ma con una barra di avanzamento. Bene, c'è un problema: la barra di avanzamento si attacca dopo che le immagini sono state disegnate. Nel gioco prima carichiamo le informazioni sulla foto, quindi pre-carichiamo le immagini ed entrambi utilizziamo la barra di avanzamento. Lo risolveremo nel prossimo passaggio.
In questo passaggio utilizzeremo il plugin jQuery.imgpreload (è già nel download sorgente). Non appena sono state caricate tutte le informazioni sui file dai passaggi precedenti, la barra di avanzamento si ripristina e monitora il caricamento delle immagini.
Aggiungi il seguente al 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); $("#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(); ); Qui impostiamo il #progressdiv per essere visibile e modificare il paragrafo per leggere "Caricamento immagini". Impostiamo un array temporaneo e aggiungiamo gli URL delle immagini temporanee ad esso, quindi passiamo all'intero array $ .imgpreload per dare il via al precarico.
Il ogni la funzione viene eseguita ogni volta che una foto è precaricata e la tutti la funzione viene eseguita quando tutte le immagini sono state precaricate. Dentro ogni() controlliamo per accertarci che l'immagine sia stata effettivamente caricata, incrementa il valore numImagesLoaded variabile e utilizzare lo stesso metodo per la percentuale e la barra di avanzamento come in precedenza. (Il totalImages è 12 poiché quello che stiamo usando per gioco.)
Una volta che tutte le immagini sono state precaricate (cioè, quando tutti() è eseguito) abbiamo impostato il #progessdiv nascondere e chiamare il drawImages () funzione.
Abbiamo bisogno di aggiungere il numImagesLoaded e totalImages variabili al nostro flickrGame oggetto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12
(Assicurati di aver aggiunto la virgola dopo imageNum.)
Se stai testando il gioco ora, dovresti vedere la barra di avanzamento sia per le informazioni sulla foto che per il precaricamento delle immagini.
Per conformarci ai termini di servizio dell'API di Flickr, dobbiamo mostrare le attribuzioni per le immagini che usiamo. (È anche educato a farlo.)
Aggiungi il seguente codice all'interno del hideCards () funzione:
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'); if (flickrGame.theImages.length == 0) $ ("# gamediv img.card"). remove (); $ ("# gamediv"). css ('visibility': 'hidden'); showAttributions (); addListeners (); flickrGame.chosenCards = new Array (); Qui, controlliamo se il numero di immagini rimaste è zero, e in tal caso sappiamo che l'utente ha abbinato tutte le carte. Pertanto rimuoviamo tutte le carte dal DOM e impostiamo il #gamediv essere nascosto. Quindi, chiamiamo il showAttributions () funzione che codificheremo in seguito.
In questo passaggio verrà codificato il codice showAttributions () funzione.
Aggiungi il seguente sotto il checkForMatch () funzione che hai codificato nei passaggi precedenti:
function showAttributions () $ ("# attributionsdiv"). css ('visibility': 'visible'); $ ("# attributionsdiv div"). each (function (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). next (). html ( 'Nome utente: '+ flickrGame.tempImages [index] .username +'
'+' Visualizza foto '); ); Qui impostiamo il #attributionsdiv per essere visibile, e quindi passare attraverso ogni div all'interno di esso. Ci sono 12 div, ciascuno con un'immagine e un paragrafo; usiamo jQuery trova() metodo per trovare il img all'interno del div, impostare il src dell'immagine corretta URL dell'immagine, e usare jQuery Il prossimo() metodo per impostare il nome utente e photoURL alle informazioni da Flickr.
Ecco i link ai metodi find () e next () di jQuery in modo che tu possa saperne di più su di essi.
Se stai testando il gioco ora e giochi attraverso un livello, vedrai le attribuzioni con un link all'immagine su Flickr. Vedrai anche due pulsanti: uno per il livello successivo e uno per un nuovo gioco. Otterremo questi pulsanti funzionanti nei prossimi passi.
Nella nostra chiamata all'API di Flickr che impostiamo per pagina a 36, per richiedere più immagini contemporaneamente. Dato che stiamo usando 12 immagini per gioco, questo significa che possono esserci fino a tre livelli. In questo passaggio avremo il pulsante Next Level funzionante.
Aggiungi il seguente codice all'interno del setImages () funzione:
function setImages (data) // ... snip ... flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
Dobbiamo sapere quanti livelli avrà il gioco. Questo dipende da quante immagini sono state restituite dalla nostra ricerca. Non sarà sempre 36. Ad esempio, ho cercato "hmmmm" e restituito circa 21 foto al momento. Useremo Math.floor () per arrotondare il numero - non vogliamo i livelli 2.456787, dopotutto, e butterebbe via la logica del gioco.
Assicurati di aggiungere il numberLevels variabile al flickrGame oggetto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0
(Non dimenticare di aggiungere la virgola dopo totalImages: 12.)
Ora modifica il drawImages () funzione come segue:
function drawImages () flickrGame.currentLevel + = 1; $ ("# leveldiv"). css ('visibility': 'visible'). html ("Livello" + flickrGame.currentLevel + "di" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); per (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Qui incrementiamo il livello attuale variabile, impostare il #leveldiv essere visibile e impostare l'HTML del div per leggere in che livello ci troviamo e quanti livelli ci sono.
Ancora una volta, dobbiamo aggiungere il livello attuale variabile al nostro flickrGame oggetto.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0, currentLevel: 0
(Sono sicuro che non hai bisogno di ricordare ora, ma assicurati di aggiungere la virgola dopo numberLevels: 0.)
Ora modifica il showAttributions () funzione al seguente:
function showAttributions () $ ("# leveldiv"). css ('visibility': 'hidden'); $ ("# attributionsdiv"). css ('visibility': 'visible'); if (flickrGame.currentLevel == flickrGame.numberLevels) $ ("# nextlevel_btn"). css ('visibility': 'hidden'); else $ ("# nextlevel_btn"). css ('visibility': 'visible'); $ ("# attributionsdiv div"). each (function (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl); $ (this). trovare ( 'p'). html ('Nome utente: '+ flickrGame.tempImages [index] .username +'
'+' Visualizza foto '); ); Noi nascondiamo il #leveldiv impostandone la visibilità nascosto.
Quindi controlliamo se il livello attuale è uguale al numberLevels. Se sono uguali, non ci sono più livelli disponibili, quindi nascondiamo il #nextlevel_btn; altrimenti, lo mostriamo.
Finalmente abbiamo bisogno di cablare il #nextlevel_btn. Aggiungi il seguente codice sotto il addKeyPress () funzione creata nel passaggio precedente:
$ ("# nextlevel_btn"). on ("click", function (e) $ (this) .css ('visibility': 'hidden'); $ ("# gamediv"). css ('visibility ':' visible '); $ ("# attributionsdiv"). css (' visibility ':' hidden '); flickrGame.numImagesLoaded = 0; preloadImages ();); Qui nascondiamo il pulsante, riveliamo il #gamediv, nascondi il #attributionsdiv, resettare il numImagesLoaded variabile e chiama preloadImages () che afferra le successive 12 immagini.
Puoi testare il gioco ora e dovrebbe essere in grado di giocare attraverso tutti i livelli. Noi cableremo il #newgame_btn nei prossimi passi.
Puoi iniziare una nuova partita in qualsiasi momento, ma dopo che tutti i livelli sono stati giocati questa è l'unica opzione. In questo passo collegheremo il #newgame_btn.
Aggiungere quanto segue al di sotto del codice per #nextlevel_btn hai aggiunto nel passaggio sopra:
$ ("# newgame_btn"). on ("clic", funzione (e) $ ("# gamediv"). css ('visibility': 'visible'); $ ("# leveldiv"). css ( 'visibility': 'hidden'); $ ("# attributionsdiv"). css ('visibility': 'hidden'); $ ("# searchdiv"). css ('visibility': 'visible' ); $ ("# nextlevel_btn"). css ('visibility': 'hidden'); flickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = new Array (); flickrGame.currentLevel = 0 ; flickrGame.numberLevels = 0; addKeyPress ();); Qui riveliamo il #gamediv, nascondi il #leveldiv e #attributionsdiv, rivelare il #searchdiv, e nascondere il #nextlevel_btn. Quindi ripristiniamo alcune variabili e chiamiamo addKeyPress () quindi l'utente può cercare di nuovo.
Se stai provando ora dovresti essere in grado di iniziare una nuova partita in qualsiasi momento, così come quando sono stati giocati tutti i livelli.
Il gioco è completo per quanto riguarda il gameplay, ma abbiamo bisogno di mostrare una schermata iniziale. Lo faremo nel prossimo passaggio.
Dobbiamo apportare alcune modifiche al nostro file CSS. In particolare, abbiamo bisogno di impostare il #gamediv visibilità a nascosto, e impostare il #introscreen a visibile. Aperto stili / game.css e apporta queste modifiche ora:
#gamediv position: absolute; a sinistra: 150px; larghezza: 600px; altezza: 375px; bordo: 1px solido nero; padding: 10px; color: # FF0080; visibility: hidden; background: #FFFFFF url ('... /pattern.png'); #introscreen position: absolute; a sinistra: 150px; larghezza: 600px; altezza: 375px; bordo: 1px solido nero; padding-top: 10px; color: # FF0080; visibilità: visibile; background: #FFFFFF url ('... /pattern.png'); padding-left: 80px; Quindi abbiamo bisogno di cambiare il addKeyPress () funzione. Rimuovi tutto da addKeyPress () e sostituirlo con il seguente:
function addKeyPress () $ (document) .on ("keypress", function (e) if (e.keyCode == 13) if (! flickrGame.gameStarted) hideIntroScreen (); else doSearch (); flickrGame.gameStarted = true;); Qui controlliamo se l'utente ha premuto il tasto Invio, quindi controlliamo se il gioco è iniziato. Se no, chiamiamo hideIntroScreen (); altrimenti, chiamiamo doSearch (); in entrambi i casi, abbiamo contrassegnato il gioco come iniziato. Ciò significa che la prima volta che l'utente preme Invio, chiamerà hideIntroScreen (), e la prossima volta che l'utente preme il tasto Invio chiamerà doSearch ().
Ora abbiamo bisogno di codificare il hideIntroScreen () funzione. Aggiungi il seguente sotto il addKeyPress () funzione:
function hideIntroScreen () $ ("# gamediv"). css ('visibility': 'visible'); $ ("# introscreen"). css ('visibility': 'hidden'); Se testi il gioco ora dovresti vedere la schermata iniziale; premi Invio e puoi giocare come prima.
In questo momento se non vengono restituite abbastanza immagini per un gioco, viene visualizzato un avviso. Sebbene funzioni, possiamo renderlo un po 'più bello usando la finestra di dialogo dell'interfaccia utente di jQuery.
Dobbiamo modificare index.html, quindi aprilo e aggiungi il seguente diritto all'interno del #gamediv:
Non sono state restituite immagini sufficienti, prova una parola chiave diversa.
Ora abbiamo bisogno di legarlo. Aggiungi il seguente sotto il
hideIntroScreen ()funzione nel file JS:$ ("# dialog"). dialog (autoOpen: false);Questo codice converte il
#dialogodiv in una finestra di dialogo; disabilitiamo la funzione di auto-apertura.Vogliamo attivare questa finestra di dialogo per aprire anziché l'avviso che avevamo prima, quindi rimuovere l'avviso dal
setImages ()funzione e sostituirlo con il seguente:else $ ("# progressdiv"). css ('visibility': 'hidden'); $ ( "# Finestra di dialogo") finestra di dialogo ( 'aperto.'); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Ora, se non vengono restituite abbastanza immagini, otteniamo una bella finestra di dialogo, invece di usare un avviso che ricorda le pagine web degli anni '90.
Non dimenticare di cambiare questa linea, da
preloadImages ():tempImage.src = "cardFront.jpg";... torna a questo:
tempImage.src = flickrGame.tempImages [i] .imageUrl;... altrimenti, il gioco sarà un po 'troppo facile!
Ora prova il gioco finale. Se qualcosa non va bene, puoi sempre confrontare la tua fonte con la mia o fare una domanda nei commenti.
Conclusione
Abbiamo codificato un divertente gioco usando le immagini dell'API di Flickr e gli abbiamo dato uno strato discreto o due di lucido. Spero ti sia piaciuto questo tutorial e ho imparato qualcosa di utile. Grazie per aver letto e divertito!
