Share
In diesem Lernprogramm nehmen wir ein einfaches Browserspiel (das wir in einem Tuts + Premium-Lernprogramm erstellt haben) und fügen Fortschrittsbalken, einen Preloader, einen Begrüßungsbildschirm und vieles mehr hinzu.
In diesem Tuts + Premium-Tutorial haben wir ein grundlegendes Kartenanpassungsspiel mit JavaScript entwickelt, dessen Bilder von Flickr stammen. Schauen Sie sich die Demo an:
Klicken Sie hier, um das Spiel so zu testen, wie es jetzt ist.
In diesem Lernprogramm werden wir dem Spiel eine Menge Politur hinzufügen, indem wir einen Preloader und einen Fortschrittsbalken, einen Begrüßungsbildschirm und eine Stichwortsuche implementieren. Schauen Sie sich an, wie das Spiel aussehen wird:
Klicken Sie hier, um das Spiel mit den Verbesserungen zu testen, die wir hinzufügen werden.
In diesem Lernprogramm lernen Sie JavaScript und HTML, um alle diese Verbesserungen zu kodieren. Laden Sie die Quelldateien herunter und extrahieren Sie den Ordner mit dem Namen Fang hier an; Dieser enthält den gesamten Code vom Ende des Premium-Tutorials.
Im flickrgame.js Es gibt eine Funktion namens preloadImage (), welche enthält diese Zeile:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
Ändern Sie es zu Testzwecken in:
tempImage.src = "cardFront.jpg";
Dadurch werden die Bilder ständig auf den Karten angezeigt, was das Testen erheblich vereinfacht. Sie können dies jederzeit wieder ändern.
Nun lesen Sie weiter!
Accentsconagua
addKeyPress () Im Moment haben wir den Tag "dog" hart codiert, aber das Spiel wird schnell langweilig, wenn wir den Benutzer zwingen, ständig Hundefotos zu verwenden!
Die Sucheingabe saß da und sah hübsch aus, war aber die ganze Zeit völlig ohne Funktion. Lass uns das reparieren. Wir hören darauf, dass der Benutzer die Eingabetaste drückt, und rufen dann die doSearch () Diese Methode verwendet das, was sie eingegeben haben, um die Flickr-API aufzurufen.
Fügen Sie Folgendes unter dem hinzu resetImages () Funktion, in flickrgame.js.
function addKeyPress () $ (document) .on ("Tastendruck", Funktion (e) if (e.keyCode == 13) doSearch ();); Hier hören wir auf einen Tastendruck und ob der keyCode ist gleich 13, wir wissen, dass sie die Eingabetaste gedrückt haben, also rufen wir die an doSearch () Funktion.
Wir müssen das ändern doSearch Um den Text in der Eingabe zu verwenden, nehmen Sie die folgenden Änderungen vor:
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("Tastendruck"); 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); Hier überprüfen wir zuerst, dass die Eingabe nicht leer ist (wir wollen nicht nach nichts suchen), dann entfernen wir die Tastendruck Hörer. Zum Schluss ändern wir die Stichworte um den Wert der Eingabe zu verwenden.
Das letzte, was wir tun müssen, ist den Anruf zu entfernen doSearch () in der JS-Datei. Finden Sie heraus, wo wir manuell anrufen doSearch () und entferne es. (Es ist direkt nach dem addKeyPress () Funktion.)
Vergessen Sie nicht, die tatsächlich anzurufen addKeyPress () Funktion. Ich habe es direkt unterhalb der Erklärung genannt.
function addKeyPress () $ (document) .on ("Tastendruck", Funktion (e) if (e.keyCode == 13) doSearch ();); addKeyPress (); Wenn Sie nun das Spiel testen, sehen Sie keine Bilder, bis Sie eine Suche durchführen.
Beim ersten Aufruf der API von Flickr tritt eine leichte Verzögerung auf. Wir zeigen ein animiertes GIF (einen "Throbber"), während wir den Server kontaktieren, und entfernen es, sobald der Anruf zurückkommt.
Fügen Sie Folgendes dem hinzu doSearch () Funktion.
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("Tastendruck"); $ ("# infoprogress"). css ('Sichtbarkeit': 'sichtbar'); 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); Dies setzt die #infoprogress div sichtbar sein. Sobald die Informationen von Flickr zurückgegeben werden, werden wir sie ausblenden. Fügen Sie dazu den folgenden Code hinzu setImages () Funktion:
function setImages (data) $ ("# infoprogress"). css ('Sichtbarkeit': 'versteckt'); $ .each (data.photos.photo, Funktion (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 (); Wenn Sie das Spiel jetzt testen, sollte das Ladeprogramm angezeigt werden, während Sie sich mit der Flickr-API in Verbindung setzen.
Wir müssen die Informationen für jedes von uns verwendete Foto erhalten. Wir rufen die an method = flickr.photos.getInfo auf jedem Foto und rufen Sie dann die infoLoaded () Funktion jedes Mal, wenn die Informationen geladen werden. Sobald die Informationen für jeden Foto wurde geladen, das Spiel wird wie bisher fortgesetzt.
Es gibt viele neue Informationen, die wir hier berücksichtigen müssen. Wir werden sie Schritt für Schritt aufschlüsseln. Fügen Sie zunächst Folgendes hinzu setImages () Funktion:
function setImages (data) $ ("# infoprogress"). css ('Sichtbarkeit': 'versteckt'); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('Sichtbarkeit': 'versteckt'); $ .each (data.photos.photo, Funktion (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 ("KEINE BILDER SIND ZURÜCKGESETZT"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Jetzt, da wir die Tags vom Benutzer erhalten, sollten wir sicherstellen, dass genügend Bilder zurückgegeben werden, um ein einziges Spiel zu erstellen (12). Wenn dies der Fall ist, blenden wir die Eingabe aus, sodass der Spieler während des Spiels keine weitere Suche durchführen kann. Wir setzen eine Variable getPhotoInfoURL und benutze die method = flickr.photos.getInfo - Beachten Sie, dass wir die verwenden Artikel Identifikationsnummer für die Lichtbildausweis. Wir verwenden dann die jQuery's getJSON Methode und Aufruf infoLoaded.
Wenn nicht genügend Bilder zurückgegeben wurden, geben wir eine Warnmeldung aus und rufen an addKeyPress () So kann der Benutzer eine andere Suche durchführen.
Wir müssen also wissen, wie viele Bilder vom Aufruf an die Flickr-API zurückgegeben wurden, und wir speichern dies in der Variablen numberFotosReturned, die wir zu unserem hinzufügen flickrGame Objekt:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0
(Stellen Sie sicher, dass Sie nach dem Komma ein Komma hinzufügen gewählteKarten: [].)
Wir können es noch nicht testen. Wenn wir das tun würden, würden wir anrufen preloadImages () 36 mal in Folge, da ist alles unser infoLoaded () Funktion macht im Moment. Bestimmt nicht, was wir wollen. Im nächsten Schritt werden wir das ausarbeiten infoLoaded () Funktion.
infoLoaded () Das infoLoaded () Die Funktion empfängt Informationen zu einem einzelnen Foto. Es fügt die Informationen zum hinzu imageArray für das richtige Foto und verfolgt, wie viele Fotos geladen wurden; wenn diese Zahl gleich ist numberFotosReturned, es ruft preloadImages ().
Löschen Sie den Anruf an preloadImages () und lege folgendes in die infoLoaded () Funktion:
flickrGame.imageNum + = 1; var index = 0; für (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();
Hier erhöhen wir die imageNum Variable und setzen Sie eine Variable Index gleich 0. Innerhalb der for-Schleife prüfen wir, ob die Lichtbildausweis in dem imageArray ist gleich dem data.photo.id (erinnere mich an die Daten ist eine JSON-Darstellung des aktuell verarbeiteten Bildes). Wenn sie übereinstimmen, setzen wir Index gleich ich und aktualisieren Sie den entsprechenden Index in der imageArray mit einer Nutzername und photoURL Variable. Wir benötigen diese Informationen, wenn wir die Bildzuordnungen später anzeigen.
Das mag ein wenig verwirrend erscheinen, aber wir passen nur die Fotos an. Da wir die Reihenfolge, in der sie vom Server zurückgegeben werden, nicht kennen, stellen wir sicher, dass ihre ID übereinstimmt, und können dann die Nutzername und photoURL Variablen zum Foto.
Zuletzt prüfen wir, ob imageNum ist gleich dem numberFotosReturned, und wenn es dann ist, sind alle Bilder verarbeitet worden, also rufen wir an preloadImages ().
Vergessen Sie nicht, die imageNum zum flickrGame Objekt.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0
(Stellen Sie sicher, dass Sie nach dem ein Komma hinzufügen numberFotosReturned: 0.)
Wenn Sie jetzt testen, dauert es etwas länger, bis Sie die Fotos sehen. Zusätzlich zum Aufruf der Flickr-API zum Abrufen der Fotos erhalten wir nun Informationen zu jedem einzelnen davon.
In diesem Schritt wird der Fortschrittsbalken angezeigt, wenn die Fotoinformationen geladen werden.
Fügen Sie dem folgenden Code hinzu setImages () Funktion:
function setImages (data) $ ("# infoprogress"). css ('Sichtbarkeit': 'versteckt'); $ ("# progressdiv"). css ('Sichtbarkeit': 'sichtbar'); $ ("# progressdiv p"). text ("Informationen zum Laden von Fotos"); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('Sichtbarkeit': 'versteckt'); $ .each (data.photos.photo, Funktion (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 ('Sichtbarkeit': 'versteckt'); alert ("NICHT GENÜGENDE BILDER WURDEN ZURÜCKGESETZT"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Dies zeigt die #progressdiv und ändert den Text des Absatzes innerhalb der #progressdiv zu lesen "Loading photo information". Wenn nicht genügend Bilder zurückgegeben wurden, verbergen wir die #progressdiv.
Fügen Sie als Nächstes Folgendes hinzu infoLoaded () Funktion:
Funktion infoLoaded (Daten) flickrGame.imageNum + = 1; var percent = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ ("# progressbar"). progressbar (Wert: Prozentsatz); var index = 0; für (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(); Hier setzen wir eine Variable Prozentsatz gleich Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); Dadurch wird sichergestellt, dass wir eine Nummer zwischen 0 und 100 erhalten. Dann rufen wir an $ ("# progressbar"). progressbar () und setze das Wert Eigenschaft gleich Prozentsatz.
Wenn Sie jetzt das Spiel testen, sollte es genauso funktionieren wie zuvor, jedoch mit einem Fortschrittsbalken. Nun, es gibt ein Problem: Der Fortschrittsbalken bleibt nach dem Zeichnen der Bilder erhalten. Im Spiel laden wir zuerst die Fotoinformationen, dann laden wir die Bilder vorab und beide benutzen den Fortschrittsbalken. Wir werden das im nächsten Schritt beheben.
In diesem Schritt werden wir das Plugin jQuery.imgpreload verwenden (es befindet sich bereits im Quellendownload). Sobald alle Dateiinformationen aus den obigen Schritten geladen wurden, setzt sich der Fortschrittsbalken zurück und überwacht das Laden der Bilder.
Fügen Sie Folgendes dem hinzu preloadImages () Funktion:
Funktion preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); für (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(); ); Hier setzen wir die #progressdiv sichtbar sein und den Absatz ändern, um "Bilder laden" zu lesen. Wir richten ein temporäres Array ein, fügen die URLs der temporären Bilder hinzu und übergeben das gesamte Array an $ .imgpreload um die Vorspannung abzustoßen.
Das jeder Die Funktion wird jedes Mal ausgeführt, wenn ein Foto vorab geladen wird alles Die Funktion wird ausgeführt, wenn alle Bilder vorab geladen wurden. Innerhalb jeder() Wir prüfen, ob das Bild tatsächlich geladen wurde. Erhöhen Sie das Bild numImagesLoaded variabel und verwenden Sie dieselbe Methode für die Prozent- und Fortschrittsanzeige. (Das totalImages ist 12 seit dem, wie viele wir pro Spiel verwenden.)
Sobald alle Bilder vorgeladen wurden (dh wann) alles() läuft) setzen wir die #progessdiv versteckt und rufen Sie an drawImages () Funktion.
Wir müssen das hinzufügen numImagesLoaded und totalImages Variablen zu unseren flickrGame Objekt:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, numImages: 12,
(Stellen Sie sicher, dass Sie das Komma nachher hinzufügen imageNum.)
Wenn Sie das Spiel jetzt testen, sollte der Fortschrittsbalken sowohl für die Fotoinformationen als auch für das Vorladen der Bilder angezeigt werden.
Um die Flickr-API-Nutzungsbedingungen zu erfüllen, müssen wir die verwendeten Bilder mit Attributen versehen. (Es ist auch höflich, dies zu tun.)
Fügen Sie den folgenden Code in das ein Verstecke die Karten() Funktion:
function hideCards () $ (flickrGame.chosenCards [0]). animate ('opacity': '0'); $ (flickrGame.chosenCards [1]). animate ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ ("# image1"). css ('background-image', 'none'); $ ("# image2"). css ('background-image', 'none'); if (flickrGame.theImages.length == 0) $ ("# gamediv img.card"). remove (); $ ("# gamediv"). css ('Sichtbarkeit': 'versteckt'); showAttributions (); addListeners (); flickrGame.chosenCards = new Array (); Hier überprüfen wir, ob die Anzahl der verbleibenden Bilder gleich Null ist, und wenn ja, wissen wir, dass der Benutzer alle Karten gefunden hat. Wir entfernen daher alle Karten aus dem DOM und setzen die #gamediv versteckt sein Dann rufen wir die an showAttributions () Funktion, die wir als nächstes kodieren.
In diesem Schritt werden wir die codieren showAttributions () Funktion.
Fügen Sie Folgendes unter dem hinzu checkForMatch () Funktion, die Sie in den obigen Schritten codiert haben:
function showAttributions () $ ("# attributionsdiv"). css ('Sichtbarkeit': 'sichtbar'); $ ("# attributionsdiv div"). each (Funktion (Index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). next (). html ( 'Nutzername: '+ flickrGame.tempImages [index] .username +'
'+' Foto ansehen '); ); Hier setzen wir die #attributionsdiv sichtbar zu sein, und dann jedes div durchlaufen. Es gibt 12 Divs mit jeweils einem Bild und einem Absatz. Wir verwenden jQuery's finden() Methode, um das zu finden img innerhalb des div setzen Sie das src des Bildes zum richtigen Bild URL, und benutze jQuery's Nächster() Methode zur Einstellung der Nutzername und photoURL zu den Infos von Flickr.
Hier finden Sie Links zu den Methoden find () und next () von jQuery, um mehr über sie zu erfahren.
Wenn Sie das Spiel jetzt testen und ein Level durchspielen, werden die Attributionen mit einem Link zu dem Bild auf Flickr angezeigt. Sie sehen auch zwei Knöpfe: einen für das nächste Level und einen für ein neues Spiel. Wir werden diese Knöpfe in den nächsten Schritten zum Laufen bringen.
In unserem Aufruf an die Flickr-API setzen wir pro Seite bis 36, um so viele Bilder gleichzeitig anzufordern. Da wir 12 Bilder pro Spiel verwenden, können bis zu drei Ebenen vorhanden sein. In diesem Schritt wird die Schaltfläche Next Level aktiviert.
Fügen Sie den folgenden Code in das ein setImages () Funktion:
function setImages (data) //… snip… flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
Wir müssen wissen, wie viele Levels das Spiel haben wird. Dies hängt davon ab, wie viele Bilder von unserer Suche zurückgegeben wurden. Es wird nicht immer 36 sein. Zum Beispiel habe ich nach "hmmmm" gesucht und es wurden ungefähr 21 Fotos zu der Zeit zurückgegeben. Wir werden verwenden Math.floor () Um die Zahl abzurunden - wir wollen ja nicht 2.456787, und die Spielelogik würde wegfallen.
Stellen Sie sicher, dass Sie das hinzufügen numberLevels Variable zum flickrGame Objekt:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, AnzahlBilder: 12,
(Vergessen Sie nicht, das Komma nach hinzuzufügen totalImages: 12.)
Ändern Sie nun die drawImages () Funktion wie folgt:
Funktion drawImages () flickrGame.currentLevel + = 1; $ ("# leveldiv"). css ('Sichtbarkeit': 'sichtbar'). html ("Level" + flickrGame.currentLevel + "of" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); für (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Hier erhöhen wir die Aktuelles Level Variable, setzen Sie die #leveldiv sichtbar zu sein und den HTML-Code des div festzulegen, um zu lesen, auf welcher Ebene wir uns befinden und wie viele Ebenen es gibt.
Wieder müssen wir das hinzufügen Aktuelles Level variabel zu unserem flickrGame Objekt.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, AnzahlBilder: 0, Anzahl der insgesamt: 12, currentLevel: 0
(Ich bin sicher, Sie brauchen jetzt keine Erinnerung mehr, aber stellen Sie sicher, dass Sie das Komma nachher hinzufügen numberLevels: 0.)
Ändern Sie nun die showAttributions () Funktion auf Folgendes:
function showAttributions () $ ("# leveldiv"). css ('Sichtbarkeit': 'versteckt'); $ ("# attributionsdiv"). css ('Sichtbarkeit': 'sichtbar'); if (flickrGame.currentLevel == flickrGame.numberLevels) $ ("# nextlevel_btn"). css ('Sichtbarkeit': 'versteckt'); else $ ("# nextlevel_btn"). css ('Sichtbarkeit': 'sichtbar'); $ ("# attributionsdiv div"). each (Funktion (Index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl); $ (this). find ('p'). html ('Nutzername: '+ flickrGame.tempImages [index] .username +'
'+' Foto ansehen '); ); Wir verstecken das #leveldiv indem Sie die Sichtbarkeit auf einstellen versteckt.
Als nächstes prüfen wir, ob die Aktuelles Level ist gleich dem numberLevels. Wenn sie gleich sind, sind keine weiteren Ebenen verfügbar, also verstecken wir die #nextlevel_btn; Ansonsten zeigen wir es.
Zum Schluss müssen wir die Kabel anschließen #nextlevel_btn. Fügen Sie den folgenden Code unter dem hinzu addKeyPress () Funktion, die Sie im obigen Schritt erstellt haben:
$ ("# nextlevel_btn"). on ("click", Funktion (e) $ (this) .css ('Sichtbarkeit': 'versteckt'); $ ("# gamediv"). css ('Sichtbarkeit ':' visible '); $ ("# attributionsdiv"). css (' Sichtbarkeit ':' hidden '); flickrGame.numImagesLoaded = 0; preloadImages ();); Hier verstecken wir den Button, enthüllen die #gamediv, Verstecke das #attributionsdiv, das zurücksetzen numImagesLoaded Variable und Aufruf preloadImages () was die nächsten 12 Bilder ergreift.
Sie können das Spiel jetzt testen und sollten alle Ebenen durchspielen können. Wir werden das verbinden #newgame_btn in den nächsten Schritten.
Sie können jederzeit ein neues Spiel beginnen, aber nachdem alle Ebenen gespielt wurden, ist dies die einzige Option. In diesem Schritt werden wir die Verbindung herstellen #newgame_btn.
Fügen Sie Folgendes unter dem Code für das hinzu #nextlevel_btn Sie haben im obigen Schritt hinzugefügt:
$ ("# newgame_btn"). on ("click", Funktion (e) $ ("# gamediv"). css ('Sichtbarkeit': 'sichtbar'); $ ("# leveldiv"). css ( 'Sichtbarkeit': 'hidden'); $ ("# attributionsdiv"). css ('Sichtbarkeit': 'hidden'); $ ("# searchdiv"). css ('Sichtbarkeit': 'visible' ); $ ("# nextlevel_btn"). css ('Sichtbarkeit': 'hidden'); flickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = neues Array (); flickrGame.currentLevel = 0 ; flickrGame.numberLevels = 0; addKeyPress ();); Hier enthüllen wir die #gamediv, Verstecke das #leveldiv und #attributionsdiv, enthüllen die #searchdiv, und verstecken das #nextlevel_btn. Wir setzen dann einige Variablen zurück und rufen auf addKeyPress () So kann der Benutzer erneut suchen.
Wenn Sie jetzt testen, sollten Sie zu jeder Zeit ein neues Spiel starten können, sowie wenn alle Ebenen gespielt wurden.
Das Spiel ist in Bezug auf das Gameplay abgeschlossen, aber wir müssen einen Startbildschirm anzeigen. Das machen wir im nächsten Schritt.
Wir müssen einige Änderungen an unserer CSS-Datei vornehmen. Insbesondere müssen wir das einstellen #gamediv Sichtbarkeit zu verbergen und die #introscreen sichtbar zu machen. Öffnen styles / game.css und diese Änderungen jetzt vornehmen:
#gamediv position: absolut; links: 150px; Breite: 600px; Höhe: 375px; Rand: 1px durchgehend schwarz; Polsterung: 10px; Farbe: # FF0080; Sichtbarkeit: versteckt; Hintergrund: #FFFFFF-URL ('… /pattern.png'); #introscreen position: absolut; links: 150px; Breite: 600px; Höhe: 375px; Rand: 1px durchgehend schwarz; Polsterauflage: 10px; Farbe: # FF0080; Sichtbarkeit: sichtbar; Hintergrund: #FFFFFF-URL ('… /pattern.png'); Polsterung links: 80px; Als nächstes müssen wir das ändern addKeyPress () Funktion. Entferne alles aus addKeyPress () und ersetze es durch folgendes:
function addKeyPress () $ (document) .on ("Tastendruck", Funktion (e) if (e.keyCode == 13) if (! flickrGame.gameStarted) hideIntroScreen (); else doSearch (); flickrGame.gameStarted = true;); Hier überprüfen wir, ob der Benutzer die Eingabetaste gedrückt hat, und prüfen, ob das Spiel gestartet wurde. Wenn nicht, rufen wir an hideIntroScreen (); ansonsten rufen wir an doSearch (); So oder so markieren wir das Spiel als begonnen. Wenn der Benutzer zum ersten Mal die Eingabetaste drückt, wird er angerufen hideIntroScreen (), und das nächste Mal, wenn der Benutzer die Eingabetaste drückt, wird er anrufen doSearch ().
Jetzt müssen wir die codieren hideIntroScreen () Funktion. Fügen Sie Folgendes unter dem hinzu addKeyPress () Funktion:
function hideIntroScreen () $ ("# gamediv"). css ('Sichtbarkeit': 'sichtbar'); $ ("# introscreen"). css ('Sichtbarkeit': 'versteckt'); Wenn Sie das Spiel jetzt testen, sollten Sie den Begrüßungsbildschirm sehen. Drücke Enter und du kannst das Spiel wie zuvor spielen.
Wenn jetzt nicht genügend Bilder für ein Spiel zurückgegeben werden, wird eine Warnmeldung angezeigt. Obwohl dies funktioniert, können Sie es mit Hilfe des Dialogfelds der jQuery-Benutzeroberfläche ein wenig schöner aussehen lassen.
Wir müssen bearbeiten index.html, so öffnen Sie es und fügen Sie das folgende direkt in das hinzu #gamediv:
Es wurden nicht genügend Bilder zurückgegeben. Versuchen Sie es mit einem anderen Keyword.
Jetzt müssen wir es einbinden. Fügen Sie Folgendes unter dem hinzu
hideIntroScreen ()Funktion in der JS-Datei:$ ("# dialog"). dialog (autoOpen: false);Dieser Code konvertiert das
#Dialogdiv in einen Dialog; Wir deaktivieren die automatische Öffnung.Wir möchten, dass dieses Dialogfeld anstelle der Warnung, die wir zuvor hatten, geöffnet wird. Entfernen Sie also die Warnung aus dem
setImages ()Funktion und ersetzen Sie es durch Folgendes:else $ ("# progressdiv"). css ('Sichtbarkeit': 'versteckt'); $ ("#dialog") .dialog ('öffnen'); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Wenn jetzt nicht genügend Bilder zurückgegeben werden, erhalten wir ein gut aussehendes Dialogfeld, anstatt eine Warnung zu verwenden, die an Webseiten aus den 90ern erinnert.
Vergessen Sie nicht, diese Zeile zu ändern
preloadImages ():tempImage.src = "cardFront.jpg";… Zurück zu diesem:
tempImage.src = flickrGame.tempImages [i] .imageUrl;… Ansonsten wird das Spiel etwas zu einfach sein!
Testen Sie jetzt das letzte Spiel. Wenn etwas nicht stimmt, können Sie Ihre Quelle immer mit meiner vergleichen oder eine Frage in den Kommentaren stellen.
Fazit
Wir haben ein lustiges kleines Spiel mit Bildern aus der Flickr-API codiert und ein oder zwei ordentliche Schichten Politur gegeben. Ich hoffe, Sie haben dieses Tutorial genossen und etwas lernenswertes gelernt. Danke fürs Lesen und viel Spaß!
