Corona SDK Crea un gioco di zuppa d'alfabeto - Interazione

Questa è la seconda puntata del nostro tutorial Corona SDK Alphabet Soup Game. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia e inizieremo a codificare l'interazione del gioco. Continuare a leggere!


Passaggio 1: dichiarare funzioni

Dichiara tutte le funzioni come Locale all'inizio.

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

Passaggio 2: costruttore

Successivamente creeremo la funzione che inizializzerà tutta la logica di gioco:

 funzione Main () addTitleView () end

Passaggio 3: Aggiungi vista titolo

Ora posizioniamo il TitleView nello stage e chiamiamo una funzione che aggiungerà il rubinetto ascoltatori ai pulsanti.

 function 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

Passaggio 4: avviare i pulsanti di ascolto

Questa funzione aggiunge gli ascoltatori necessari al TitleView pulsanti.

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

Passaggio 5: Mostra crediti

La schermata dei crediti viene visualizzata quando l'utente tocca il pulsante about, a rubinetto l'ascoltatore viene aggiunto alla vista dei crediti per rimuoverlo.

 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. a (circa, time = 300, y = display.contentHeight - about.height / 2.4, onComplete = function () about: addEventListener ('tap', hideCredits) end) end

Passaggio 6: Nascondi crediti

Quando viene toccato lo schermo dei crediti, verrà rimosso dal palco e rimosso.

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

Passaggio 7: Mostra vista gioco

Quando il Inizio Tocca il pulsante, la vista del titolo viene interpolata e rimossa rivelando la vista di gioco.

 function showGameView: tap () transition.to (titleView, time = 300, y = -titleView.height, onComplete = function () display.remove (titleView) titleView = nil buildSoup () gameListeners ('add') end) fine

Passaggio 8: ascoltatori di giochi

Questo codice aggiunge tap listen allo sfondo del gioco e questi verranno utilizzati per tracciare la linea di selezione e identificare le lettere selezionate.

 function gameListeners (action) if (action == 'add') then gameBg: addEventListener ('touch', startDraw) gameBg: addEventListener ('touch', detectLetters) else gameBg: removeEventListener ('touch', startDraw) gameBg: removeEventListener ( 'touch', detectLetters) end end

Passaggio 9: Crea la funzione zuppa

Una delle principali funzioni del gioco; questo sfoglia la tabella Mappa per creare tutti i campi di testo e posizionarli nello stage, continuare con il passaggio successivo per vedere il suo comportamento.

 function buildSoup () - Code ... end

Passaggio 10: creare campi di testo caratteri

Una doppia per viene utilizzata per identificare gli elementi nella tabella Mappa, uno per i valori orizzontali e uno per la verticale. Il codice creerà un campo di testo per ogni valore trovato nella tabella e quindi li posizionerà nello stage.

 per i = 1, 10 do per 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))

Passaggio 11: Visualizza lettere casuali

Le parole scelte sono già nella tabella e il resto dei valori viene riempito da 0 al momento. Le seguenti righe cambiano quegli 0 in una lettera casuale.

 -- Cambia 0 in Lettere casuali se (L1Map [j] [i] == 0) poi L1Map [j] [i] = alfabeto [math.floor (math.random () * table.maxn (alfabeto)) + 1] fine tf.text = L1Map [j] [i] tfs: insert (tf) end end

Passaggio 12: Aggiungi elenco parole

Questo codice crea due campi di testo che conterranno l'elenco di valori da trovare e i valori già trovati.

 -- Aggiungi parole Elenca local wordsString = "per i = 1, # L1 do wordsString = wordsString ..." ... L1 [i] end 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)

Passaggio 13: traccia la linea di selezione

Una linea semitrasparente verrà utilizzata per evidenziare le lettere nello stage, nella funzione successiva questa linea viene creata e aggiunta allo stage.

 function startDraw: touch (e) if (e.phase == 'started') 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) linee: insert (linea) end end

Passaggio 14: revisione del codice

Ecco il codice completo scritto in questo tutorial insieme ai commenti per aiutarti a identificare ogni parte:

 -- Alfabeto Soup Game - Sviluppato da Carlos Yanez - Nascondi barra di stato display.setStatusBar (display.HiddenStatusBar) - Grafica - [Sfondo] - [Sfondo del gioco] gioco localeBg = display.newImage ('bg.png') - - [Titolo vista] titolo locale Bg titolo locale locale startBtn locale aboutBtn - [TitleView Group] local titleView - [CreditsView] local about - [Words Textfield text] local wordsList local currentWords - [Letter Texfields Container] local tfs = display .newGroup () - [Selection Line] local line local lines = display.newGroup () - [Alert] alert locale - [Sound] local bell = audio.loadStream ('bell.caf') - Variabili locali L1 = 'IPHONE', 'ANDROID', 'CORONA', 'MOBILE', 'GAMES' L1Map locale = 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 alfabeto locale = '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 - Funzioni locali Main =  local addTitleView =  local StartBtnuttonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local buildSoup =  local startDraw =  local hitTestObjects =  local detectLetters =  local alert =  function Main () addTitleView () end function 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') end function startButtonListeners (action) if (action == 'add') then aboutBtn: addEventListener ('tap', showCredits) startBtn: addEventListener ('tap', showGameView) else aboutBtn: removeEventListener ('tap') , 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 ) end) end function hideCredits () transition.to (about, time = 300, y = display.contentHeight + about.height, onComplete = function () aboutBtn.is Visible = true startBtn.isVisible = true about: removeEventListener ('tap', hideCredits) display.remove (about) about = nil end) end function showGameView: tap () transition.to (titleView, time = 300, y = -titleView.height, onComplete = function () display.remove (titleView) titleView = nil buildSoup () gameListeners ('add') end) end function gameListeners (action) if (action == 'add') then gameBg: addEventListener ('tocco', startDraw) gameBg: addEventListener ('touch', detectLetters) else gameBg: removeEventListener ('touch', startDraw) gameBg: removeEventListener ('touch', detectLetters) end end function buildSoup () per i = 1, 10 do per 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)) - Cambia 0 in lettere casuali se (L1Map [j] [i] == 0 ) poi L1Map [j] [i] = alfabeto [math.floor (math.random () * table.maxn (alfabeto)) + 1] end tf.text = L1Map [j] [i] tfs: insert (tf) fine end - Aggiungi parole List local wordsString = "per i = 1, # L1 do wordsString = wordsString ..." ... L1 [i] end 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) end function startDraw: touch (e) if (e.phase == 'iniziato') quindi 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) linee: inserire (linea) fine

La prossima volta…

Nella parte successiva e finale della serie, gestiremo l'identificazione della lettera, mostreremo le parole già trovate e i passaggi finali da eseguire prima del rilascio, come test delle app, creazione di una schermata iniziale, aggiunta di un'icona e, infine, creazione l'applicazione. Restate sintonizzati per la parte finale!