Corona SDK maak een alfabetensoepspel - interactie

Dit is de tweede aflevering in onze Corona SDK Alphabet Soup Game-zelfstudie. In de tutorial van vandaag zullen we toevoegen aan onze interface en beginnen met het coderen van de game-interactie. Lees verder!


Stap 1: Functies verklaren

Verklaar alle functies als lokaal aan het begin.

 local Main =  local addTitleView =  local startBtnuttonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local buildSoup =  local startDraw =  local hitTestObjects =  local detectLetters =  local alert = 

Stap 2: Constructor

Vervolgens maken we de functie waarmee alle spellogica wordt geïnitialiseerd:

 functie Main () addTitleView () end

Stap 3: Titelweergave toevoegen

Nu plaatsen we TitleView in de fase en roepen we een functie aan die de tik luisteraars naar de knoppen.

 functie addTitleView () titleBg = display.newImage ('titleBg.png') title = display.newImage ('title.png') title.x = display.contentCenterX title.y = 120 startBtn = display.newImage ('startBtn.png ') startBtn.x = display.contentCenterX startBtn.y = display.contentCenterY + 20 aboutBtn = display.newImage (' aboutBtn.png ') aboutBtn.x = display.contentCenterX aboutBtn.y = display.contentCenterY + 65 titleView = display. newGroup () titleView: insert (titleBg) titleView: insert (title) titleView: insert (startBtn) titleView: insert (aboutBtn) startButtonListeners ('add') end end

Stap 4: Start-knop Luisteraars

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

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

Stap 5: 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.

 function showCredits: tap () aboutBtn.isVisible = false startBtn.isVisible = false about = display.newImage ('about.png') about.x = about.width * 0.474 about.y = display.contentHeight + about.height transition. to (about, time = 300, y = display.contentHeight - about.height / 2.4, onComplete = function () about: addEventListener ('tap', hideCredits) end) end

Stap 6: Verberg tegoeden

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

 function hideCredits () transition.to (about, time = 300, y = display.contentHeight + about.height, onComplete = function () aboutBtn.isVisible = true startBtn.isVisible = true over: removeEventListener ('tap', hideCredits) display.remove (about) about = nil end) end

Stap 7: Spelweergave tonen

Wanneer de Begin op de knop is getikt, de titelweergave is getweend en verwijderd waardoor de gameweergave wordt onthuld.

 functie showGameView: tik op () transition.to (titleView, time = 300, y = -titleView.height, onComplete = function () display.remove (titleView) titleView = nil buildSoup () gameListeners ('add') einde) einde

Stap 8: Spelluisteraars

Deze code voegt tikluisteraars toe aan de spelachtergrond en deze worden gebruikt om de selectieregel te tekenen en de geselecteerde letters te identificeren.

 functie gameListeners (actie) if (actie == 'add') en gameBg: addEventListener ('touch', startDraw) gameBg: addEventListener ('touch', detectLetters) else gameBg: removeEventListener ('touch', startDraw) gameBg: removeEventListener ( 'touch', detectLetters) end end

Stap 9: Bouw de soepfunctie

Een van de belangrijkste functies van het spel; dit zal door de kaartentabel bladeren om alle tekstvelden te creëren en ze in de fase te plaatsen, ga verder met de volgende stap om het gedrag ervan te zien.

 function buildSoup () - Code ... einde

Stap 10: Creëer Karakter TextFields

