Share
In deze tutorialserie zullen we een Whack-a-Groundhog-spel maken. Het doel van het spel is tik op de groundhogs voordat ze verdwijnen. Lees verder!
In het vorige deel van deze serie hebben we de achtergrond van het spel toegevoegd en onze groundhogs geanimeerd. In dit laatste deel van de serie zullen we de gameplay, opties en startscherm van onze app implementeren en eindigen met een compleet spel!
Zoals het spel nu is, leven de groundhogs voor altijd en lijken ze niet terug in hun gaten te gaan. We moeten wat meer sleutels toevoegen aan onze sequenceData om dit te repareren. Voeg het volgende toe binnen de setupGameScreen () functie:
local sequenceData = name = "show", start = 2, count = 3, time = 800, loopCount = 1, loopDirection = "bounce", name = "blank", start = 1, count = 1, name = "hit1", start = 5, count = 1, name = "hit2", start = 6, count = 1, name = "hit3", start = 7, count = 1
De "blank" -sequentie is een lege transparante afbeelding die deel uitmaakt van het sprite-blad en de "hit1", "hit2" en "hit3" -reeksen zijn 3 verschillende "hit" -statussen van het groundhog. Kijk naar de afbeelding "groundhogsheet.png" om dit zelf te zien.
Zorg ervoor dat u de loopCount gelijk aan 1 in de "show" -reeks.
Verander nu het volgende codeblok:
Accentsconagua
tempGroundHog: setSequence ("blank") tempGroundHog: addEventListener ('tap', groundHogHit); Hier hebben we de reeks op "leeg" gezet en een tik-luisteraar aan de groundhog-sprite toegevoegd.
Verwijder vervolgens de volgende regel code:
tempGroundHog: play ()
Als je nu test, moet geen van de groundhog's animeren. Binnenkort krijgen we een willekeurige groundhog-animatie!
Wanneer de groundhog wordt afgetapt zullen we bepalen of het al dan niet uit zijn gat was. Als dat het geval is, zullen we de volgorde wijzigen in een van de drie hitstatussen die we in de vorige stap hebben toegevoegd.
Voeg het volgende toe in de groundHogHit () functie:
local thisSprite = e.target thisSprite: removeEventListener ("sprite", groundHogSpriteListener) local function hide () thisSprite: setSequence ("blank") end if (thisSprite.sequence == "show") then local randomIndex = math.random (3 ) thisSprite: setSequence ("hit" ... randomIndex) timer.performWithDelay (1000, hide) end Hier verwijzen we naar de Sprite waarop is geklikt e.target en de Event Listener verwijderen. We controleren dan of de volgorde gelijk is aan "show". Als dit het geval is, genereren we een getal tussen 1 en 3 en stellen de reeks gelijk aan "hit" ... randomIndex. Dit alles doet de strings "hit1", "hit2" of "hit3" genereren. Ten slotte noemen we de lokale hide-functie na 1000 milliseconden die de Sprites-reeks op "leeg" zet.
De getRandomGroundHog () functie krijgt een willekeurige groundhog en laat het beginnen met animeren. Voer het volgende in de getRandomGroundHog () functie:
local randomIndex = math.random (#allGroundHogs) local randomGroundHog = allGroundHogs [randomIndex] if (randomGroundHog.sequence ~ = "blank") then getRandomGroundHog () else randomGroundHog: addEventListener ("sprite", groundHogSpriteListener) randomGroundHog: setSequence ("show") ) randomGroundHog: play () einde Hier krijgen we een randomIndex van de allGroundHogs tafel. Vervolgens stellen we de randomGroundHog gelijk aan de index. We controleren dan of de volgorde niet gelijk is aan "leeg", en als dat niet het geval is, bellen we getRandomGroundHog () nog een keer. Anders voegen we de groundHogSpriteListener om de volgorde in te stellen op "show" en de reeks af te spelen.
De groundHogSpriteListener () controleert of de "show" -reeks is afgelopen. Als dit het geval is, wordt de reeks in de "blanco" reeks geplaatst. Voer het volgende in het groundHogSpriteListener ():
local thisSprite = event.target - "event.target" verwijst naar de sprite if (event.phase == "ended") then if (thisSprite.sequence == "show") then thisSprite: setSequence ("blank") end - - een vertraging van een halve seconde Met al het bovenstaande op zijn plaats krijgen we willekeurige groundhogs die animeren. Voeg het volgende toe aan de onderkant van desetUpGameScreen () functie:
groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0)
Als je nu test, zou je moeten zien dat de groundhogs willekeurig uit hun gaten komen. Terwijl je daar bent, probeer te klikken op de groundhogs terwijl ze uit hun gaten zijn. U zou een van de 3 hitstatussen moeten zien en vervolgens de lege status.
Als u klaar bent met testen, verwijdert u de regel die u zojuist hebt ingevoerd. We hadden het alleen nodig om te testen.
In deze stap beginnen we met het instellen van het introscherm. Voer de volgende code in de setUpIntroScreen functie:
media.playSound ("gameTrack.mp3", soundComplete) introScreenGroup = display.newGroup () local titleScreen = display.newImage ("titleScreen.png") local playButton = display.newImage ("playButton.png", 100.100) local optionsButton = display.newImage ("optionsButton.png", 100,170) introScreenGroup: insert (titleScreen) introScreenGroup: insert (playButton) introScreenGroup: insert (optionsButton) Hier beginnen we de soundtrack, stellen het introscherm in en voegen de afspeelknop en optionsButton grafiek.
Bel nu de setUpIntroScreen () functie onder waar u belt setUpGameScreen () functie…
setUpGameScreen () setUpIntroScreen ()
Als je nu test, zou je het introscherm moeten zien. We moeten Event Listeners toevoegen aan de knoppen en dat is wat we zullen doen in de volgende stappen.
Voer het volgende in onder de code die u in de bovenstaande stap hebt ingevoerd:
playButton: addEventListener ("tap", function () transition.to (introScreenGroup, time = 300, x = -480, onComplete = function () groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) end) isPlaying = true einde) Wanneer de afspeelknop wordt ingedrukt, animeren we het introductiescherm naar links, stel onze in groundHogTimer om willekeurige groundhogs te genereren, en stel dan de speelt veranderlijk in waar.
Als je nu test, zou je een nieuwe game moeten kunnen starten, maar we zouden ook graag enkele opties beschikbaar hebben. Dat doen we daarna.
Voer het volgende in onder de code die u in de bovenstaande stap hebt ingevoerd.
optionsButton: addEventListener ("tap", function () transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = function () introScreenGroup. x = -480 end) end) Deze code animeert het optievenster van bovenaf. Wanneer de animatie is voltooid, wordt de introScreenGroup van het hoofdscherm naar links.
Als u nu test en op de optieknop drukt, ziet u niets gebeuren en dat komt omdat we het scherm met opties nog niet hebben gemaakt.
Voer het volgende in de setUpOptionsScreen () functie:
optionsScreenGroup = display.newGroup () local optionsScreen = display.newImage ("optionsScreen.png") local backButton = display.newImage ("backButton.png", 130.240) local soundOnText = display.newText ("Sound On / Off", 75.105 , native.systemFontBold, 16) local groundHogSpeedText = display.newText ("Speed", 75.145, native.systemFontBold, 16) optionsScreenGroup: insert (optionsScreen) optionsScreenGroup: insert (backButton) optionsScreenGroup: insert (soundOnText) optionsScreenGroup: insert (groundHogSpeedText) optionsScreenGroup.y = -325 Hier hebben we de optionsScreen, voeg het toe terug knop, en voeg een paar teksten toe.
Bel nu deze functie onder waar u belt setUpIntroScreen:
setUpIntroScreen () setUpOptionsScreen ()
Als je het spel nu test, zie je het optiescherm van boven naar beneden glijden.
We zullen de checkbox-widget gebruiken om de gebruiker toe te staan het geluid aan / uit te zetten. Voer het volgende in het bovenste gedeelte van het bestand "main.lua" in.
lokale widget = vereisen ("widget") Om de Switch en andere widgets te kunnen gebruiken, moeten we eerst de "widget" -module nodig hebben
Voer nu het volgende in onder de code die u hierboven hebt ingevoerd in de setUpOptionsScreen.
local soundCheckBox = widget.newSwitch left = 210, top = 98, style = "checkbox", initialSwitchState = true, onPress = function (e) local check = e.target if (check.isOn) en media.playSound ("gameTrack .mp3 ", soundComplete) else media.stopSound () end end optionsScreenGroup: insert (soundCheckBox) Dit stelt onze checkbox-widget in door "style" gelijk te stellen aan "checkbox". We controleren of het selectievakje is ingeschakeld staat aan (als het geselecteerd is), en als dat zo is spelen we de "gameTrack.mp3". Zo niet, dan stoppen we het geluid.
Als je nu test en naar het optiescherm gaat, zou je het geluid aan of uit moeten kunnen zetten.
We gebruiken een SegmentedControl om de gebruiker in staat te stellen te kiezen hoe snel de GroundHogs moeten verschijnen. Voer het volgende in onder de code voor het selectievakje dat u in de bovenstaande stap hebt ingevoerd:
local speedControl = widget.newSegmentedControl left = 210, top = 140, segments = "slow", "medium", "fast", segmentWidth = 50, defaultSegment = 1, onPress = function (event) local target = event. target if (target.segmentNumber == 1) then groundHogSpeed = 1500 elseif (target.segmentNumber == 2) then groundHogSpeed = 1000 else groundHogSpeed = 700 end end optionsScreenGroup: insert (speedControl)
Hier maken we een SegmentedControl met 3 segmenten ("slow", "medium", "fast"). Afhankelijk van het segment dat de gebruiker heeft ingedrukt, stellen we de groundHogSpeed variabele overeenkomstig.
Als je nu test, zou je de SegmentedControl moeten zien en een segment kunnen selecteren, maar we moeten de terugknop bedraden om terug te gaan naar het introscherm.
De terug knop brengt ons terug naar het introscherm. Voer de volgende code onder de bovenstaande stap in:
backButton: addEventListener ("tap", function () if (isPlaying == false) en introScreenGroup.x = 0 end transition.to (optionsScreenGroup, time = 300, y = -325, onComplete = function () if (isPlaying = = true) en groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) end end) end) Hier controleren we of het spel is begonnen. Zo niet, dan zetten we de introScreenGroup terug in het speelveld. Vervolgens zetten we het scherm met opties weer over. Als de game is gestart, stellen we de groundHogtimer om willekeurige groundhogs te genereren.
We moeten vanuit het hoofdscherm van de game naar het optiescherm kunnen gaan. Voeg het volgende hieronder toe waar u het invoegt gameBackground in de gameScreenGroup ().
gameScreenGroup: insert (gameBackground) local optionsButton = display.newImage ("optionsButton.png", 1,270) gameScreenGroup: insert (optionsButton) Als je nu test, zou je de optieknop op het spelscherm moeten zien.
Nu moeten we de knop Opties verbinden met een EventListener. Om dit te doen, voert u de volgende code in onder de lus die alle groundhogs maakt.
optionsButton: addEventListener ("tap", functie (e) timer.cancel (groundHogTimer) transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = function () end) end) Hier annuleren we de groundHogTimer en zet ons optiescherm naar beneden.
Als je nu test, zou je vanaf het spelscherm naar het optiescherm kunnen gaan. Je zou ook in staat moeten zijn om de opties naar wens in te stellen.
Als u lang genoeg hebt gespeeld om de soundtrack te voltooien, is het u misschien opgevallen dat het niet opnieuw is begonnen. Voer het volgende in het soundComplete () functie.
media.playSound ("gameTrack.mp3", soundComplete) Hiermee wordt de soundtrack pas opnieuw gestart zodra deze is voltooid.
In deze serie hebben we geleerd hoe je een leuk en interessant Whack-a-Groundhog-spel kunt maken. Door dit te doen, heb je geleerd hoe je Sprite-sheets en geluid kunt gebruiken. Ik hoop dat je deze tutorial nuttig hebt gevonden, en bedankt voor het lezen!
