Share
Bienvenido al segundo post de nuestra serie de juegos tipo Corona SDK Frenzic. En el tutorial de hoy, agregaremos interactividad a nuestra interfaz y codificaremos el inicio del juego.
Por favor, asegúrese de revisar la parte 1 de la serie para comprender completamente este tutorial..
Declara todas las funciones como local al principio.
local principal = local addTitleView = local startButtonListeners = local showCredits = local hideCredits = local destroyCredits = local showGameView = local destroyTitleView = local addListeners = localBlock = local timesUp = local placeBlock = local blockPlaced = local complete = local removeBlocks = local alert = local alertHandler = local restart =
A continuación, crearemos la función que inicializará toda la lógica del juego:
función Main () addTitleView () end
Ahora colocamos el fondo y titleView en el escenario..
Accentsconagua
función 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') end En esta función, agregamos los escuchas de tap a los botones en la vista de título, esto nos llevará a la pantalla del juego o la pantalla de créditos..
función startButtonListeners (acción) if (acción == 'agregar') luego creditsB: addEventListener ('tap', showCredits) startB: addEventListener ('tap', showGameView) else creditsB: removeEventListener ('tap', showCredits) startB: removeEventListener ( 'tap', showGameView) end end end La pantalla de créditos se muestra cuando el usuario pulsa el botón de créditos, se agrega un detector de tap a la vista de créditos para eliminarlo..
función showCredits () credits = display.newImage ('credits.png') transition.from (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo) créditos: addEventListener ('tap', hideCredits) titleView.isVisible = final falso Cuando se toca la pantalla de créditos, se interpone fuera del escenario y se elimina.
function hideCredits () titleView.isVisible = true transition.to (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo, onComplete = destroyCredits) end function destroyCredits () créditos: removeEventListener ('tap ', hideCredits) display.remove (credits) credits = nil end Cuando el comienzo se presiona el botón, la vista del título se interpola y se elimina, revelando la vista del juego.
función showGameView (e) transition.to (titleView, time = 300, y = -titleView.height, transition = easing.inExpo, onComplete = destroyTitleView) end
La vista del título se elimina de la memoria y los gráficos del juego se agregan al escenario..
function destroyTitleView () display.remove (titleView) titleView = nil - Agregar gráficos de GameView up = display.newImage ('container.png') up: setReferencePoint (display.TopLeftReferencePoint) up.x = 125 up.y = 100 right = display.newImage ('container.png') derecha: 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') left: setReferencePoint (display.TopLeftReferencePoint) left.x = 20 left.y = 205 holder = display.newImage ('container.png') titular: setReferencePoint (display.TopLeftReferencePoint) holder.x = 125 holder.y = 205 - Lives & Score Text 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) scor eText: setTextColor (163, 255, 36) scoreTF = display.newText ('0', 274, 30, 'Orbitron-Medium', 12) scoreTF: setTextColor (163, 255, 36) gameView = display.newGroup () gameView : inserte (arriba) gameView: inserte (derecha) gameView: inserte (abajo) gameView: inserte (izquierda) gameView: inserte (titular) gameView: inserte (livesText) gameView: inserte (livesTF) gameView: inserte (scoreText) gameView: inserte (scoreTF) addListeners () end Esta función agregará un escucha de tap a los contenedores cuadrados para que pueda tocarlos y colocar el bloque actual en el contenedor central (titular).
function addListeners () up: addEventListener ('tap', placeBlock) right: addEventListener ('tap', placeBlock) down: addEventListener ('tap', placeBlock) left: addEventListener ('tap', placeBlock) lives = 5 score = 0 Estas variables se crean dentro de los contenedores cuadrados, se usan para registrar los bloques, colores y posiciones dentro de cada cuadrado.
Las letras representan las siguientes posiciones:
-- Cree una var para cada contenedor para determinar cuándo está lleno up.blocks = 0 right.blocks = 0 down.blocks = 0 left.blocks = 0 - Arreglos utilizados para eliminar bloques y detectar color up.blocksGFX = right.blocksGFX = down.blocksGFX = left.blocksGFX = - Crea un booleano para cada contenedor para evitar colocar bloques en la misma posición 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: asigne un nombre a los contenedores para identificarlos más adelante. up.name = 'up' right.name = 'right' down.name = 'down' left.name = 'left' newBlock (true) end
Este código elige un color de bloque aleatorio de la tabla, que se utilizará para instanciar el bloque real. Se utiliza un parámetro para determinar si es necesario iniciar el temporizador.
function newBlock (firstTime) - New Block local randomBlock = math.floor (math.random () * 3) + 1 bloque local if (blockColor [randomBlock] == 'orange') luego block = display.newImage ('orangeBlock. png ') block.name =' orange 'block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] ==' green ') luego block = display.newImage (' greenBlock.png ') block.name =' green ' bloque: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'purple') luego block = display.newImage ('purpleBlock.png') block.name = 'purple' block: setReferencePoint (display.TopLeftReferencePoint) final Después de seleccionar el color del bloque, la posición donde se colocará se calculará utilizando la tabla de posiciones y luego se agregará a la tabla de bloques y al escenario..
currentXPosición = posiciones [math.floor (math.random () * 2) + 1] currentYPosition = posiciones [math.floor (math.random () * 2) + 1] block.x = holder.x + currentXPosition block.y = holder.y + currentYPosition table.insert (bloques, bloques) gameView: insert (bloque)
Antes de continuar con el juego, debemos verificar que el bloque creado recientemente se pueda colocar en un contenedor cuadrado. El siguiente código verifica cada matriz de contenedores para asegurarse de que haya una posición disponible para colocar el bloque. Si no, el bloque se destruye y la función se vuelve a llamar para generar otra..
posición local = currentXPosition, currentYPosition if (posición [1] == 5 y posición [2] == 5 y up.a == true y right.a == true y down.a == true y left.a == verdadero) luego mostrar.remover (bloquear) bloque = nil newBlock (falso) elseif (posición [1] == 35 y posición [2] == 5 y arriba.b == verdadero y correcto.b == verdadero y down.b == true y left.b == true) luego display.remove (block) block = nil newBlock (false) elseif (posición [1] == 5 y posición [2] == 35 and up.c = = true and right.c == true and down.c == true and left.c == true) luego display.remove (block) block = nil newBlock (false) elseif (posición [1] == 35 y posición [ 2] == 35 y up.d == true y right.d == true y down.d == true y left.d == true) luego display.remove (block) block = nil newBlock (false) end
El temporizador comienza a contar cuando se llama la función por primera vez..
if (firstTime) entonces - Start Timer timerSource = timer.performWithDelay (3000, timesUp, 0) end end end
Se dan tres segundos para colocar un bloque en un contenedor cuadrado, si ese tiempo pasa y el bloque aún está en el centro del cuadrado, se eliminará una vida..
función timesUp: timer (e) - Eliminar vidas vidas = vidas - 1 vidasTF.text = vidas media.playEventSound ('buzz.caf') Después de quitar la vida, el bloque en la plaza central se destruirá y se generará un nuevo bloque.
display.remove (blocks [#blocks]) table.remove (blocks)
Este código verifica si el jugador está fuera de vida y llama a una función que manejará eso.
si (vive) < 1) then alert() else -- Next Block newBlock(false) end end
Aquí está el código completo escrito en este tutorial junto con comentarios para ayudarlo a identificar cada parte:
-- Ordenar 'Frenzic' como juego - Desarrollado por Carlos Yanez - Ocultar barra de estado display.setStatusBar (display.HiddenStatusBar) - Gráficos - [Fondo] local bg - [Vista de título] título local local startB local creditsB - [ TitleView Group] local titleView - [Score & Lives] live livesText local livesTF local lives local scoreText local scoreTF local score - [GameView] local up local right local down local left local holder - [GameView Group] local gameView - - CreditsView] local credits - Variables local blockColor = 'orange', 'green', 'purple' local blocks = local position = 5, 35 local currentXPosicion actual localYPosición local localTarget local timerPuerto local local local score local bell local bell4 local buzz - Funciones local principal = 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 = 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') end function startButtonListeners (action) if (action == 'add') luego creditsB: addEventListener ('tap', showCredits) startB: addEventListener ('tap', showGameView) else creditsB: removeEventListener ('tap', showCredits) startB: removeEventListener ('tap', showGameView) end end end function showCredits () credits = display.newImage ('credits.png') transition.from (credits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo) créditos: addEventListener ( 'tap', hideCredits) titleView.isVisible = false end 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 = nil end function showGameView (e) transition.to (titleView, time = 300, y = -titleView.height, transición = easing.inExpo, onComplete = destroyTitleView) end function destroyTitleView () display.remove (titleView) titleView = nil - Agregar gráficos de GameView up = display.newImage ('container.png') up: setReferencePoint (display.TopLeftReferencePoint) up .x = 125 up.y = 100 right = 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 ') izquierda: setReferencePoint (display.TopLeftReferencePoint) left.x = 20 left.y = 205 holder = display.newImage (' container.png ') titular: setReferencePoint (display.TopLeftReferencePoint) holder.x = 125 holder.y = 205 - Vidas y texto de puntuación 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) scoreText: 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 (derecha) gameView: insert (down) gameView: insert (left) gameView: insert (holder) gameView: insert (livesText) game Ver: insertar (livesTF) gameView: insertar (scoreText) gameView: insertar (scoreTF) addListeners () end end addListeners () up: addEventListener ('tap', placeBlock) derecha: addEventListener ('tap', placeBlock) down: addEventListener ( 'tap', placeBlock) left: addEventListener ('tap', placeBlock) lives = 5 score = 0 - Crea una var para cada contenedor para determinar cuándo está lleno up.blocks = 0 right.blocks = 0 down.blocks = 0 left .blocks = 0 - Arreglos utilizados para eliminar bloques y detectar color up.blocksGFX = right.blocksGFX = down.blocksGFX = left.blocksGFX = - Crea un booleano para cada contenedor para evitar colocar bloques en la misma posición 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 - Asigne un nombre a los contenedores para identificarlos más tarde up.name = 'up' right.name = 'right' down.name = 'down' left.name = 'left' newBlock (true) función final newBlock (firstTime) - New Block local randomBlock = math.floor (math.random () * 3) + 1 local block si (blockColor [randomBlock] == 'orange') luego block = display. newImage ('orangeBlock.png') block.name = 'orange' block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'green') luego block = display.newImage ('greenBlock.png') block. nombre = bloque 'verde': setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'purple') luego block = display.newImage ('purpleBlock.png') block.name = 'purple' block: setReferencePoint (display .TopLeftReferencePoint) final actualXPosición = posiciones [math.floor (math.random () * 2) + 1] currentYPosition = posiciones [math.floor (math.random () * 2) + 1] block.x = holder.x + currentXPosition block.y = holder.y + currentYPosition table.insert (bloquear, bloquear) gameView: insert (bloquear) - Verifica si hay un espacio disponible para mover la posición local del bloque = currentXPosition, currentYPosition if (pos ition [1] == 5 y posición [2] == 5 y up.a == true and right.a == true y down.a == true and left.a == true) luego display.remove (bloque ) block = nil newBlock (false) elseif (posición [1] == 35 y posición [2] == 5 y up.b == true y right.b == true y down.b == true y left.b == verdadero) luego mostrar.remover (bloquear) bloque = nil newBlock (falso) elseif (posición [1] == 5 y posición [2] == 35 y arriba.c == verdadero y correcto.c == verdadero y down.c == true y left.c == true) luego display.remove (block) block = nil newBlock (false) elseif (posición [1] == 35 y posición [2] == 35 y superior.d = = true y right.d == true y down.d == true y left.d == true) luego display.remove (block) block = nil newBlock (false) end - Start Timer la primera vez que se llama a la función if (firstTime) then - Start Timer timerSource = timer.performWithDelay (3000, timesUp, 0) end end end function timesUp: timer (e) - Eliminar Live lives = lives - 1 livesTF.text = lives media.playEventSound ('buzz .caf ') - Eliminar la pantalla de bloque no utilizado. remove (blocks [#blocks]) table.remove (blocks) - Verifica si está fuera de vida if (lives < 1) then --alert() else -- Next Block newBlock(false) end end En la siguiente y última parte de la serie, manejaremos el comportamiento de los bloques, las puntuaciones y los pasos finales que se deben seguir antes de lanzar la aplicación, como la prueba de la aplicación, crear una pantalla de inicio, agregar un icono y crear la aplicación. Estén atentos para la parte final!
