Costruisci un gioco Snake - Aggiunta di interazione

In questa serie di tutorial, imparerai come creare un gioco come Snake. L'obiettivo del gioco è quello di afferrare le mele sullo schermo per aumentare il punteggio. Continuare a leggere!


Da dove siamo partiti ...

Assicurati di controllare parte 1 della serie per comprendere e preparare pienamente questo tutorial.


Passaggio 1: avviare i pulsanti di ascolto

Questa funzione aggiunge gli ascoltatori necessari al TitleView pulsanti.

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

Passaggio 2: 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 (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) end

Passaggio 3: Nascondi crediti

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

 function hideCredits: tap (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

Passaggio 4: Mostra vista gioco

Quando il Inizio Tocca il pulsante, la vista del titolo viene interpolata e rimossa rivelando la vista di gioco. Ci sono molte parti coinvolte in questa visualizzazione, quindi le suddivideremo nei passaggi successivi.

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

Passaggio 5: aggiungere lo sfondo del gioco

Questo codice posiziona lo sfondo del gioco sul palco.

 -- [Aggiungi GFX] - Gioco Bg gameBg = display.newImage ('gameBg.png')

Passaggio 6: aggiungere il Game Pad

Per spostare il serpente sullo schermo avremo bisogno di un game pad, questo si prenderà cura di questo. UN rubinetto l'ascoltatore verrà aggiunto in seguito a ciascuna freccia per gestire il movimento.

 -- Pad up = 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'

Passaggio 7: testo del punteggio

Questa riga aggiunge il campo di testo del punteggio:

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

Passaggio 8: testa

Quindi aggiungiamo la testa del serpente. Come menzionato nel tutorial precedente, a colpire l'area verrà aggiunto sopra di esso e quindi entrambi saranno memorizzati in un gruppo.

 -- 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 ()

Passaggio 9: Apple iniziale

La prima mela viene aggiunta da questo codice in una posizione casuale.

 -- Aggiungi la prima mela locale 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 () end

Passaggio 10: ascoltatori di giochi

Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.

 function gameListeners () su: addEventListener ('tap', movePlayer) a sinistra: addEventListener ('tap', movePlayer) down: addEventListener ('tap', movePlayer) right: addEventListener ('tap', movePlayer) end

Passaggio 11: sposta la funzione del giocatore

La variabile di direzione è cambiata da questa funzione, questo farà andare il serpente nella direzione premuta.

 function movePlayer (e) dir = e.target.name if (avviato == nil) quindi timerSrc = timer.performWithDelay (velocità, aggiornamento, 0) iniziato = vero fine fine

Passaggio 12: Hit oggetti di prova

Useremo una funzione eccellente e utile per il rilevamento delle collisioni senza fisica, puoi trovare l'esempio e la fonte originali sul sito Web di scambio di codici CoronaLabs.

 function hitTestObjects (obj1, obj2) local left = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin right locale = obj1.contentBounds.xMin> = obj2.contentBounds.xMin e 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 e obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end

Passaggio 13: ottenere la testa ultima posizione

Catturiamo l'ultima posizione della testa del serpente per aggiornare la posizione delle parti, ognuna delle quali sostituisce le coordinate xey dell'altro.

 function update () - Capture testa ultima posizione, questo sposta il primo pezzo aggiunto local lastX = head.x local lastY = head.y local xPos =  local yPos = 

Passaggio 14: Sposta parti

Questo integra il comportamento spiegato nel passaggio precedente.

 per i = 1, parts.numChildren do - Cattura la posizione delle parti per spostarle xPos [i] = parti [i] .x yPos [i] = parti [i] .y - Sposta parti if (parti [i-1 ] == nil) quindi parti [i] .x = lastX parti [i] .y = lastY altre parti [i] .x = xPos [i-1] parti [i] .y = yPos [i-1] fine

Step 15: Verifica Game Over

Il gioco termina quando la testa del serpente tocca un'altra parte del serpente. Un suono viene riprodotto come feedback.

 -- Game over se la testa tocca l'altra parte di snake if (hitTestObjects (headHitArea, parts [i])) quindi stampa (parts [i] .name) if (parts [i] .name == '1') quindi stampa ('one ') else timer.cancel (timerSrc) timerSrc = nil audio.play (gameOver) end end

Step 16: Muovi la testa

Queste linee muovono la testa secondo la direzione stabilita dal moveplayer funzione creata nel passaggio 11.

 -- Muovi Head & Hit Area se (dir == 'up') poi head.y = head.y - mConst headHitArea.x = headGFX.x headHitArea.y = headGFX.y - 7 elseif (dir == 'left') quindi head.x = head.x - mConst headHitArea.x = headGFX.x - 8 headHitArea.y = headGFX.y elseif (dir == 'down') quindi head.y = head.y + mConst headHitArea.x = headGFX. x headHitArea.y = headGFX.y + 8 elseif (dir == 'right') quindi head.x = head.x + mConst headHitArea.x = headGFX.x + 7 headHitArea.y = headGFX.y end

Passaggio 17: collisione testa di mela

Diverse azioni si verificano quando il serpente mangia una mela che le attraverseremo nei seguenti passaggi.

Per prima cosa togliamo la mela.

 -- Rileva la collisione di apple-player per i = 1, apples.numChildren do if (hitTestObjects (head, apples [i])) quindi - Rimuovi Apple display.remove (mele [i])

Passaggio 18: Punteggio di aggiornamento

Successivamente aggiorniamo il campo di testo del punteggio e riproduciamo un suono per indicare che la mela è stata mangiata.

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

Passo 19: aggiungi la parte del serpente

Quindi una nuova parte viene aggiunta al serpente. La sua posizione viene calcolata dall'ultima parte aggiunta (la prima volta è la testa) e quindi vengono aggiunti a un gruppo.

 -- Aggiungi snake body local part = display.newImage ('bodyPart.png') if (dir == 'up') then part.x = lastPart.x part.y = lastPart.y + mConst elseif (dir == 'left' ) quindi part.x = lastPart.x + mConst part.y = lastPart.y elseif (dir == 'down') quindi part.x = lastPart.x part.y = lastPart.y - mConst elseif (dir == ' right ') then part.x = lastPart.x - mConst part.y = lastPart.y end current = current + 1 part.name = tostring (current) lastPart = parti di parti: insert (part)

Passaggio 20: nuova mela

Infine, creiamo una nuova mela e la posizioniamo in una posizione casuale sul palco.

 -- Aggiungi nuova mela locale 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) end end

