Bouw een Snake-game - Interactie toevoegen

In deze tutorialserie leer je hoe je een spel zoals Snake kunt maken. Het doel van het spel is om de appels op het scherm te pakken om de score te verhogen. Lees verder!


Waar we zijn gebleven ...

Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.


Stap 1: Start-knop Luisteraars

Deze functie voegt de benodigde luisteraars toe aan de TitleView toetsen.

 function startButtonListeners (action) if (action == 'add') then playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener ( 'tik', showCredits) einde

Stap 2: toon credits

Het aftitelingscherm wordt weergegeven wanneer de gebruiker op de knop Over tikt, a tik luisteraar is toegevoegd aan de weergave credits om deze te verwijderen.

 functie showCredits: tik op (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', display.contentCenterX - 110, display.contentHeight + 40) transition.to (creditsView, time = 300, y = display.contentHeight-20, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) einde

Stap 3: Verberg tegoeden

Wanneer het creditsscherm wordt aangebroken, wordt het uit het werkgebied geschud en verwijderd.

 functie hideCredits: tik op (e) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil end) end

Stap 4: Spelweergave tonen

Wanneer de Begin op de knop is getikt, de titelweergave is getweend en verwijderd waardoor de gameweergave wordt onthuld. Er zijn veel onderdelen betrokken bij deze weergave, dus we zullen ze in de volgende stappen splitsen.

 functie showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end)

Stap 5: Spelachtergrond toevoegen

Deze code plaatst de achtergrond van het spel in het werkgebied.

 -- [GFX toevoegen] - Game Bg gameBg = display.newImage ('gameBg.png')

Stap 6: Game Pad toevoegen

Om de slang in het scherm te verplaatsen, hebben we een gamepad nodig, dit zorgt ervoor. EEN tik luisteraar zal later aan elke pijl worden toegevoegd om de beweging af te handelen.

 -- Pad omhoog = display.newImage ('up.png', 33.5, 219.5) left = display.newImage ('left.png', 0, 252.5) ​​down = display.newImage ('down.png', 33.5, 286.5) right = display.newImage ('right.png', 66.5, 252.5) ​​up.name = 'up' down.name = 'down' left.name = 'left' right.name = 'right'

Stap 7: Scoor tekst

Deze regel voegt het scoretekstveld toe:

 -- Score Tekstscore = display.newText ('0', 74, 3, native.systemFontBold, 15) score: setTextColor (252, 202, 1)

Stap 8: Hoofd

Vervolgens voegen we het hoofd van de slang toe. Zoals vermeld in de vorige tutorial, hit gebied wordt er bovenop toegevoegd en dan worden beide in een groep opgeslagen.

 -- Head headGFX = display.newImage ('head.png', display.contentCenterX-0.3, display.contentCenterY-0.2) headHitArea = display.newLine (display.contentCenterX + 6, display.contentCenterY-0.2, display.contentCenterX + 8, display .contentCenterY-0.2) headHitArea: setColor (0, 0, 0) headHitArea.width = 2 head = display.newGroup (headGFX, headHitArea) lastPart = head parts = display.newGroup ()

Stap 9: Eerste Apple

De eerste appel wordt door deze code op een willekeurige positie toegevoegd.

 -- Voeg eerst de lokale local randomX = 25 + math.floor (math.random () * 402) local randomY = 25 + math.floor (math.random () * 258) local apple = display.newImage ('apple.png', randomX, randomY) apples = display.newGroup (apple) gameListeners () einde

Stap 10: Spelluisteraars

Deze functie voegt de nodige luisteraars toe om de spellogica te starten.

 function gameListers () omhoog: addEventListener ('tap', movePlayer) links: addEventListener ('tap', movePlayer) naar beneden: addEventListener ('tap', movePlayer) right: addEventListener ('tap', movePlayer) einde

Stap 11: Spelerfunctie verplaatsen

De richtingsvariabele wordt veranderd door deze functie, hierdoor gaat de slang in de ingedrukte richting.

 functie movePlayer (e) dir = e.target.name if (started == nil) then timerSrc = timer.performWithDelay (speed, update, 0) started = true end end

Stap 12: Test-objecten raken

We zullen een uitstekende en nuttige functie gebruiken voor botsdetectie zonder natuurkunde, u kunt het originele exemplaar en de bron vinden op de CoronaLabs Code Exchange-website.

 function hitTestObjects (obj1, obj2) local left = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin local right = obj1.contentBounds.xMin> = obj2.contentBounds.xMin en obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local down = obj1.contentBounds.yMin> = obj2.contentBounds.yMin en obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end

Stap 13: Krijg hoofd laatste positie

We vangen de laatste positie van de slangekop om de onderdelenpositie bij te werken, waarbij elke de x- en y-coördinaten van de andere vervangt.

 function update () - Laatste positie van Capture head, dit verplaatst het eerste toegevoegde stuk local lastX = head.x local lastY = head.y local xPos =  local yPos = 

Stap 14: Verplaats delen

Dit is een aanvulling op het gedrag dat in de vorige stap werd uitgelegd.

 voor i = 1, parts.numChildren do - Capture parts position om ze te verplaatsen xPos [i] = parts [i] .x yPos [i] = parts [i] .y - Verplaats parts if (parts [i-1 ] == nul) en vervolgens delen [i] .x = laatsteX delen [i] .y = lastY else parts [i] .x = xPos [i-1] parts [i] .y = yPos [i-1] end