Een double voor wordt gebruikt om de elementen in de tabel Kaart te identificeren, één voor de horizontale waarden en één voor de verticale. De code maakt een tekstveld voor elke waarde in de tabel en plaatst deze vervolgens in het werkgebied.

 voor i = 1, 10 doen voor j = 1, 12 doen lokale tf = display.newText (", 0, 0, 'Arial', 19) tf: setTextColor (102, 102, 102) tf.width = 22 tf. hoogte = 21 tf.x = math.floor (-10 + (31.3 * i)) tf.y = math.floor (-10 + (35 * j))

Stap 11: Toon willekeurige letters

De gekozen woorden staan ​​al in de tabel en de rest van de waarden worden op dit moment door 0's gevuld. De volgende regels veranderen die 0's in een willekeurige letter.

 -- Verander nullen in willekeurige letters als (L1Map [j] [i] == 0) dan L1Map [j] [i] = alfabet [math.floor (math.random () * table.maxn (alphabet)) + 1] end tf.text = L1Map [j] [i] tfs: insert (tf) end end

Stap 12: Woordenlijst toevoegen

Deze code maakt twee tekstvelden die de zoeklijst bevatten en de waarden die al zijn gevonden.

 -- Woordenlijst lokale woorden toevoegenString = "voor i = 1, # L1 do wordsString = wordsString ..." ... L1 [i] einde wordsList = display.newText (wordsString, 5, 430, 'Arial', 14) wordsList: setTextColor (238, 238, 238) currentWords = display.newText (", 5, 455, 'Arial', 14) currentWords: setTextColor (238, 146, 63)

Stap 13: Teken de selectielijn

Een semi-transparante lijn wordt gebruikt om de letters in de fase te markeren, in de volgende functie die deze regel is gemaakt en toegevoegd aan de fase.

 functie startDraw: raak (e) aan als (e.phase == 'started') then initX = ex initY = ey elseif (e.phase == 'ended') then line = display.newLine (initX, initY, ex, ey ) line.width = 16 regel: setColor (255, 142, 42, 60) lijnen: invoegen (lijn) einde einde

Stap 14: Code Review

Hier is de volledige code die in deze zelfstudie is geschreven, naast opmerkingen om u te helpen bij het identificeren van elk onderdeel:

 -- Alphabet Soup Game - Ontwikkeld door Carlos Yanez - Hide Status Bar display.setStatusBar (display.HiddenStatusBar) - Graphics - [Achtergrond] - [Game Background] local gameBg = display.newImage ('bg.png') - - [Titeloverzicht] lokale titelBg lokale titel lokale startBtn lokaal overBtn - [TitelView Groep] lokale titelView - [CreditsView] local about - [Woordenlijst Textfield] lokale woordenList local currentWords - [Letter Texfields Container] local tfs = display .newGroup () - [Selectielijn] lokale regel lokale regels = display.newGroup () - [Alert] lokale waarschuwing - [Geluid] lokale bel = audio.loadStream ('bell.caf') - Variabele lokale L1 = 'IPHONE', 'ANDROID', 'CORONA', 'MOBILE', 'GAMES' local L1Map = 0, 0, 'I', 0, 0, 0, 'G', 0, 0, 0 , 0, 0, 'P', 0, 0, 0, 'A', 0, 0, 0, 0, 0, 'H', 0, 0, 0, 'M', 0, 0 , 0, 0, 'M', 'O', 'B', 'I', 'L', 'E', 0, 0, 0, 0, 0, 'N', 0, 0 , 0, 'S', 0, 0, 0, 0, 0, 'E', 0, 0, 0, 0, 0, 0, 0, 'C', 'O', 'R' , 'O', 'N', 'A', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 'A', 'N', 'D', 'R', 'O', 'I', 'D', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 lokaal alfabet = 'A', 'B', 'C', D, E, F, G, H, I, J, K, L, M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ',' Y ' , 'Z' local correct = 0 - Functies lokaal Main =  local addTitleView =  local startBtnuttonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local buildSoup =  local startDraw =  local hitTestObjects =  local detectLetters =  local alert =  functie Main () addTitleView () eindfunctie addTitleView () titleBg = display.newImage ('titleBg.png') title = display. newImage ('title.png') title.x = display.contentCenterX title.y = 120 startBtn = display.newImage ('startBtn.png') startBtn.x = display.contentCenterX startBtn.y = display.contentCenterY + 20 - startBtn.name = 'startBtn' aboutBtn = display.newImage ('aboutBtn.png') aboutBtn.x = display.conte ntCenterX aboutBtn.y = display.contentCenterY + 65 --aboutBtn.name = 'aboutBtn' titleView = display.newGroup () titleView: insert (titleBg) titleView: insert (title) titleView: insert (startBtn) titleView: insert (aboutBtn) startButtonListeners ('add') eindfunctie startButtonListeners (actie) if (action == 'add') then aboutBtn: addEventListener ('tap', showCredits) startBtn: addEventListener ('tap', showGameView) else aboutBtn: removeEventListener ('tik op' , showCredits) startBtn: removeEventListener ('tap', showGameView) end end function showCredits: tap () aboutBtn.isVisible = false startBtn.isVisible = false about = display.newImage ('about.png') about.x = about.width * 0.474 about.y = display.contentHeight + about.height transition.to (about, time = 300, y = display.contentHeight - about.height / 2.4, onComplete = function () about: addEventListener ('tap', hideCredits ) einde) einde functie hideCredits () transition.to (about, time = 300, y = display.contentHeight + about.height, onComplete = function () aboutBtn.is Zichtbaar = true startBtn.isVisible = true over: removeEventListener ('tap', hideCredits) display.remove (about) about = nil end) einde functie showGameView: tik op () transition.to (titleView, time = 300, y = -titleView.height, onComplete = function () display.remove (titleView) titleView = nil buildSoup () gameListeners ('add') einde) einde functie gameListeners (actie) if (actie == 'add') en gameBg: addEventListener ('touch', startDraw) gameBg: addEventListener ('touch', detectLetters) else gameBg: removeEventListener ('touch', startDraw) gameBg: removeEventListener ('touch', detectLetters) eindsysteem buildSoup () voor i = 1, 10 doen voor j = 1, 12 do local tf = display.newText (", 0, 0, 'Arial', 19) tf: setTextColor (102, 102, 102) tf.width = 22 tf.height = 21 tf.x = math.floor (-10 + (31.3 * i)) tf.y = math.floor (-10 + (35 * j)) - Verander 0's in willekeurige letters als (L1Map [j] [i] == 0 ) L1Map [j] [i] = alfabet [math.floor (math.random () * table.maxn (alphabet)) + 1] end tf.text = L1Map [j] [i] tfs: insert (tf) einde einde - Woordenlijst lokale woorden toevoegenString = "voor i = 1, # L1 do wordsString = wordsString ..." ... L1 [i] einde wordsList = display.newText (wordsString, 5, 430, 'Arial', 14) wordsList: setTextColor (238, 238, 238) currentWords = display.newText (", 5, 455, 'Arial', 14) currentWords: setTextColor (238, 146, 63) eindfunctie startDraw: touch (e) if (e.phase == 'begon') then initX = ex initY = ey elseif (e.phase == 'ended') then line = display.newLine (initX, initY, ex, ey) line.width = 16 line: setColor (255, 142, 42, 60) regels: einde invoegen (lijn)

De volgende keer…

In het volgende en laatste deel van de serie behandelen we de letteridentificatie, geven we de reeds gevonden woorden weer, en de laatste stappen die moeten worden genomen voorafgaand aan de release, zoals app-testen, een startscherm maken, een pictogram toevoegen en ten slotte bouwen de app. Blijf op de hoogte voor het laatste deel!