Esta es la segunda entrega de nuestro tutorial de Corona SDK Alphabet Soup Game. En el tutorial de hoy, agregaremos a nuestra interfaz y comenzaremos a codificar la interacción del juego. Sigue leyendo!
Declara todas las funciones como local al principio.
local principal = local addTitleView = local startBtnuttonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local buildSoup = local startDraw = local hitTestObjects = local detectLetters = local alert =
A continuación, crearemos la función que inicializará toda la lógica del juego:
función Main () addTitleView () end
Ahora colocamos el TitleView en el escenario y llamamos a una función que agregará el grifo oyentes a los botones.
función 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 end
Esta función agrega los oyentes necesarios a la TitleView botones.
function startButtonListeners (acción) if (acción == 'agregar') luego aboutBtn: addEventListener ('tap', showCredits) startBtn: addEventListener ('tap', showGameView) else aboutBtn: removeEventListener ('tap', showCredits) startBtn: removeEventListener 'tap', showGameView) end end end
La pantalla de créditos se muestra cuando el usuario toca el botón Acerca de, un grifo El oyente se agrega a la vista de créditos para eliminarlo..
función showCredits: tap () aboutBtn.isVisible = false startBtn.isVisible = false about = display.newImage ('about.png') about.x = about.width * 0.474 about.y = display.contentHeight + about.heightición. to (about, time = 300, y = display.contentHeight - about.height / 2.4, onComplete = function () about: addEventListener ('tap', hideCredits) end) fin
Cuando se toca la pantalla de créditos, se interpone fuera del escenario y se elimina.
function hideCredits () transition.to (about, time = 300, y = display.contentHeight + about.height, onComplete = function () aboutBtn.isVisible = true startBtn.isVisible = true acerca de: removeEventListener ('tap', hideCredits) display.remove (about) about = nil end) end
Cuando el comienzo se pulsa el botón, la vista de título se interpola y se elimina, lo que revela la vista del juego.
función showGameView: toque () transition.to (titleView, time = 300, y = -titleView.height, onComplete = function () display.remove (titleView) titleView = nil buildSoup () gameListeners ('add') end) fin
Este código agrega escuchas de tap al fondo del juego, y se usarán para dibujar la línea de selección e identificar las letras seleccionadas.
function gameListeners (acción) if (action == 'add') entonces gameBg: addEventListener ('touch', startDraw) gameBg: addEventListener ('touch', detectLetters) else gameBg: removeEventListener ('touch', startDraw) gameBg: removeEventListener ( 'touch', detectLetters) end end end
Una de las principales funciones del juego; esto explorará la tabla de mapas para crear todos los campos de texto y colocarlos en el escenario, continúe con el siguiente paso para ver su comportamiento.
función buildSoup () - Código ... fin
Se utiliza un doble para identificar los elementos en la tabla Mapa, uno para los valores horizontales y otro para la vertical. El código creará un campo de texto para cada valor encontrado en la tabla y luego los colocará en el escenario.
para i = 1, 10 do para j = 1, 12 do local tf = display.newText (", 0, 0, 'Arial', 19) tf: setTextColor (102, 102, 102) tf.width = 22 tf. altura = 21 tf.x = math.floor (-10 + (31.3 * i)) tf.y = math.floor (-10 + (35 * j))
Las palabras elegidas ya están en la tabla, y el resto de los valores se llenan con 0 en este momento. Las siguientes líneas cambian esos 0 a una letra aleatoria.
-- Cambie 0's a letras aleatorias si (L1Map [j] [i] == 0) luego L1Map [j] [i] = alfabeto [math.floor (math.random () * table.maxn (alphabet)) + 1] final tf.text = L1Map [j] [i] tfs: insert (tf) end end end
Este código crea dos campos de texto que contendrán la lista de valores a buscar y los valores ya encontrados.
-- Agregar Lista de palabras local wordsString = "for 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)
Se utilizará una línea semitransparente para resaltar las letras en el escenario. En la siguiente función, esta línea se crea y se agrega al escenario..
función startDraw: toque (e) si (e.phase == 'comenzó') luego initX = ex initY = ey elseif (e.phase == 'end') luego line = display.newLine (initX, initY, ex, ey ) line.width = 16 line: setColor (255, 142, 42, 60) lines: insert (line) end end end
Aquí está el código completo escrito en este tutorial junto con los comentarios para ayudarlo a identificar cada parte:
-- Juego de sopa de letras - Desarrollado por Carlos Yanez - Ocultar barra de estado display.setStatusBar (display.HiddenStatusBar) - Gráficos - [Fondo] - [Fondo del juego] local gameBg = display.newImage ('bg.png') - - [Vista de título] título localBg título local local startBtn acerca deBtn - [Grupo de vista de título] título localVista - [Vista de credito] local sobre - [Campo de texto de la lista de palabras] palabras locales localWords actual - [Contenedor de letra Texfields] local tfs = mostrar .newGroup () - [Línea de selección] líneas locales líneas locales = display.newGroup () - [Alerta] alerta local - [Sonido] campana local = audio.loadStream ('bell.caf') - Variables locales 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, '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 local = '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 correcto = 0 - Funciones locales Principal = local addTitleView = local startBtnuttonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local buildSoup = local startDraw = local hitTestObjects = local detectLetters = local alert = función 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') finaliza la función startButtonListeners (acción) if (action == 'add') entonces aboutBtn: addEventListener ('tap', showCredits) startBtn: addEventListener ('tap', showGameView) elseBree: removeEventListener ('tap' , showCredits) startBtn: removeEventListener ('tap', showGameView) end 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 acerca de: 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') luego gameBg: addEventListener ('touch', startDraw) gameBg: addEventListener ('touch', detectLetters) else gameBg: removeEventListener ('touch', startDraw) gameBg: removeEventListener ('touch', detectLetters) end end final function buildSoup () para i = 1, 10 do para 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)) - Cambiar de 0 a letras aleatorias si (L1Map [j] [i] == 0 ) luego L1Map [j] [i] = alfabeto [math.floor (math.random () * table.maxn (alfabeto)) + 1] end tf.text = L1Map [j] [i] tfs: insert (tf) final end - Agregar lista de palabras local wordsString = "for 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: toque (e) si (e.phase == 'comenzó') luego initX = ex initY = ey elseif (e.phase == 'finalizó') luego line = display.newLine (initX, initY, ex, ey) line.width = 16 line: setColor (255, 142, 42, 60) líneas: insertar (línea) extremo extremo
En la siguiente y última parte de la serie, manejaremos la identificación de la letra, mostraremos las palabras ya encontradas y los pasos finales que se deben seguir antes de lanzar la prueba como la aplicación, crear una pantalla de inicio, agregar un icono y, finalmente, crear la aplicación. Estén atentos para la parte final!