Stap 15: Controleer op Game Over

Het spel eindigt wanneer de kop van de slang een ander deel van de slang raakt. Een geluid wordt afgespeeld als feedback.

 -- Spel over als hoofd ander deel van slang raakt als (hitTestObjects (headHitArea, parts [i])) en print (delen [i] .name) als (delen [i] .name == '1') dan print ('one ') else timer.cancel (timerSrc) timerSrc = nil audio.play (gameOver) end end

Stap 16: Verplaats het hoofd

Deze lijnen bewegen het hoofd volgens de richting die door de beweeg speler functie gemaakt in stap 11.

 -- Move Head & Hit Area als (dir == 'up') en head.y = head.y - mConst headHitArea.x = headGFX.x headHitArea.y = headGFX.y - 7 elseif (dir == 'left') dan head.x = head.x - mConst headHitArea.x = headGFX.x - 8 headHitArea.y = headGFX.y elseif (dir == 'down') en head.y = head.y + mConst headHitArea.x = headGFX. x headHitArea.y = headGFX.y + 8 elseif (dir == 'right') en head.x = head.x + mConst headHitArea.x = headGFX.x + 7 headHitArea.y = headGFX.y einde

Stap 17: Apple-Head Collision

Er doen zich verschillende acties voor wanneer de slang een appel eet die we in de volgende stappen zullen doornemen.

Eerst verwijderen we de appel.

 -- Detecteer een botsing tussen apple-spelers voor i = 1, apples.numChildren do if (hitTestObjects (head, apples [i])) then - Remove Apple display.remove (apples [i])

Stap 18: Update Score

Vervolgens updaten we het scoretekstveld en spelen een geluid om aan te geven dat de appel is gegeten.

 -- Score toevoegen Score.text = score.text + tostring (10) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 74 audio.play (appleGrab)

Stap 19: voeg het slangdeel toe

Vervolgens wordt een nieuw onderdeel aan de slang toegevoegd. De positie wordt berekend door het laatste deel dat wordt toegevoegd (de eerste keer is het hoofd) en vervolgens worden ze toegevoegd aan een groep.

 -- Voeg snake body local part = display.newImage ('bodyPart.png') toe als (dir == 'up') en part.x = lastPart.x part.y = lastPart.y + mConst elseif (dir == 'left' ) part.x = lastPart.x + mConst part.y = lastPart.y elseif (dir == 'down') part.x = lastPart.x part.y = lastPart.y - mConst elseif (dir == ' right ') part.x = lastPart.x - mConst part.y = lastPart.y einde current = current + 1 part.name = tostring (current) lastPart = deel onderdelen: invoegen (deel)

Stap 20: Nieuwe Apple

Ten slotte creëren we een nieuwe appel en plaatsen deze in een willekeurige positie in het werkgebied.

 -- Voeg nieuwe lokale locale randomX = 25 + math.floor toe (math.random () * 402) lokale randomY = 25 + math.floor (math.random () * 258) local apple = display.newImage ('apple.png', randomX, randomY) apples = display.newGroup (apple) end end

Stap 21: Schermlimieten

Hierdoor verschijnt de slang aan de andere kant van het podium.

 -- Schermlimieten als (head.x < 0) then head.x = display.contentWidth - mConst elseif(head.x > display.contentWidth) en head.x = 0 end - Vertical if (head.y < 0) then head.y = display.contentHeight - mConst elseif(head.y > display.contentHeight) en head.y = 0 end end

Stap 22: Hoofdfunctie oproepen

Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:

 Hoofd()

Stap 23: scherm laden

Het bestand Default.png is een afbeelding die juist wordt weergegeven wanneer u de toepassing start terwijl de iOS de basisgegevens laadt om het hoofdscherm weer te geven. Voeg deze afbeelding toe aan uw projectbronmap en deze wordt automatisch toegevoegd door de Corona-compileermachine.


Stap 24: Icoon

Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een mooi en goed uitziend pictogram maken. De pictogramgrootte voor het niet-retina-iPhone-pictogram is 57x57px, maar de netvliesversie is 114x114px en de iTunes-winkel heeft een 512x512px-versie nodig. Ik stel voor eerst de 512x512-versie te maken en vervolgens de overige formaten te verkleinen.

Het hoeft niet de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone zullen dat voor je doen.


Stap 25: Testen in Simulator

Het is tijd om de laatste test te doen. Open de Corona Simulator, blader naar uw projectmap en klik vervolgens op Openen. Als alles werkt zoals verwacht, bent u klaar voor de laatste stap!


Stap 26: Build

Ga in de Corona Simulator naar Bestand> Build en selecteer uw doelapparaat. Vul de vereiste gegevens in en klik op bouwen. Wacht een paar seconden en uw app is gereed voor apparaattesten en / of verzending voor distributie!


Conclusie

Experimenteer met het eindresultaat en probeer je aangepaste versie van het spel te maken!

Ik hoop dat je deze tutorialserie leuk vond en het nuttig vond. Bedankt voor het lezen!