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!
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.
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
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
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
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)
Deze code plaatst de achtergrond van het spel in het werkgebied.
-- [GFX toevoegen] - Game Bg gameBg = display.newImage ('gameBg.png')
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'
Deze regel voegt het scoretekstveld toe:
-- Score Tekstscore = display.newText ('0', 74, 3, native.systemFontBold, 15) score: setTextColor (252, 202, 1)
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 ()
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
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
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
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
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 =
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
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
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
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])
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)
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)
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
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
Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
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.
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.
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!
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!
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!