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!
Assicurati di controllare parte 1 della serie per comprendere e preparare pienamente questo tutorial.
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
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
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
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)
Questo codice posiziona lo sfondo del gioco sul palco.
-- [Aggiungi GFX] - Gioco Bg gameBg = display.newImage ('gameBg.png')
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'
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)
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 ()
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
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
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
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
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 =
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
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
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
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])
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)
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)
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
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
Per iniziare il gioco, il Principale la funzione deve essere chiamata. Con il codice sopra riportato, lo faremo qui:
Principale()
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.
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.
È 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!
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!
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!