Share
Welkom bij het tweede bericht in onze Corona SDK Frenzic-achtige gameserie. In de tutorial van vandaag voegen we interactiviteit toe aan onze interface en coderen we het begin van de game.
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen.
Verklaar alle functies als lokaal aan het begin.
local Main = local addTitleView = local startButtonListeners = local showCredits = local hideCredits = local destroyCredits = local showGameView = local destroyTitleView = local addListeners = local newBlock = local timesUp = local placeBlock = local blockPlaced = local complete = local removeBlocks = local alert = local alertHandler = local restart =
Vervolgens maken we de functie waarmee alle spellogica wordt geïnitialiseerd:
functie Main () addTitleView () end
Nu plaatsen we de achtergrond en titelweergave in het werkgebied.
Accentsconagua
function addTitleView () bg = display.newImage ('bg.png') title = display.newImage ('title.png') title.x = display.contentCenterX title.y = 100 startB = display.newImage ('startButton.png ') startB.x = display.contentCenterX startB.y = display.contentCenterY startB.name =' startB 'creditsB = display.newImage (' creditsButton.png ') creditsB.x = display.contentCenterX creditsB.y = display.contentCenterY + 40 creditsB.name = 'creditsB' titleView = display.newGroup () titleView: insert (title) titleView: insert (startB) titleView: insert (creditsB) startButtonListeners ('add') einde In deze functie voegen we de tikluisteraars toe aan de knoppen in de titelweergave, dit brengt ons naar het spelscherm of het creditsscherm.
function startButtonListeners (action) if (action == 'add') en creditsB: addEventListener ('tap', showCredits) startB: addEventListener ('tap', showGameView) else creditsB: removeEventListener ('tap', showCredits) startB: removeEventListener ( 'tik', showGameView) einde Het credits scherm wordt getoond wanneer de gebruiker op de credits knop tikt, een tik luisteraar wordt toegevoegd aan de credits weergave om het te verwijderen.
function showCredits () credits = display.newImage ('credits.png') transition.from (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo) credits: addEventListener ('tik op', hideCredits) titleView.isVisible = false end Wanneer op het aftitelingscherm wordt getikt, wordt het uit het werkgebied geschud en verwijderd.
function hideCredits () titleView.isVisible = true transition.to (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo, onComplete = destroyCredits) end function destroyCredits () credits: removeEventListener ('tap ', hideCredits) display.remove (credits) credits = nul einde Wanneer de Begin knop wordt ingedrukt, de titelweergave wordt getweend en verwijderd, waardoor de gameweergave wordt onthuld.
functie showGameView (e) transition.to (titleView, time = 300, y = -titleView.height, transition = easing.inExpo, onComplete = destroyTitleView) einde
De titelweergave wordt uit het geheugen verwijderd en de grafische afbeeldingen van de game worden aan het werkgebied toegevoegd.
function destroyTitleView () display.remove (titleView) titleView = nil - GameView Graphics toevoegen up = display.newImage ('container.png') omhoog: setReferencePoint (display.TopLeftReferencePoint) up.x = 125 op.y = 100 rechts = display.newImage ('container.png') right: setReferencePoint (display.TopLeftReferencePoint) right.x = 230 right.y = 205 down = display.newImage ('container.png') down: setReferencePoint (display.TopLeftReferencePoint) down. x = 125 down.y = 310 links = display.newImage ('container.png') links: setReferencePoint (display.TopLeftReferencePoint) left.x = 20 left.y = 205 holder = display.newImage ('container.png') houder: setReferencePoint (display.TopLeftReferencePoint) holder.x = 125 holder.y = 205 - Woon & score tekst livesText = display.newText ('Lives', 10, 10, 'Orbitron-Medium', 12) livesText: setTextColor ( 163, 255, 36) livesTF = display.newText ('5', 24, 30, 'Orbitron-Medium', 12) livesTF: setTextColor (163, 255, 36) scoreText = display.newText ('Score', 260, 10, 'Orbitron-Medium', 12) score eText: setTextColor (163, 255, 36) scoreTF = display.newText ('0', 274, 30, 'Orbitron-Medium', 12) scoreTF: setTextColor (163, 255, 36) gameView = display.newGroup () gameView : insert (up) gameView: insert (right) gameView: insert (down) gameView: insert (links) gameView: insert (houder) gameView: insert (livesText) gameView: insert (livesTF) gameView: insert (scoreText) gameView: insert (scoreTF) addListeners () einde Met deze functie wordt een tikluisteraar aan de vierkante containers toegevoegd, zodat u erop kunt tikken en het huidige blok in de middelste (houder) container kunt plaatsen.
functie addListeners () omhoog: addEventListener ('tap', placeBlock) right: addEventListener ('tap', placeBlock) naar beneden: addEventListener ('tap', placeBlock) links: addEventListener ('tap', placeBlock) lives = 5 score = 0 Deze variabelen worden gemaakt binnen de vierkante containers, ze worden gebruikt om de blokken, kleuren en posities binnen elk vierkant te registreren.
De letters vertegenwoordigen de volgende posities:
-- Maak een var voor elke container om te bepalen wanneer volledig up.blocks = 0 right.blocks = 0 down.blocks = 0 left.blocks = 0 - Arrays gebruikt om blokken te verwijderen en kleur up.blocksGFX = right.blocksGFX = down.blocksGFX = left.blocksGFX = - Maak een boolean voor elke container om te voorkomen dat blokken in dezelfde positie worden geplaatst upa = false right.a = false down.a = false left.a = false up.b = false right.b = false down.b = false left.b = false up.c = false right.c = false down.c = false left.c = false up.d = false right.d = false down.d = false left.d = false - Geef de containers een naam om ze later te identificeren. up.name = 'up' right.name = 'right' down.name = 'down' left.name = 'left' newBlock (waar) einde
Deze code kiest een willekeurige blokkleur uit de tabel, deze wordt gebruikt om het eigenlijke blok te instantiëren. Een parameter wordt gebruikt om te bepalen of de timer moet worden gestart.
function newBlock (firstTime) - New Block local randomBlock = math.floor (math.random () * 3) + 1 lokaal blok if (blockColor [randomBlock] == 'orange') block dan = display.newImage ('orangeBlock. png ') blok.name =' oranje 'blok: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] ==' green ') en block = display.newImage (' greenBlock.png ') block.name =' green ' blok: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'purple') en block = display.newImage ('purpleBlock.png') block.name = 'purple' block: setReferencePoint (display.TopLeftReferencePoint) einde Na het selecteren van de blokkleur, wordt de positie waarin deze wordt geplaatst, berekend aan de hand van de positietabel en vervolgens toegevoegd aan de bloktabel en de fase.
currentXPosition = posities [math.floor (math.random () * 2) + 1] currentYPosition = posities [math.floor (math.random () * 2) + 1] block.x = holder.x + currentXPosition block.y = houder.y + currentYPosition table.insert (blocks, block) gameView: insert (block)
Voordat we verder gaan met het spel, moeten we controleren of het nieuw gemaakte blok daadwerkelijk in een vierkante container kan worden geplaatst. De volgende code controleert elke containergroep om te zorgen dat er een positie beschikbaar is om het blok te plaatsen. Als dit niet het geval is, wordt het blok vernietigd en wordt de functie opnieuw opgeroepen om een ander te genereren.
lokale positie = currentXPosition, currentYPosition if (positie [1] == 5 en positie [2] == 5 en omhoog.a == true en right.a == true en down.a == true en left.a == true) en display.remove (block) block = nil newBlock (false) elseif (positie [1] == 35 en positie [2] == 5 en up.b == true en right.b == true en down.b == true en left.b == true) then display.remove (block) block = nil newBlock (false) elseif (positie [1] == 5 en positie [2] == 35 en up.c = = true en right.c == true en down.c == true en left.c == true) then display.remove (block) block = nil newBlock (false) elseif (positie [1] == 35 en positie [ 2] == 35 en hoger.d == true en right.d == true en down.d == true en left.d == true) then display.remove (block) block = nil newBlock (false) einde
De timer begint te tellen wanneer de functie voor de eerste keer wordt aangeroepen.
if (firstTime) then - Start Timer timerSource = timer.performWithDelay (3000, timesUp, 0) einde
Drie seconden worden gegeven om een blok in een vierkante container te plaatsen, als die tijd verstrijkt en het blok zich nog steeds in het middenvierkant bevindt, wordt een leven verwijderd.
function timesUp: timer (e) - Remove Life lives = lives - 1 livesTF.text = lives media.playEventSound ('buzz.caf') Na het verwijderen van de levensduur wordt het blok in het middenvak vernietigd en wordt een nieuw blok gegenereerd.
display.remove (blokkeert [#blocks]) table.remove (blokken)
Deze code controleert of de speler geen levens heeft en roept een functie aan die daarmee omgaat.
if (levens < 1) then alert() else -- Next Block newBlock(false) end end
Hier is de volledige code die in deze zelfstudie is geschreven, samen met opmerkingen om u te helpen bij het identificeren van elk onderdeel:
-- Sorteer 'Frenzic' zoals Game - Ontwikkeld door Carlos Yanez - Hide Status Bar display.setStatusBar (display.HiddenStatusBar) - Graphics - [achtergrond] local bg - [Titeloverzicht] lokale titel local startB local creditsB - [ TitleView Group] lokale titelView - [Score & levens] local livesText local livesTF local lives local scoreTekst local scoreTF lokale score - [GameView] lokaal lokaal lokaal lokaal lokaal links lokaal houder - [GameView Group] lokaal spelView - [ CreditsView] local credits - Variabelen local blockColor = 'orange', 'green', 'purple' local blocks = lokale posities = 5, 35 local currentXPosition local currentYPosition local eventTarget local timerBron lokale lives local score local bell local bell4 local buzz - Functies local Main = local addTitleView = local startButtonListeners = local showCredits = local hideCredits = local destroyCredits = local showGameView = local destroyTitleView = local addListeners = lokale newBlock = lokale tijdenUp = local placeBlock = local blockPlaced = local complete = local removeBlocks = local alert = local alertHandler = local restart = function Main () addTitleView () end function addTitleView () bg = display.newImage ('bg.png') title = display.newImage ('title.png') title.x = display.contentCenterX title.y = 100 startB = display.newImage ('startButton.png') startB. x = display.contentCenterX startB.y = display.contentCenterY startB.name = 'startB' creditsB = display.newImage ('creditsButton.png') creditsB.x = display.contentCenterX creditsB.y = display.contentCenterY + 40 creditsB.name = 'creditsB' titleView = display.newGroup () titleView: insert (title) titleView: insert (startB) titleView: insert (creditsB) startButtonListeners ('add') eindfunctie startButtonListeners (action) if (action == 'add') vervolgens creditsB: addEventListener ('tap', showCredits) startB: addEventListener ('tap', showGameView) else creditsB: removeEventListener ('tap', showCredits) startB: removeEventListener ('tap', showGameView) end end function showCredits () credits = display.newImage ('credits.png') transition.from (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo) credits: addEventListener ( 'tik', hideCredits) titleView.isVisible = false end-functie hideCredits () titleView.isVisible = true transition.to (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo, onComplete = destroyCredits ) eindfunctie destroyCredits () credits: removeEventListener ('tap', hideCredits) display.remove (credits) credits = nul einde functie showGameView (e) transition.to (titleView, time = 300, y = -titleView.height, transition = easing.inExpo, onComplete = destroyTitleView) einde functie destroyTitleView () display.remove (titleView) titleView = nil - GameView Graphics toevoegen up = display.newImage ('container.png') omhoog: setReferencePoint (display.TopLeftReferencePoint) omhoog .x = 125 op.y = 100 rechts = display.newImage ('container.png') right: setReferencePoint (display.TopLeftReferencePoint ) right.x = 230 right.y = 205 down = display.newImage ('container.png') down: setReferencePoint (display.TopLeftReferencePoint) down.x = 125 down.y = 310 left = display.newImage ('container. png ') links: setReferencePoint (display.TopLeftReferencePoint) left.x = 20 left.y = 205 houder = display.newImage (' container.png ') houder: setReferencePoint (display.TopLeftReferencePoint) holder.x = 125 holder.y = 205 - Lives & Score Tekst livesText = display.newText ('Lives', 10, 10, 'Orbitron-Medium', 12) livesText: setTextColor (163, 255, 36) livesTF = display.newText ('5', 24 , 30, 'Orbitron-Medium', 12) livesTF: setTextColor (163, 255, 36) scoreText = display.newText ('Score', 260, 10, 'Orbitron-Medium', 12) scoreTekst: setTextColor (163, 255 , 36) scoreTF = display.newText ('0', 274, 30, 'Orbitron-Medium', 12) scoreTF: setTextColor (163, 255, 36) gameView = display.newGroup () gameView: insert (up) gameView: insert (right) gameView: insert (down) gameView: insert (left) gameView: insert (holder) gameView: insert (livesText) game Beeld: insert (livesTF) gameView: insert (scoreText) gameView: insert (scoreTF) addListeners () eindfunctie addListeners () omhoog: addEventListener ('tap', placeBlock) right: addEventListener ('tap', placeBlock) down: addEventListener ( 'tik', placeBlock) links: addEventListener ('tap', placeBlock) lives = 5 score = 0 - Maak een var voor elke container om te bepalen wanneer volledig up.blocks = 0 right.blocks = 0 down.blocks = 0 left .blocks = 0 - Arrays gebruikt om blokken te verwijderen en kleur te detecteren up.blocksGFX = right.blocksGFX = down.blocksGFX = left.blocksGFX = - Maak een boolean voor elke container om te voorkomen dat blokken worden geplaatst in dezelfde positie up.a = false right.a = false down.a = false left.a = false up.b = false right.b = false down.b = false left.b = false up.c = false right .c = false down.c = false left.c = false up.d = false right.d = false down.d = false left.d = false - Geef de containers een naam om ze later te identificeren up.name = 'omhoog' right.name = 'right' down.name = 'down' left.name = 'left' newBlock (true) eindfunctie newBlock (firstTime) - New Block local randomBlock = math.floor (math.random () * 3) + 1 lokaal blok if (blockColor [randomBlock] == 'orange') en block = display. newImage ('orangeBlock.png') block.name = 'orange' block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'green') blok vervolgens block = display.newImage ('greenBlock.png'). name = 'groen' blok: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'purple') en block = display.newImage ('purpleBlock.png') block.name = 'purple' block: setReferencePoint (display .TopLeftReferencePoint) einde currentXPosition = posities [math.floor (math.random () * 2) + 1] currentYPosition = posities [math.floor (math.random () * 2) + 1] block.x = holder.x + currentXPosition block.y = holder.y + currentYPosition table.insert (blocks, block) gameView: insert (block) - Controleer of er een beschikbare spatie is om de lokale positie van het blok te verplaatsen = currentXPosition, currentYPosition if (pos ition [1] == 5 en positie [2] == 5 en omhoog.a == true en right.a == true en down.a == true en left.a == true) then display.remove (blokkeren ) block = nil newBlock (false) elseif (positie [1] == 35 en positie [2] == 5 en up.b == true en right.b == true en down.b == true en left.b == true) en display.remove (block) block = nil newBlock (false) elseif (positie [1] == 5 en positie [2] == 35 en up.c == true en right.c == true en down.c == true en left.c == true) then display.remove (block) block = nil newBlock (false) elseif (positie [1] == 35 en positie [2] == 35 en hoger.d = = true en right.d == true en down.d == true en left.d == true) then display.remove (block) block = nul newBlock (false) end - Start Timer de eerste keer dat de functie wordt aangeroepen if (firstTime) then - Start Timer timerSource = timer.performWithDelay (3000, timesUp, 0) eindtijd functietijdenUp: timer (e) - Live lives verwijderen = lives - 1 livesTF.text = lives media.playEventSound ('buzz .caf ') - Ongebruikt blokscherm verwijderen. remove (blokkeert [#blocks]) table.remove (blokken) - Controleer of uit levens if (levens < 1) then --alert() else -- Next Block newBlock(false) end end In het volgende en laatste deel van de serie behandelen we het gedrag van de blokken, scores en de laatste stappen die moeten worden genomen voorafgaand aan het vrijgeven van de app -achtige app-testen, het maken van een startscherm, het toevoegen van een pictogram en het bouwen van de app. Blijf op de hoogte voor het laatste deel!