Passo 21: Limiti dello schermo

Questo fa apparire il serpente dall'altra parte del palco.

 -- Limiti dello schermo se (head.x < 0) then head.x = display.contentWidth - mConst elseif(head.x > display.contentWidth) then head.x = 0 end - Vertical if (head.y < 0) then head.y = display.contentHeight - mConst elseif(head.y > display.contentHeight) then head.y = 0 end end

Passaggio 22: chiama la funzione principale

Per iniziare il gioco, il Principale la funzione deve essere chiamata. Con il codice sopra riportato, lo faremo qui:

 Principale()

Passo 23: schermata di caricamento

Il file Default.png è un'immagine che verrà visualizzata quando si avvia l'applicazione mentre iOS carica i dati di base per mostrare la schermata principale. Aggiungi questa immagine alla cartella sorgente del progetto, verrà automaticamente aggiunta dal complino Corona.


Passaggio 24: icona

Usando la grafica che hai creato prima ora puoi creare un'icona carina e di bell'aspetto. La dimensione dell'icona per l'icona dell'iPhone non retina è 57x57px, ma la versione retina è 114x114px e lo store iTunes richiede una versione 512x512px. Suggerisco di creare prima la versione 512x512 e poi ridimensionarla per le altre dimensioni.

Non è necessario avere gli angoli arrotondati o il bagliore trasparente, iTunes e l'iPhone lo faranno per te.


Passaggio 25: test in simulatore

È tempo di fare il test finale. Apri il simulatore Corona, vai alla cartella del progetto, quindi fai clic su apri. Se tutto funziona come previsto, sei pronto per il passaggio finale!


Passaggio 26: Build

Nel Corona Simulator vai a File> Crea e seleziona il tuo dispositivo di destinazione. Compila i dati richiesti e clicca costruire. Attendi qualche secondo e la tua app sarà pronta per il test del dispositivo e / o l'invio per la distribuzione!


Conclusione

Sperimenta il risultato finale e prova a creare la tua versione personalizzata del gioco!

Spero ti sia piaciuta questa serie di tutorial e la trovi utile. Grazie per aver letto!