Share
In deze zelfstudie nemen we een eenvoudige browsergame (die we hebben gebouwd in een Tuts + Premium-zelfstudie) en voegen we voortgangsbalkjes, een preloader, een opstartscherm en nog veel meer Pools toe..
In deze tutorial voor Tuts + Premium hebben we een basisspel voor kaartafstemming gebouwd met JavaScript, waarvan de afbeeldingen afkomstig waren van Flickr. Bekijk de demo:
Klik om het spel te proberen zoals het nu is.
In deze zelfstudie voegen we heel veel Pools toe aan het spel door een preloader- en voortgangsbalk, een startscherm en een trefwoordzoekopdracht te implementeren. Bekijk hoe de game eruit zal zien:
Klik om de game te proberen met de verbeteringen die we zullen toevoegen.
In deze zelfstudie leert u de JavaScript- en HTML-code die nodig is om al deze verbeteringen te coderen. Download de bronbestanden en pak de map met de naam uit Begin hier; dit bevat alle code van het einde van de Premium-zelfstudie.
In flickrgame.js er is een functie genaamd preloadImage (), welke deze regel bevat:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
Om het te testen, verander het in:
tempImage.src = "cardFront.jpg";
Hierdoor worden de afbeeldingen op de kaarten altijd weergegeven, waardoor het testen een stuk eenvoudiger wordt. U kunt dit op elk gewenst moment wijzigen.
Lees nu verder!
Accentsconagua
addKeyPress () Op dit moment hebben we het label "hond" hard gecodeerd, maar het spel wordt snel saai als we de gebruiker dwingen om altijd foto's van honden te gebruiken!
De zoekingang zat er aardig uit, maar was al die tijd totaal niet-functioneel. Laten we dat oplossen. We zullen naar de gebruiker luisteren om op de Enter-toets te drukken en vervolgens de doSearch () methode met behulp van wat ze hebben getypt om de Flickr API aan te roepen.
Voeg het volgende toe onder de resetImages () functie, in flickrgame.js.
function addKeyPress () $ (document) .on ("toetsaanslag", functie (e) if (e.keyCode == 13) doSearch ();); Hier luisteren we naar een toetsaanslag en als het sleutelcode is gelijk aan 13, we weten dat ze op de Enter-toets hebben gedrukt, dus we noemen het doSearch () functie.
We moeten de doSearch functie om de tekst in de invoer te gebruiken, dus breng de volgende wijzigingen aan:
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("toetsaanslag"); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# zoekwoord"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Hier controleren we eerst of de invoer niet leeg is (we willen niet naar niets zoeken), dan verwijderen we de toets indrukken luisteraar. Ten slotte wijzigen we de labels om de waarde van de invoer te gebruiken.
Het laatste wat we moeten doen is de oproep verwijderen doSearch () in het JS-bestand. Vind waar we handmatig mee bellen doSearch () en verwijder het. (Het is vlak na de addKeyPress () functie.)
Vergeet niet om de. Te bellen addKeyPress () functie. Ik belde het precies onder waar ik het verklaarde.
function addKeyPress () $ (document) .on ("toetsaanslag", functie (e) if (e.keyCode == 13) doSearch ();); addKeyPress (); Als je de game test, zie je geen afbeeldingen totdat je een zoekopdracht uitvoert.
Wanneer we onze eerste keer bellen naar de API van Flickr, is er een kleine vertraging. We zullen een geanimeerde GIF (een "throbber") laten zien terwijl we contact maken met de server en deze verwijderen zodra het gesprek terugkomt.
Voeg het volgende toe aan de doSearch () functie.
function doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("toetsaanslag"); $ ("# infoprogress"). css ('visibility': 'visible'); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# zoekwoord"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Hiermee stelt u de #infoprogress div om zichtbaar te zijn. Zodra de informatie terugkomt van Flickr, zullen we deze verbergen. Voeg hiervoor de volgende code toe aan de setImages () functie:
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 (); Als je het spel nu test, zou je de afbeelding van de loader moeten zien terwijl je contact opneemt met de Flickr API.
We moeten de informatie krijgen voor elke foto die we gebruiken. We zullen de Werkwijze = flickr.photos.getInfo op elke foto en bel dan de infoLoaded () functie elke keer dat de informatie wordt geladen. Zodra de informatie voor elk foto is geladen, gaat het spel verder zoals eerder.
Er is veel nieuwe informatie om in te nemen, dus we zullen het stap voor stap uitpuzzelen. Voeg eerst het volgende toe aan de setImages () functie:
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 ("NIET GENOEG IMAGES ZIJN TERUGGEZONDEN"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Nu we de tags van de gebruiker krijgen, moeten we ervoor zorgen dat er genoeg afbeeldingen worden teruggestuurd om een enkel spel te vormen (12). Als dit het geval is, verbergen we de invoer, zodat de speler een ander middenzoekspel niet meer kan doen. We hebben een variabele ingesteld getPhotoInfoURL en gebruik de Werkwijze = flickr.photos.getInfo - merk op dat we de item ID voor de photo_id. Vervolgens gebruiken we de jQuery's getJSON methode en bel infoLoaded.
Als er niet genoeg afbeeldingen zijn geretourneerd, geven we een melding en bellen we addKeyPress () zodat de gebruiker nog een zoekopdracht kan uitvoeren.
We moeten dus weten hoeveel afbeeldingen zijn geretourneerd van de aanroep naar de Flickr API en we slaan dit op in de variabele numberPhotosReturned, die we toevoegen aan onze flickrGame voorwerp:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0
(Zorg ervoor dat u erna een komma toevoegt selectedCards: [].)
We kunnen nog niet testen; als we dat deden zouden we bellen preloadImages () 36 keer achter elkaar, want dat is het onze infoLoaded () functie doet op dit moment. Absoluut niet wat we willen. In de volgende stap zullen we de infoLoaded () functie.
infoLoaded () De infoLoaded () functie ontvangt informatie over een enkele foto. Het voegt de informatie toe aan de imageArray voor de juiste foto en houdt bij hoeveel foto's zijn geladen; als dit aantal gelijk is aan numberPhotosReturned, het roept preloadImages ().
De oproep verwijderen naar preloadImages () en zet het volgende in de infoLoaded () functie:
flickrGame.imageNum + = 1; var index = 0; for (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 verhogen we de imageNum variabele en stel een variabele in inhoudsopgave gelijk aan 0. Binnen de for-lus controleren we om te zien of het PhotoID in de imageArray is gelijk aan de data.photo.id (herinner de gegevens is een JSON-weergave van de huidige afbeelding die wordt verwerkt). Als ze overeenkomen, stellen we in inhoudsopgave gelijk aan ik en werk de juiste index bij in de imageArray met een gebruikersnaam en photoURL variabel. We hebben deze informatie nodig wanneer we de beeldacceptaties later laten zien.
Dit lijkt misschien een beetje verwarrend, maar het enige wat we doen is de foto's bij elkaar zoeken. Omdat we de volgorde niet weten waarin ze van de server worden teruggestuurd, zorgen we ervoor dat de id van hun id overeenkomt en kunnen we de volgorde toevoegen. gebruikersnaam en photoURL variabelen voor de foto.
Ten slotte controleren we of imageNum is gelijk aan de numberPhotosReturned, en als het dan is, zijn alle afbeeldingen verwerkt, dus we bellen preloadImages ().
Vergeet niet om de. Toe te voegen imageNum naar de flickrGame voorwerp.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0
(Zorg ervoor dat u een komma toevoegt na de numberPhotosReturned: 0.)
Als u nu test, duurt het wat langer voordat u de foto's ziet. Bovenop het aanroepen van de Flickr API om de foto's op te halen, krijgen we nu informatie over elk van hen.
In deze stap wordt de voortgangsbalk weergegeven wanneer we de foto-informatie laden.
Voeg de volgende code toe aan de setImages () functie:
function setImages (data) $ ("# infoprogress"). css ('visibility': 'hidden'); $ ("# progressdiv"). css ('visibility': 'visible'); $ ("# progressdiv p"). tekst ("Bezig met laden van foto-informatie"); 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'); alert ("NIET VOLDOENDE FOTO'S ZIJN TERUGGEZONDEN"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Dit toont de #progressdiv en verandert de tekst van de alinea binnen de #progressdiv om "Foto-informatie laden" te lezen. Als er niet genoeg afbeeldingen zijn geretourneerd, verbergen we de #progressdiv.
Voeg vervolgens het volgende toe aan de infoLoaded () functie:
function infoLoaded (data) flickrGame.imageNum + = 1; var percentage = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ ("# voortgangsbalk"). voortgangsbalk (waarde: percentage); var index = 0; for (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 stellen we een variabele in percentage gelijk aan Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); dit zorgt ervoor dat we een cijfer tussen 0 en 100 krijgen. Dan bellen we $ ( "# Voortgangsbalk"). Progressbar () en stel de waarde eigendom gelijk aan percentage.
Als je het spel test, zou het moeten werken zoals voorheen, maar dan met een voortgangsbalk. Welnu, er is één probleem: de voortgangsbalk blijft hangen nadat de afbeeldingen zijn getekend. In het spel laden we eerst de foto-informatie in, daarna laden we de afbeeldingen in en beide gebruiken de voortgangsbalk. We zullen dit in de volgende stap oplossen.
In deze stap zullen we de plug-in jQuery.imgpreload utlilize (deze bevindt zich al in de brondownload). Zodra alle bestandsinformatie uit de bovenstaande stappen is geladen, wordt de voortgangsbalk opnieuw ingesteld en wordt het laden van de afbeeldingen gecontroleerd.
Voeg het volgende toe aan de preloadImages () functie:
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); for (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 hebben we de #progressdiv zichtbaar zijn en de alinea veranderen in "Afbeeldingen laden". We zetten een tijdelijke array op en voegen daar de URL's van de tijdelijke afbeeldingen aan toe en geven vervolgens de hele array door aan $ .imgpreload om de preload te starten.
De elk functie wordt uitgevoerd elke keer dat een foto is voorgeladen, en de allemaal functie wordt uitgevoerd wanneer alle afbeeldingen zijn voorgeladen. Binnen elk() we controleren of de afbeelding daadwerkelijk is geladen, verhoog de numImagesLoaded variabele en gebruik dezelfde methode voor het percentage en de voortgangsbalk als eerder. (De totalImages is 12, want dat is hoeveel we per game gebruiken.)
Nadat alle afbeeldingen zijn voorgeladen (dat wil zeggen wanneer allemaal() wordt uitgevoerd) we hebben de #progessdiv naar verborgen en bel de drawImages () functie.
We moeten het toevoegen numImagesLoaded en totalImages variabelen voor ons flickrGame voorwerp:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12
(Zorg ervoor dat u de komma daarna toevoegt imageNum.)
Als je het spel nu test, zou je de voortgangsbalk moeten zien voor zowel de foto-informatie als voor het vooraf laden van de afbeeldingen.
Om aan de servicevoorwaarden van de Flickr API te voldoen, moeten we attributies tonen voor de afbeeldingen die we gebruiken. (Het is ook beleefd om dat te doen.)
Voeg de volgende code toe binnen de kaarten verbergen() functie:
function hideCards () $ (flickrGame.chosenCards [0]). animeren ('opacity': '0'); $ (flickrGame.chosenCards [1]). animeren ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ ("# image1"). css ('achtergrondafbeelding', 'geen'); $ ("# image2"). css ('achtergrondafbeelding', 'geen'); if (flickrGame.theImages.length == 0) $ ("# gamediv img.card"). remove (); $ ("# gamediv"). css ('visibility': 'hidden'); showAttributions (); addListeners (); flickrGame.chosenCards = nieuwe array (); Hier controleren we of het aantal resterende afbeeldingen nul is. Als dit het geval is, weten we dat de gebruiker alle kaarten heeft gekoppeld. We verwijderen daarom alle kaarten uit de DOM en zetten de #gamediv om verborgen te zijn. Vervolgens noemen we de showAttributions () functie die we vervolgens zullen coderen.
In deze stap zullen we de code coderen showAttributions () functie.
Voeg het volgende toe onder de checkForMatch () functie die je in de bovenstaande stappen hebt gecodeerd:
functie showAttributions () $ ("# attributionsdiv"). css ('visibility': 'visible'); $ ("# attributionsdiv div"). each (functie (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). next (). html ( 'Gebruikersnaam: '+ flickrGame.tempImages [index] .username +'
'+' Bekijk foto '); ); Hier hebben we de #attributionsdiv zichtbaar zijn en vervolgens door elke div binnen het lusje bladeren. Er zijn 12 divs, elk met een afbeelding en een alinea; we gebruiken jQuery's vind() methode om het te vinden img binnen de div, stel de src van de afbeelding naar de juiste afbeelding URL, en gebruik jQuery's next () methode om de gebruikersnaam en photoURL naar de info van Flickr.
Hier vindt u links naar de methoden find () en next () van jQuery, zodat u er meer over kunt leren.
Als je het spel nu test en een niveau afspeelt, zie je de attributen met een link naar de afbeelding op Flickr. Je ziet ook twee knoppen: één voor het volgende niveau en één voor een nieuw spel. We zullen deze knoppen in de volgende stappen laten werken.
In onze oproep aan de Flickr API die we hebben ingesteld per pagina tot 36, om veel afbeeldingen tegelijk aan te vragen. Omdat we per game 12 afbeeldingen gebruiken, betekent dit dat er maximaal drie niveaus kunnen zijn. In deze stap zullen we de knop Volgende niveau laten werken.
Voeg de volgende code toe binnen de setImages () functie:
function setImages (data) // ... snip ... flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
We moeten weten hoeveel levels het spel zal hebben. Dit is afhankelijk van het aantal afbeeldingen dat is teruggestuurd door onze zoekopdracht. Het zal niet altijd 36 zijn. Ik zocht bijvoorbeeld naar "hmmmm" en het gaf op dat moment ongeveer 21 foto's terug. We zullen gebruiken Math.floor () om het aantal te verlagen - we willen tenslotte niet 2.456787 levels, en het zou de game logisch uit de weg gooien.
Zorg ervoor dat u de numberLevels variabele voor de flickrGame voorwerp:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0
(Vergeet niet om de komma toe te voegen na totalImages: 12.)
Pas nu het drawImages () functioneer als volgt:
functie drawImages () flickrGame.currentLevel + = 1; $ ("# leveldiv"). css ('visibility': 'visible'). html ("Level" + flickrGame.currentLevel + "of" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Hier verhogen we de huidig niveau variabele, stel de #leveldiv zichtbaar zijn en stel de HTML-code van de div in om te lezen op welk niveau we staan en hoeveel niveaus er zijn.
Nogmaals, we moeten het toevoegen huidig niveau veranderlijk naar onze flickrGame voorwerp.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], selectedCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12, numberLevels: 0, currentLevel: 0
(Ik weet zeker dat je nu niet hoeft te worden herinnerd, maar zorg ervoor dat je de komma daarna toevoegt aantalLevels: 0.)
Pas nu het showAttributions () functioneren als volgt:
functie 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 (functie (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl); $ (this). vinden ( 'p'). html ('Gebruikersnaam: '+ flickrGame.tempImages [index] .username +'
'+' Bekijk foto '); ); We verbergen de #leveldiv door de zichtbaarheid ervan in te stellen verborgen.
Vervolgens controleren we of het huidig niveau is gelijk aan de numberLevels. Als ze gelijk zijn, zijn er geen niveaus meer beschikbaar, dus verbergen we de #nextlevel_btn; anders laten we het zien.
Eindelijk moeten we de #nextlevel_btn. Voeg de volgende code toe onder de addKeyPress () functie die je in de bovenstaande stap hebt gemaakt:
$ ("# nextlevel_btn"). on ("klik", functie (e) $ (this) .css ('visibility': 'hidden'); $ ("# gamediv"). css ('visibility ':' visible '); $ ("# attributionsdiv"). css (' visibility ':' hidden '); flickrGame.numImagesLoaded = 0; preloadImages ();); Hier verbergen we de knop, onthullen de #gamediv, verstop de #attributionsdiv, reset de numImagesLoaded variabele en oproep preloadImages () die de volgende 12 afbeeldingen grijpt.
Je kunt het spel nu testen en moet alle niveaus kunnen spelen. We zullen de #newgame_btn in de komende stappen.
Je kunt op elk moment een nieuw spel beginnen, maar nadat alle niveaus zijn gespeeld, is dat de enige optie. In deze stap zullen we de #newgame_btn.
Voeg het volgende toe onder de code voor de #nextlevel_btn je hebt toegevoegd in de stap hierboven:
$ ("# newgame_btn"). on ("klik", functie (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 ();); Hier onthullen we de #gamediv, verstop de #leveldiv en #attributionsdiv, onthul de #searchdiv, en verberg de #nextlevel_btn. We resetten vervolgens enkele variabelen en bellen addKeyPress () zodat de gebruiker opnieuw kan zoeken.
Als je nu test, zou je op elk moment een nieuw spel kunnen starten, evenals wanneer alle niveaus zijn gespeeld.
De game is compleet wat betreft gameplay, maar we moeten een splash-scherm laten zien. We doen dit in de volgende stap.
We moeten enkele wijzigingen aanbrengen in ons CSS-bestand. Concreet moeten we de #gamediv zichtbaarheid naar verborgen, en stel de #introscreen zichtbaar. Open stijlen / game.css en maak die wijzigingen nu:
#gamediv positie: absoluut; left: 150px; width: 600px; Hoogte: 375px; rand: 1px effen zwart; padding: 10px; color: # FF0080; visibility: hidden; achtergrond: #FFFFFF url ('... /pattern.png'); #introscreen positie: absoluut; left: 150px; width: 600px; Hoogte: 375px; rand: 1px effen zwart; padding-top: 10px; color: # FF0080; zichtbaarheid: zichtbaar; achtergrond: #FFFFFF url ('... /pattern.png'); padding-left: 80px; Vervolgens moeten we de addKeyPress () functie. Verwijder alles van addKeyPress () en vervang het door het volgende:
function addKeyPress () $ (document) .on ("toetsaanslag", functie (e) if (e.keyCode == 13) if (! flickrGame.gameStarted) hideIntroScreen (); else doSearch (); flickrGame.gameStarted = true;); Hier controleren we of de gebruiker op de Enter-toets heeft gedrukt, waarna we controleren of het spel is gestart. Als we het niet hebben gebeld hideIntroScreen (); anders bellen we doSearch (); hoe dan ook, we markeren het spel als begonnen. Dit betekent dat de eerste keer dat de gebruiker op Enter drukt, hij zal callen hideIntroScreen (), en de volgende keer dat de gebruiker op de Enter-toets drukt, wordt deze gebeld doSearch ().
Nu moeten we de code coderen hideIntroScreen () functie. Voeg het volgende toe onder de addKeyPress () functie:
functie hideIntroScreen () $ ("# gamediv"). css ('visibility': 'visible'); $ ("# introscreen"). css ('visibility': 'hidden'); Als je het spel nu test, zou je het startscherm moeten zien; druk op Enter en je kunt het spel als voorheen spelen.
Als er nu niet genoeg afbeeldingen voor een game worden geretourneerd, wordt er een melding weergegeven. Hoewel dit werkt, kunnen we het er iets leuker uit laten zien door het dialoogvenster van jQuery UI te gebruiken.
We moeten bewerken index.html, open het en voeg het volgende recht toe binnen de #gamediv:
Er zijn niet genoeg afbeeldingen geretourneerd, probeer een ander zoekwoord.
Nu moeten we hem vastbinden. Voeg het volgende toe onder de
hideIntroScreen ()functie in het JS-bestand:$ (dialoogvenster "# dialoog"). (autoOpen: false);Deze code converteert de
#dialogdiv in een dialoog; we schakelen de auto-open functie uit.We willen dit dialoogvenster activeren om te openen in plaats van de waarschuwing die we eerder hadden, dus verwijder de waarschuwing van de
setImages ()functie en vervang deze door het volgende:else $ ("# progressdiv"). css ('visibility': 'hidden'); $ ( "# Dialog") dialog ( 'open').; addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Als er niet genoeg afbeeldingen worden geretourneerd, krijgen we een leuk uitziend dialoogvenster in plaats van een melding die doet denken aan webpagina's uit de jaren 90.
Vergeet niet om deze regel te veranderen van
preloadImages ():tempImage.src = "cardFront.jpg";... terug naar dit:
tempImage.src = flickrGame.tempImages [i] .imageUrl;... anders zal de game een beetje te gemakkelijk zijn!
Test nu het laatste spel. Als iets niet helemaal klopt, kun je altijd je bron vergelijken met de mijne of een vraag stellen in de opmerkingen.
Conclusie
We hebben een leuke kleine game gecodeerd met behulp van afbeeldingen van de Flickr API, en hebben een fatsoenlijke laag of twee nagellak gekregen. Ik hoop dat je deze tutorial leuk vond en iets leerde. Bedankt voor het lezen en veel plezier!
