Share
Bienvenue dans le deuxième article de notre série de jeux Corona SDK Frenzic-like. Dans le tutoriel d'aujourd'hui, nous allons ajouter de l'interactivité à notre interface et coder le début du jeu..
Assurez-vous de vérifier la partie 1 de la série pour bien comprendre ce tutoriel..
Déclarer toutes les fonctions comme local au début.
local principal = local addTitleView = local startButtonListeners = showCredits local = local hideCredits = local destroyCredits = local showGameView = local destroyTitleView = local addListeners = local newBlock = heure localeUp = local placeBlock = local blockPlaced = local complet = local removeBlocks = local alert = local alertHandler = local restart =
Nous allons ensuite créer la fonction qui initialisera toute la logique du jeu:
fonction Main () addTitleView () end
Maintenant, nous plaçons le fond et titleView dans la scène.
Accentsconagua
fonction 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 Dans cette fonction, nous ajoutons les écouteurs tactiles aux boutons de la vue du titre, cela nous mènera à l'écran de jeu ou à l'écran de crédits.
function startButtonListeners (action) if (action == 'add'), puis creditsB: addEventListener ('tap', showCredits) startB: addEventListener ('tap', showGameView). autre creditsB: removeEventListener ('tap', showCredits) startB: removeBalvent 'tap', showGameView) end end L'écran de crédits s'affiche lorsque l'utilisateur appuie sur le bouton de crédits, un écouteur de toucher est ajouté à la vue de crédits pour le supprimer..
fonction showCredits () credits = display.newImage ('credits.png') transition.from (crédits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo) crédits: addEventListener ('tap', hideCredits) titleView.isVisible = false fin Lorsque l’écran des crédits est activé, il est interpolé en dehors de la scène et supprimé.
function hideCredits () titleView.isVisible = vrai transition.to (crédits, heure = 300, x = bg.contentWidth * 2, transition = easing.outExpo, onComplete = destroyCredits) fonction de fin destroyCredits () crédits: removeEventListener ('tap ', hideCredits) display.remove (crédits) crédits = nil fin Quand le Début le bouton est enfoncé, la vue du titre est interpolée et supprimée, révélant la vue du jeu.
fonction showGameView (e) transition.to (titleView, heure = 300, y = -titleView.height, transition = easing.inExpo, onComplete = destroyTitleView) fin
La vue du titre est supprimée de la mémoire et les graphiques du jeu sont ajoutés à la scène..
function destroyTitleView () display.remove (titleView) titleView = nil - Ajouter des graphiques 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 = afficher.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 titulaire = display.newImage ('conteneur.png') holder: setReferencePoint (display.TopLeftReferencePoint) holder.x = 125 holder.y = 205 - Lives & Score Texte 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) notes Texte: setTextColor (163, 255, 36) scoreTF = display.newText ('0', 274, 30, 'Orbitron-Medium', 12) scoreTF: setTextColor (163, 255, 36) gameView = display.newGroup () gameView : insert (haut) gameView: insert (droite) gameView: insert (bas) gameView: insert (gauche) gameView: insert (titulaire) gameView: insert (livesText) gameView: insert (livesTF) gameView: insert (scoreText) gameView: insert (scoreTF) addListeners () end Cette fonction ajoute un écouteur tactile aux conteneurs carrés afin que vous puissiez les toucher et placer le bloc actuel dans le conteneur central (titulaire)..
function addListeners () up: addEventListener ('tap', placeBlock) à droite: addEventListener ('tap', placeBlock) vers le bas: addEventListener ('tap', placeBlock) à gauche: addEventListener ('tap', placeBlock) lives = 5 score = 0 Ces variables sont créées dans les conteneurs carrés, elles servent à enregistrer les blocs, les couleurs et les positions à l'intérieur de chaque carré..
Les lettres représentent les positions suivantes:
-- Créez une var pour chaque conteneur afin de déterminer quand up.blocks = 0 right.blocks = 0 down.blocks = 0 left.blocks = 0 - Tableaux utilisés pour supprimer les blocs et détecter la couleur up.blocksGFX = right.blocksGFX = down.blocksGFX = left.blocksGFX = - Créez un booléen pour chaque conteneur afin d'éviter de placer des blocs dans la même position. up.a = false right.a = false down.a = false left.a = false up.b = faux right.b = faux down.b = faux left.b = faux up.c = faux right.c = faux down.c = faux left.c = faux up.d = faux droit.d = faux down.d = false left.d = false - Attribuez un nom aux conteneurs pour les identifier ultérieurement. up.name = 'up' right.name = 'right' down.name = 'down' left.name = 'left' newBlock (true) end
Ce code sélectionne une couleur de bloc aléatoire dans la table, elle sera utilisée pour instancier le bloc actuel. Un paramètre est utilisé pour déterminer si le minuteur doit être démarré.
function newBlock (firstTime) - Nouveau bloc local randomBlock = math.floor (math.random () * 3) + 1 bloc local if (blockColor [randomBlock] == 'orange') puis block = display.newImage ('orangeBlock. png ') block.name =' orange 'block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] ==' green ') puis block = display.newImage (' greenBlock.png ') block.name =' green ' block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'violet') puis block = display.newImage ('purpleBlock.png') block.name = 'violet' bloc: setReferencePoint (display.TopLeftReferencePoint) Après avoir sélectionné la couleur du bloc, la position où il sera placé sera calculée à l'aide du tableau des positions, puis ajoutée au tableau des blocs et à la scène..
currentXPosition = positions [math.floor (math.random () * 2) + 1] currentYPosition = positions [math.floor (math.random () * 2) + 1] block.x = titulaire.x + currentXPosition block.y = holder.y + currentYPosition table.insert (blocks, block) gameView: insert (block)
Avant de continuer le jeu, nous devons vérifier que le bloc nouvellement créé peut effectivement être placé dans un conteneur carré. Le code suivant vérifie chaque tableau de conteneurs pour s'assurer qu'il existe une position disponible pour placer le bloc. Sinon, le bloc est détruit et la fonction est appelée à nouveau pour en générer un autre..
position locale = currentXPosition, currentYPosition if (position [1] == 5 et position [2] == 5 et up.a == true et right.a == true et down.a == true et left.a == true) puis display.remove (block) block = nil newBlock (false) elseif (position [1] == 35 et position [2] == 5 et up.b == true et right.b == true et down.b == true et left.b == true) puis display.remove (block) block = nil newBlock (false) elseif (position [1] == 5 et position [2] == 35 et up.c = = true et right.c == true et down.c == true et left.c == true) puis display.remove (block) block = nil newBlock (false) elseif (position [1] == 35 et position [ 2] == 35 et up.d == true et right.d == true et down.d == true et left.d == true) puis display.remove (block) block = nil newBlock (false) end
La minuterie commence à compter lorsque la fonction est appelée pour la première fois..
if (firstTime) then - Start Timer timerSource = timer.performWithDelay (3000, timesUp, 0) end end
Trois secondes sont données pour placer un bloc dans un conteneur carré. Si ce temps s'écoule et que le bloc est toujours dans le carré central, une vie est supprimée..
function timesUp: timer (e) - Enlève des vies - vie - 1 viesTF.text = lives media.playEventSound ('buzz.caf') Après avoir retiré la vie, le bloc dans la case centrale sera détruit et un nouveau bloc sera généré.
display.remove (blocks [#blocks]) table.remove (blocks)
Ce code vérifie si le joueur est en fin de vie et appelle une fonction qui gérera ce problème..
si (vit < 1) then alert() else -- Next Block newBlock(false) end end
Voici le code complet écrit dans ce tutoriel, accompagné de commentaires vous permettant d'identifier chaque partie:
-- Sort 'Frenzic' like Game - Développé par Carlos Yanez - Masquer la barre d'état display.setStatusBar (display.HiddenStatusBar) - Graphiques - [Arrière-plan] local bg - [Titre] local titre local débutB local créditsB - [ TitleView Group] local titleView - [Score et vies] vies localesSuivant vies localesTF vies locales score localText score localTF score local - [GameView] local haut local bas local gauche local titulaire - [GameView Group] local gameView - [ CreditsView] crédits locaux - Variables local blockColor = 'orange', 'vert', 'violet' blocs locaux = positions locales = 5, 35 local currentXPosition local currentYPosition local eventTarget local timerSource local vies local score local cloche local bell4 local buzz - Fonctions local Main = local addTitleView = local startButtonListeners = local showCredits = local hideCredits = local destroyCredits = local showGameView = local destroyTitleView = local addListeners = newBlock local = heure locale = local placeBlock = local blockPlaced = local complet = local removeBlocks = local alert = local alertHandler = local restart = fonction Main () addTitleView () fonction de fin 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 créditsB.y = display.contentCenterY + 40 creditsB.name = 'creditsB' titleView = display.newGroup () titleView: insert (title) titleView: insert (startB) titleView: insert (creditsB) startButtonListeners ('add') fonction de fin startButtonListeners (action) if (action == 'add') then creditsB: addEventListener ('tap', showCredits) startB: addEventListener ('tap', showGameView) else creditsB: removeEventListener ('tap', showCredits) startB: removeEventListener ('tap', ' showGameView) fin de la fonction showCredits () credits = display.newImage ('credits.png') transition.from (crédits, time = 300, x = bg.contentWidth * 2, transition = easing.outExpo) crédits: addEventListener ( 'tap', hideCredits) titleView.isVisible = false fin de fonction hideCredits () titleView.isVisible = true transition.to (crédits, heure = 300, x = bg.contentWidth * 2, transition = easing.outExpo, onComplete = destroyCredits ) end function destroyCredits () crédits: removeEventListener ('tap', hideCredits) display.remove (crédits) credits = nil end fonction showGameView (e) transition.to (titleView, heure = 300, y = -titleView.height, transition = easing.inExpo, onComplete = destroyTitleView) fonction finale destroyTitleView () display.remove (titleView) titleView = nil - Ajout de graphiques 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 à gauche = display.newImage ('conteneur.' png ') left: setReferencePoint (display.TopLeftReferencePoint) left.x = 20 left.y = 205 holder = display.newImage (' container.png ') titulaire: setReferencePoint (display.TopLeftReferencePoint) titulaire.x = 125 titulaire.y = 205 - Lives & Score lives 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: insère (haut) gameView: insérer (à droite) gameView: insérer (en bas) gameView: insérer (à gauche) gameView: insérer (titulaire) gameView: insérer (livesText) jeu Vue: insert (livesTF) gameView: insert (scoreText) gameView: insert (scoreTF) addListeners () end function addListeners () up: addEventListener ('tap', placeBlock) à droite: addEventListener ('tap', placeBlock) vers le bas: addEventListener ( 'tap', placeBlock) à gauche: addEventListener ('tap', placeBlock) lives = 5 score = 0 - Crée une var pour chaque conteneur afin de déterminer quand full.blocks = 0 right.blocks = 0 down.blocks = 0 left .blocks = 0 - Tableaux utilisés pour supprimer les blocs et détecter la couleur up.blocksGFX = right.blocksGFX = down.blocksGFX = left.blocksGFX = - Créez un booléen pour chaque conteneur afin d'éviter de placer des blocs dans la même position 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 - Donnez un nom aux conteneurs pour les identifier ultérieurement up.name = 'up' right.name = 'right' down.name = 'down' left.name = 'left' newBlock (true) end function newBlock (firstTime) - Nouveau bloc local randomBlock = math.floor (math.random () * 3) + 1 bloc local if (blockColor [randomBlock] == 'orange'), puis bloc = affiché. newImage ('orangeBlock.png') block.name = 'orange' block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'vert') puis bloc = display.newImage ('greenBlock.png'). name = 'green' block: setReferencePoint (display.TopLeftReferencePoint) elseif (blockColor [randomBlock] == 'purple') puis block = display.newImage ('purpleBlock.png') block.name = 'violet' bloc: setReferencePoint (display) .TopLeftReferencePoint) end currentXPosition = positions [math.floor (math.random () * 2) + 1] currentYPosition = positions [math.floor (math.random () * 2) + 1] block.x = titulaire.x + currentXPosition block.y = titulaire.y + currentYPosition table.insert (blocs, bloc) gameView: insert (block) - Vérifie s'il y a un espace disponible pour déplacer le bloc position locale = currentXPosition, currentYPosition if ition [1] == 5 et position [2] == 5 et up.a == true et right.a == true et down.a == true et left.a == true) puis display.remove (block ) block = nil newBlock (false) elseif (position [1] == 35 et position [2] == 5 et up.b == true et right.b == true et down.b == true et left.b == true) puis display.remove (block) block = nil newBlock (false) elseif (position [1] == 5 et position [2] == 35 et up.c == true et right.c == true et down.c == true et left.c == true) puis display.remove (block) block = nil newBlock (false) elseif (position [1] == 35 et position [2] == 35 et up.d = = true et right.d == true et down.d == true et left.d == true) puis display.remove (block) block = nil newBlock (false) end - Début du minuteur la première fois que la fonction est appelée if (firstTime) then - Start Timer timerSource = timer.performWithDelay (3000, timesUp, 0) fin de la fonction timesUp: timer (e) - Supprimer les vies en direct = les vies - 1 livesTF.text = lives media.playEventSound ('buzz .caf ') - Supprime l'affichage des blocs non utilisés. remove (blocks [#blocks]) table.remove (blocks) - Vérifie si les personnes hors de la vie si (vit < 1) then --alert() else -- Next Block newBlock(false) end end Dans la prochaine et dernière partie de la série, nous allons gérer le comportement des blocs, les scores et les dernières étapes à suivre avant de publier les tests d'application de type application, de créer un écran de démarrage, d'ajouter une icône et de créer l'application. Restez à l'écoute pour la dernière partie!
