Corona SDK Crea un juego de sopa de letras - Interacción

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!


Paso 1: Declarar funciones

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 = 

Paso 2: Constructor

A continuación, crearemos la función que inicializará toda la lógica del juego:

 función Main () addTitleView () end

Paso 3: Añadir vista de título

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

Paso 4: Iniciar los oyentes del botón

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

Paso 5: Mostrar créditos

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

Paso 6: Ocultar Créditos

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

Paso 7: Mostrar vista del juego

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

Paso 8: Oyentes del juego

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

Paso 9: Construir la función de sopa

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

Paso 10: Crear campos de texto de caracteres

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

Paso 11: Mostrar letras aleatorias

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

Paso 12: Añadir lista de palabras

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)

Paso 13: Dibujar línea de selección

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

Paso 14: Revisión de Código

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

La próxima vez…

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!