Share
I denne opplæringsserien vil vi lage et Whack-a-Groundhog-spill. Målet med spillet er å trykke på groundhogs før de forsvinner. Les videre!
I den forrige delen av denne serien la vi til bakgrunnen og begynte å animere våre groundhogs. I denne siste delen av serien, vil vi implementere spillingen, alternativene og startskjermbildet for vår app, og deretter ende opp med et komplett spill!
Som spillet er nå, forankrer groundhogs evig og ser ikke ut til å gå tilbake i hullene sine. Vi må legge til noen flere nøkler til vår sequenceData å fikse dette. Legg til følgende i setupGameScreen () funksjon:
lokal sequenceData = name = "show", start = 2, telle = 3, tid = 800, loopCount = 1, loopDirection = "sprette", name = "blank", start = 1, count = 1 name = "hit1", start = 5, telle = 1, name = "hit2", start = 6, telle = 1, name = "hit3", start = 7, telle = 1
Den "tomme" sekvensen er et tomt gjennomsiktig bilde som er en del av sprite-arket, og "hit1", "hit2" og "hit3" -sekvensene er 3 forskjellige "hit" -stater i groundhog. Se på "groundhogsheet.png" bildet for å se dette selv.
Pass på at du stiller inn loopCount lik 1 på "show" -sekvensen.
Endre deretter følgende kodeblokk:
Accentsconagua
tempGroundHog: setSequence ("blank") tempGroundHog: addEventListener ('tap', groundHogHit); Her har vi satt sekvensen til "blank" og har lagt en trykklytter til groundhog-spritet.
Deretter fjerner du følgende linje av kode:
tempGroundHog: play ()
Hvis du tester nå, bør ingen av groundhogs være animerende. Vi vil snart få en tilfeldig groundhog animering!
Når groundhog er tappet, vil vi avgjøre hvorvidt det var ute av hullet. Hvis ja, endrer vi sekvensen til en av de tre hitstatene som vi la til i forrige trinn.
Legg til følgende inne i groundHogHit () funksjon:
local thisSprite = e.target thisSprite: removeEventListener ("sprite", groundHogSpriteListener) lokal funksjon skjul () thisSprite: setSequence ("blank") avslutte hvis (thisSprite.sequence == "show") deretter lokale randomIndex = math.random ) thisSprite: setSequence ("hit" ... randomIndex) timer.performWithDelay (1000, skjul) slutten Her refererer vi Sprite som ble klikket av e.target og fjern Event Event Listener. Vi ser etter om sekvensen er lik «show». Hvis det er, genererer vi et tall mellom 1 og 3 og setter sekvensen lik "hit" ... randomIndex. Alt dette gjør er å generere strengene "hit1", "hit2" eller "hit3". Til slutt kaller vi den lokale skjultfunksjonen etter 1000 millisekunder som setter Sprites-sekvensen til "blank".
De getRandomGroundHog () funksjonen får en tilfeldig groundhog og lar den begynne å animere. Skriv inn følgende inne i getRandomGroundHog () -funksjonen:
lokal randomIndex = math.random (#allGroundHogs) local randomGroundHog = allGroundHogs [randomIndex] hvis (randomGroundHog.sequence ~ = "blank") deretter getRandomGroundHog () annet randomGroundHog: addEventListener ("sprite", groundHogSpriteListener) randomGroundHog: setSequence ) randomGroundHog: play () end Her får vi en randomIndex fra allGroundHogs bord. Deretter satte vi randomGroundHog tilsvarer indeksen. Vi kontrollerer da om sekvensen ikke er lik «tom», og hvis det ikke gjør det, ringer vi getRandomGroundHog () en gang til. Ellers legger vi til groundHogSpriteListener å sette sekvensen til "show" og spille sekvensen.
De groundHogSpriteListener () kontrollerer om "show" -sekvensen er ferdig med å spille. Hvis ja, setter den den til den "tomme" sekvensen. Skriv inn følgende i feltet groundHogSpriteListener ():
local thisSprite = event.target - "event.target" refererer til sprite hvis (event.phase == "endte") så hvis (thisSprite.sequence == "show") så denneSprite: setSequence ("blank") end - - en halv sekunders forsinkelsesendring Med alle de ovennevnte på plass får vi tilfeldige grunnhugger. Legg til følgende nederst på sidensetUpGameScreen () funksjon:
groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0)
Hvis du tester nå, bør du se groundhogs tilfeldig hopper ut av hullene sine. Mens du er der, prøv å klikke på groundhogs mens de er ute av hullene sine. Du bør se en av de tre hitstatene, og deretter tom tilstand.
Når du er ferdig med testing, fjern linjen du nettopp har skrevet inn. Vi trengte det bare for testing.
I dette trinnet vil vi begynne å sette opp skjermbildet. Skriv inn følgende kode inne i setUpIntroScreen funksjon:
media.playSound ("gameTrack.mp3", lydkomplett) introScreenGroup = display.newGroup () lokal titleScreen = display.newImage ("titleScreen.png") lokal playButton = display.newImage ("playButton.png", 100,100) lokale alternativerButton = display.newImage ("optionsButton.png", 100,170) introScreenGroup: sett inn (titleScreen) introScreenGroup: sett inn (playButton) introScreenGroup: sett inn (optionsButton) Her starter vi lydsporet, konfigurerer introskjermen, og legger til playButton og optionsButton grafikk.
Ring nå setUpIntroScreen () funksjonen der du ringer til setUpGameScreen () funksjon…
setUpGameScreen () setUpIntroScreen ()
Hvis du tester nå, bør du se Intro-skjermen. Vi må legge til Event Lyttere til knappene, og det er det vi skal gjøre i de neste trinnene.
Skriv inn følgende under koden du skrev inn i trinnet ovenfor:
playButton: addEventListener ("tap", funksjon () transition.to (introScreenGroup, time = 300, x = -480, onComplete = funksjon () groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) ende) isPlaying = true slutt ) Når du trykker på avspillingsknappen, animerer du introskjermbildet til venstre, sett inn groundHogTimer å generere tilfeldige grunnhunder, og sett deretter spiller variabel til ekte.
Hvis du tester nå, bør du kunne starte et nytt spill, men vi vil at noen alternativer også skal være tilgjengelige. Vi gjør det neste.
Skriv inn følgende under koden du skrev inn i trinnet ovenfor.
OptionsButton: addEventListener ("tap", funksjon () transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = funksjon () introScreenGroup. x = -480 slutten) ende) Denne koden animerer alternativskjermen ned fra oven. Når animasjonen er fullført, setter den introScreenGroup av hovedskjermen til venstre.
Hvis du tester nå og trykker på alternativknappen, ser du ikke noe som skjer, og det er fordi vi ennå ikke har opprettet opsjonsskjermen.
Skriv inn følgende inne i setUpOptionsScreen () funksjon:
optionsScreenGroup = display.newGroup () lokale alternativerScreen = display.newImage ("optionsScreen.png") lokal backButton = display.newImage ("backButton.png", 130,240) lokal lydOnText = display.newText ("Lyd på / av", 75,105 , native.systemFontBold, 16) local groundHogSpeedText = display.newText ("Speed", 75.145, native.systemFontBold, 16) optionsScreenGroup: sett inn (optionsScreen) optionsScreenGroup: sett inn (backButton) alternativerScreenGroup: sett inn (soundOnText) optionsScreenGroup: sett inn (groundHogSpeedText) optionsScreenGroup.y = -325 Her konfigurerer vi optionsScreen, Legg til tilbake knapp, og legg til et par tekster.
Nå ring denne funksjonen under der du ringer setUpIntroScreen:
setUpIntroScreen () setUpOptionsScreen ()
Hvis du tester spillet nå, bør du se alternativskjermbildet glid ned fra oven.
Vi bruker kontrollboks widgeten til å la brukeren slå på / av lyden. Skriv inn følgende øverst i "main.lua" -filen.
lokal widget = krever ("widget") For å kunne bruke Switch og andre widgets må vi først kreve modulen "widget"
Skriv inn følgende under koden du skrev inn ovenfor i setUpOptionsScreen.
lokal soundCheckBox = widget.newSwitch left = 210, top = 98, style = "avkrysningsboks", initialSwitchState = true, onPress = funksjon (e) lokal sjekk = e.target if (check.isOn) then media.playSound ("gameTrack .mp3 ", lydkomplett) annet media.stopSound () end-end optionsScreenGroup: sett inn (soundCheckBox) Dette setter opp avkrysningsboksgrensesnittet ved å sette "stil" lik "kryssboks". Vi sjekker om avkrysningsruten er på (hvis den er valgt), og hvis så spiller vi "gameTrack.mp3". Hvis ikke, stopper vi lyden.
Hvis du tester nå og går til alternativskjermbildet, bør du kunne slå lyden av eller på.
Vi bruker en SegmentedControl slik at brukeren kan velge hvor raskt bakken skal vises. Skriv inn følgende under koden for avkrysningsruten du skrev inn i trinnet ovenfor:
local speedControl = widget.newSegmentedControl left = 210, top = 140, segmenter = "slow", "medium", "fast", segmentWidth = 50, defaultSegment = 1, onPress = funksjon mål hvis (target.segmentNumber == 1) then groundHogSpeed = 1500 elseif (target.segmentNumber == 2) then groundHogSpeed = 1000 annet groundHogSpeed = 700 end-end optionsScreenGroup: sett inn (speedControl)
Her oppretter vi en SegmentedControl med 3 segmenter ("slow", "medium", "fast"). Avhengig av hvilket segment brukeren har trykket på, setter vi inn groundHogSpeed variabel tilsvarende.
Hvis du tester nå, bør du se SegmentedControl og være i stand til å velge et segment, men vi må skru opp tilbakeknappen for å komme tilbake til introskjermen.
De tilbake knapp tar oss tilbake til intro-skjermen. Skriv inn følgende kode under trinnene ovenfor:
backButton: addEventListener ("tap", funksjon () hvis (isPlaying == false) deretter introScreenGroup.x = 0 end transition.to (optionsScreenGroup, time = 300, y = -325, onComplete = funksjon () hvis (isPlaying = = true) da groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) slutten)) Her kontrollerer vi om spillet har startet. Hvis ikke, setter vi introScreenGroup tilbake i lekeområdet. Vi overfører deretter opsjonsskjermbildet på nytt. Hvis spillet har startet, setter vi inn groundHogtimer å generere tilfeldige grunnhunder.
Vi må kunne komme til valgskjermbildet fra hovedspillet. Legg til følgende under der du setter inn gameBackground inn i det gameScreenGroup ().
gameScreenGroup: sett inn (gameBackground) lokale alternativerButton = display.newImage ("optionsButton.png", 1,270) gameScreenGroup: insert (optionsButton) Hvis du tester nå, bør du se alternativknappen på spillskjermbildet.
Nå må vi skru opp alternativknappen med en EventListener. For å gjøre dette, skriv inn følgende kode under løkken som lager alle groundhogs.
OptionsButton: addEventListener ("tap", funksjon (e) timer.cancel (groundHogTimer) transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = funksjon () ende) ende) Her avbryter vi groundHogTimer og overgang vår opsjonsskjerm ned.
Testing nå, bør du kunne komme til valgskjermbildet fra spillskjermbildet. Du bør også kunne sette inn alternativene som ønsket.
Hvis du har spilt lenge nok til at lydsporet er ferdig, har du kanskje lagt merke til at det ikke begynte. Skriv inn følgende i feltet soundComplete () funksjon.
media.playSound ("gameTrack.mp3", soundComplete) Dette starter bare lydsporet som spilles igjen når det er ferdig.
I denne serien lærte vi å lage et morsomt og interessant Whack-a-Groundhog-spill. På den måten har du lært hvordan du bruker sprite ark og lyd. Jeg håper du fant denne opplæringen nyttig, og takk for å lese!
