Share
Dans cette série de didacticiels, vous apprendrez à créer un jeu comme Snake. L'objectif du jeu est de saisir les pommes à l'écran pour augmenter le score. Continuer à lire!
S'il vous plaît assurez-vous de vérifier partie 1 de la série pour bien comprendre et préparer ce tutoriel.
Cette fonction ajoute les auditeurs nécessaires à la TitleView boutons.
Accentsconagua
function startButtonListeners (action) if (action == 'add'), puis playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) sinon playBtn: removeEventListener ('tap', showGameView) 'tap', showCredits) end end L’écran des crédits s’affiche lorsque l’utilisateur appuie sur le bouton À propos de, un bouton robinet écouteur est ajouté à la vue des crédits pour le supprimer.
function showCredits: tap (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', display.contentCenterX - 110, display.contentHeight + 40) transition.to (creditsView, heure = 300, y = display.contentHeight-20, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Lorsque l'écran des crédits est exploité, il sera interpolé hors de la scène et supprimé.
function hideCredits: tap (e) playBtn.isVisible = vrai creditsBtn.isVisible = vrai transition.to (creditsView, heure = 300, y = display.contentHeight + creditsView.height, onComplete = fonction () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil fin) fin Quand le Début appuyez sur le bouton, la vue du titre est interpolée et supprimée pour révéler la vue du jeu. Il y a beaucoup de parties impliquées dans cette vue, nous allons donc les séparer dans les prochaines étapes..
function showGameView: tapez sur (e) transition.to (titleView, heure = 300, x = -titleView.height, onComplete = fonction () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Ce code place le fond du jeu dans la scène.
-- [Ajouter GFX] - Bg du jeu gameBg = display.newImage ('gameBg.png') Afin de déplacer le serpent à l'écran, nous aurons besoin d'un pavé de jeu, cela s'en chargera. UNE robinet auditeur sera ajouté plus tard à chaque flèche pour gérer le mouvement.
-- 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' name.name = 'right' Cette ligne ajoute le champ de texte de la partition:
-- Score Score texte = display.newText ('0', 74, 3, native.systemFontBold, 15) partition: setTextColor (252, 202, 1) Ensuite, nous ajoutons la tête du serpent. Comme mentionné dans le tutoriel précédent, un zone touchée sera ajouté sur le dessus et puis les deux seront stockés dans un groupe.
-- 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 première pomme est ajoutée par ce code à une position aléatoire.
-- Ajouter la première pomme local randomX = 25 + math.floor (math.random () * 402) local randomY = 25 + math.floor (math.random () * 258) apple local = display.newImage ('apple.png', randomX, randomY) pommes = display.newGroup (apple) gameListeners () end Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners () up: addEventListener ('tap', movePlayer) à gauche: addEventListener ('tap', movePlayer) vers le bas: addEventListener ('tap', movePlayer) à droite: addEventListener ('tap', movePlayer) end La variable de direction est modifiée par cette fonction, le serpent ira dans la direction indiquée.
function movePlayer (e) dir = e.target.name if (démarré == nul), puis timerSrc = timer.performWithDelay (vitesse, mise à jour, 0) started = vrai fin
Nous utiliserons une fonction excellente et utile pour la détection de collision sans physique. Vous trouverez l'exemple et la source d'origine sur le site Web CoronaLabs Code Exchange..
fonction hitTestObjects (obj1, obj2) gauche locale = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin droit local = obj1.contentBounds.xMin> = obj2.contentBounds.xMin et obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local bas = obj1.contentBounds.yMin> = obj2.contentBounds.yMin et obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end
Nous capturons la dernière position de la tête du serpent pour mettre à jour la position des pièces, chacune remplaçant les coordonnées x et y de l'autre.
function update () - Capture la dernière position, cela déplace la première pièce ajoutée locale lastX = head.x local lastY = head.y local xPos = local yPos =
Cela complète le comportement expliqué à l'étape précédente.
pour i = 1, parts.numChildren do - Capture la position des pièces pour les déplacer xPos [i] = pièces [i] .x yPos [i] = pièces [i] .y - Déplacer des pièces si (parts [i-1 ] == nil) puis parties [i] .x = lastX parties [i] .y = dernierY autres parties [i] .x = xPos [i-1] parties [i]. i = yPos [i-1] fin
Le jeu se termine lorsque la tête du serpent touche une autre partie du serpent. Un son est joué comme feedback.
-- Fin du jeu si la tête touche une autre partie du serpent si (hitTestObjects (headHitArea, parties [i])), puis imprimez (parties [i] .name) si (parties [i] .name == '1') puis imprimez ('une ') else timer.cancel (timerSrc) timerSrc = nil audio.play (gameOver) fin fin Ces lignes déplacent la tête selon la direction établie par le Déplacer le joueur fonction créée à l'étape 11.
-- Déplacez la tête et la zone touchée si (dir == 'up') puis head.y = head.y - mConst headHitArea.x = headGFX.x headHitArea.y = headGFX.y - 7 elseif (dir == 'gauche') puis head.x = head.x - mConst headHitArea.x = headGFX.x - 8 headHitArea.y = headGFX.y elseif (dir == 'down') puis head.y = head.y + mConst headHitArea.x = headGFX. x headHitArea.y = headGFX.y + 8 elseif (dir == 'right') puis head.x = head.x + mConst headHitArea.x = headGFX.x + 7 headHitArea.y = headGFX.y fin
Plusieurs actions se produisent lorsque le serpent mange une pomme, nous allons les passer en revue dans les étapes suivantes.
D'abord on enlève la pomme.
-- Détecter la collision joueur-pomme pour i = 1, pommes.numChildren faire si (hitTestObjects (tête, pommes [i])) puis - Supprimer Apple display.remove (pommes [i])
Ensuite, nous mettons à jour le champ de partition et émettons un son pour indiquer que la pomme a été mangée..
-- Ajouter Score score.text = score.text + tostring (10) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 74 audio.play (appleGrab)
Ensuite, une nouvelle partie est ajoutée au serpent. Sa position est calculée par la dernière partie ajoutée (la première fois est la tête) et ensuite ils sont ajoutés à un groupe.
-- Ajoutez la partie locale du corps de serpent = display.newImage ('bodyPart.png') if (dir == 'up'), puis part.x = lastPart.x part.y = lastPart.y + mConst elseif (dir == 'left') ) puis part.x = lastPart.x + mConst part.y = lastPart.y elseif (dir == 'down') puis part.x = lastPart.x part.y = lastPart.y - mConst elseif (dir == ' right ') alors part.x = lastPart.x - mConst part.y = lastPart.y end current = en cours + 1 part.name = tostring (current) lastPart = part parts: insert (part) Enfin, nous créons une nouvelle pomme et la plaçons au hasard dans la scène.
-- Ajouter une nouvelle pomme local randomX = 25 + math.floor (math.random () * 402) local randomY = 25 + math.floor (math.random () * 258) apple local = display.newImage ('apple.png', randomX, randomY) pommes = display.newGroup (apple) end end Cela fait apparaître le serpent de l'autre côté de la scène.
-- Limites d'écran si (head.x < 0) then head.x = display.contentWidth - mConst elseif(head.x > display.contentWidth) then head.x = 0 end - Vertical si (head.y) < 0) then head.y = display.contentHeight - mConst elseif(head.y > display.contentHeight) puis head.y = 0 end end
Afin de démarrer le jeu, le Principale la fonction doit être appelée. Avec le code ci-dessus en place, nous le ferons ici:
Principale()
Le fichier Default.png est une image qui s’affiche dès le démarrage de l’application pendant que l’iOS charge les données de base pour afficher l’écran principal. Ajoutez cette image dans le dossier source de votre projet, elle sera automatiquement ajoutée par le complémenteur Corona..
En utilisant les graphiques que vous avez créés auparavant, vous pouvez maintenant créer une belle et jolie icône. La taille de l'icône de l'iPhone non rétine est 57x57px, mais la version de la rétine est 114x114px et le magasin iTunes nécessite une version de 512x512px. Je suggère de créer d'abord la version 512x512, puis de la réduire pour les autres tailles.
Il n'est pas nécessaire que les angles soient arrondis ou que la lumière soit transparente, iTunes et l'iPhone le feront pour vous..
Il est temps de faire le test final. Ouvrez le simulateur Corona, accédez au dossier de votre projet, puis cliquez sur Ouvrir. Si tout fonctionne comme prévu, vous êtes prêt pour l'étape finale!
Dans le simulateur Corona, accédez à Fichier> Construire et sélectionnez votre appareil cible. Remplissez les données requises et cliquez sur construire. Attendez quelques secondes et votre application sera prête pour le test de l'appareil et / ou la soumission pour la distribution.!
Expérimentez avec le résultat final et essayez de créer votre version personnalisée du jeu.!
J'espère que vous avez aimé cette série de tutoriels et que vous l'avez trouvé utile. Merci pour la lecture!
