Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

AS3 101: Boucles - Basix

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called AS3 101.
AS3 101: Arrays - Basix
AS3 101: The Display List – Basix

French (Français) translation by Jeane Jade (you can also view the original English article)

Bienvenue à AS3 101, la cinquième édition! À ce stade, vous devriez être à l'aise avec les concepts de variables, de fonctions conditionnelles (ramification), et les Tableaux. Non seulement devez-vous être à l'aise avec les concepts, mais vous devez également être à l'aise dans la façon dont ActionScript 3 met en œuvre ces concepts.

Pour ce cinquième épisode, nous allons ajouter à ce catalogue de compétences les différentes structures de boucles trouvé en AS3. Vous trouverez des dépendances sur les informations apprises en AS3 101 Partie 4, sur les Tableaux, donc si vous avez sauté une ou besoin d'une remise à niveau, veuillez consulter le tutoriel avant de continuer avec celui-ci.

Pour notre dernier projet, nous allons combiner des boucles et des tableaux, de faire un simple shoot-em-up jeu.


Etape 1: qu'est Ce qu'une Boucle?

Si vous avez déjà engagé la "répétition de la lecture" fonction de votre lecteur de CD, lecteur MP3, ou musique logiciel de gestion, vous avez vécu une boucle. Si vous avez déjà eu à écrire des lignes sur le tableau à craie, après l'école, vous avez vécu une boucle. Si vous avez regardé "Jour de la Marmotte," vous avez été témoin d'une boucle.

Une boucle dans la programmation d'un bloc de contrôle, similaire en substance à une instruction if ou une fonction, qu'il y a un peu de code qui se trouve entre les accolades, et que le bloc est contrôlée par une certaine forme de structure de contrôle. Dans ce cas, le contrôle permet le bloc pour être exécuté, le plus probable avec de légères variations, jusqu'à ce qu'il est dit d'arrêter.

Il existe trois types de boucles en ActionScript, la boucle, la boucle while, et la boucle do. Il y a aussi deux autres types qui sont les boucles utilisées spécifiquement pour parcourir une collection comme un Tableau, et ne peut pas être utilisé de quelque autre façon. Ce sont les...en boucle et la boucle for...each.

Une chose à comprendre au sujet de ces trois "standard" des boucles, c'est qu'ils seront toujours courir si vous les laissez. Un mal codé boucle sera la conséquence de ce qui est connu comme une boucle infinie, grâce à laquelle l'ordinateur seront consciencieusement faire ce que vous lui avez dit de faire, et c'est de ce même bloc, encore et encore jusqu'à la fin des temps. Heureusement, la boucle for est difficile de rater (même si c'est certainement le cas assez souvent), et en plus de cela, ActionScript 3 intègre dans une boucle infinie de protection. Si un script est exécuté pendant plus de 15 secondes sans venir pour l'air, puis vous verrez un avertissement à l'effet de "Un script est à l'origine de ce film à courir lentement. Aimeriez-vous abandonner?" Si vous voyez que tout en travaillant par le biais de ce tutoriel, cliquez sur "Oui", parce que les chances sont que vous avez fait quelque chose de mal et vous pouvez aussi bien prendre la trappe de sortie qui est offert pour vous. Sans cette sortie, la boucle serait juste de courir, et courir, et courir, efficace de blocage-vous de toucher Flash à nouveau jusqu'à ce que vous mettiez fin manuellement (Forcer à Quitter sur le Mac, Fin de Tâche sur Windows), et redémarrez Flash.

Cela dit, les boucles sont extrêmement utiles. En fait, ils sont indispensables outils de programmation. Ils peuvent prendre l'aspect fastidieux de mettre en place un tas de boutons similaires. Ils sont nécessaires pour travailler avec des données dynamiques, par exemple lorsqu'un nombre arbitraire d'éléments seront à venir dans la via XML. Vous pouvez traiter les systèmes de particules avec des boucles. La grande majorité des jeux nécessitent l'utilisation de boucles. Et vous pouvez atteindre une telle logique comme "donne-moi tout nombre aléatoire, sauf pour le dernier, vous m'avez donné" ou "construire une chaîne de caractères avec le nombre d'espaces."


Étape 2: Pour La Boucle

Le plus couramment utilisé type de boucle, dans n'importe quelle langue, est probablement la boucle for. Trois des cinq des constructions en boucle en fait utiliser le mot, mais l'un est désigné simplement sous le nom de "boucle", car il n'y a pas d'autres mots-clés impliqués dans la prise. Nous allons écrire une simple boucle for:

Et supposons qu'elles s'effondrent. Le premier est le pour le mot clé (comme beaucoup de nos constructions de programmation, celui-ci commence par un mot-clé). Immédiatement après c'est un jeu de parenthèses. À l'intérieur de ces parenthèses sont en fait trois expressions ActionScript. Nous reviendrons sur ces en une seconde, mais notez qu'il existe deux points-virgules. Ces trois expressions. Ensuite c'est une accolade d'ouverture. Ensuite, nous avons un peu de code, et une accolade fermante. Le code entre les accolades est ce qui est exécutée en tant que itération de la boucle.

Maintenant, ces trois expressions. Ils sont les suivants:

  1. L'initialiseur
  2. Le test
  3. Le compteur

L'initialiseur est vraiment juste une instruction qui s'exécute en tant que la première chose dans la boucle. Il est exécuté une fois, et il est exécuté en premier. Donc, dans cet exemple, la première chose à faire est de créer une variable qui s'appelle "je" et le mettre à 0.

Le test est une expression qui devrait renvoyer true ou false. Pensez à cela comme quelque chose qui serait à la maison comme la condition d'une instruction if. Pour la boucle utilise cette condition avant chaque itération de la boucle pour voir si elle doit poursuivre l'exécution. Tant que la condition est vraie, la boucle continuera à exécuter. Dès que c'est faux, il va sortir de la boucle. Dans notre exemple, cela signifie que tant que la variable i a une valeur qui est inférieure à 10, nous allons continuer la boucle. Faut-il jamais 10 égale ou supérieure à 10, la boucle s'arrête.

Enfin, le compteur est une autre instruction qui sera exécutée une fois pour chaque itération de la boucle, une fois que tout le code aura été exécuté. En regardant notre exemple, ceci est la dernière pièce du puzzle et nous pouvons voir qu’après avoir tracé "Bonjour", nous prenons cette variable et l’incrémentons de 1.

Enfin, le compteur est une autre instruction qui sera exécuté une fois pour chaque itération de la boucle, après tout le code entre les accolades est exécuté. En regardant notre exemple, c'est la dernière pièce du puzzle, et nous pouvons voir que, après nous trace "Bonjour," nous prenons ce que j'variable incrémentée de 1. Il est utile pour l'étape à travers la vie d'une boucle à un rythme lent. Voici ce qui arrive:

  1. Créer une variable qui s'appelle "je" et le mettre à 0.
  2. Vérifiez pour voir si la variable i est inférieur à 10. Il est actuellement de 0, donc c'est vrai, nous avons donc...
  3. Tracer "Bonjour."
  4. Incrément je. i est maintenant de 1.
  5. Vérifiez pour voir si la variable i est inférieur à 10. Il est maintenant de 1, de sorte que c'est toujours vrai, donc nous...
  6. Tracer "Bonjour."
  7. Incrément je. j'ai maintenant 2.
  8. Vérifiez pour voir si la variable i est inférieur à 10. Maintenant c'est 2, donc c'est toujours vrai, donc nous...
  9. Tracer "Bonjour."
  10. Incrément je. j'ai maintenant 3.
  11. ... et ce qui se passe... passons à l'avance quand je est 9...
  12. Incrément je. j'ai maintenant 9.
  13. Vérifiez si la variable i est inférieure à 10. Il est maintenant 9, donc c'est toujours vrai, alors nous ...
  14. Tracer "Bonjour."Vérifiez pour voir si la variable i est inférieur à 10. C'est maintenant à 9, de sorte que c'est toujours vrai, donc nous...
  15. Incrément je. j'ai maintenant 10.
  16. Vérifiez pour voir si la variable i est inférieur à 10. Il est maintenant 10...aha! 10 n'est pas moins de 10. La condition est fausse, alors maintenant nous sortir de la boucle, et de reprendre l'exécution de code immédiatement après l'accolade fermante.

Si vous avez marqué des points, vous aurez remarqué que nous aurions dû tracer "Bonjour". 10 fois. Gardez à l'esprit que pendant que nous arrêtons quand i est égal à 10, nous commençons i à 0, donc i incrémente de 0 à 9, permettant 10 itérations. Notez que cela fait écho au fait que les tableaux ont des index qui commencent à 0. Bien que vous puissiez facilement écrire des boucles commençant à 42 et exécutées alors que j’ai moins de 52 ans, nous obtenons ainsi 10 itérations. Il existe donc de très bonnes raisons de vous assurer que vous essayez de le faire. coller avec à partir de 0. Je vais devoir tirer un "confiance en moi" sur celui-ci, mais fondamentalement, tant que vous êtes cohérent, vous pouvez éviter beaucoup de résultats inattendus à long terme.

Si vous avez gardé le score, vous aurez remarqué que nous avons tracé "Bonjour." 10 fois. Gardez à l'esprit que, même si nous nous arrêtons lorsque i est égal à 10, nous commençons i à 0, alors j'incrémente de 0 à 9, ce qui permet pour 10 itérations. Remarquez comment ce fait l'écho du fait que les Matrices ont les indices commencent à 0. Alors que vous pouvez facilement écrire des boucles for qui commencent à 42 et à exécuter lorsque je est en vertu de 52 ainsi, la réalisation de 10 itérations – il y a de très bonnes raisons pour vous assurer que vous essayez de coller avec départ à 0. Je vais devoir tirer un "trust me" sur ce point, mais, fondamentalement, tant que vous êtes cohérent, vous pouvez éviter beaucoup de résultats inattendus sur le long terme.

Que par lui-même n'est pas très utile. Si je voulais gagner du temps quand je suis en train d'écrire des lignes après l'école ("je ne laisserai pas les variables non typées. Je ne laisserai pas les variables non typées. Je ne vais pas..."), alors c'est super. Mais presque toujours, vous allez vouloir changer ce qui se passe à chaque itération par un peu. Sûrement, il doit y avoir un moyen pour accomplir cette?

Il est sûr! Vous savez que la variable "i" que nous avons créé pour aider à garder une trace de la boucle? Croiriez-vous que c'est une variable exactement comme n'importe quelle autre variable dans le code ActionScript? Rappelez-vous, même si ces trois expressions entre parenthèses look un peu différent, ils sont toujours les expressions ActionScript. Nous pouvons techniquement mettre tout ActionScript valable. Je ne recommande pas de faire, même si, au moins pas pour les débutants. Mon point de vue, au lieu de cela, est que la variable "i" est disponible pour nous. Nous allons modifier le corps de la boucle de sorte qu'au lieu de tracer "Bonjour." nous je trace:

Et de l'exécuter. Vous allez voir que nous avons une liste de nombres entiers de 0 à 9. Avoir cette disposition ouvre un monde de possibilités, que nous allons commencer à explorer un peu plus tard.

Je tiens à souligner que le nom de "i" pour ce genre de boucle est une convention non seulement dans ActionScript, mais pratiquement tous les langages de programmation. Vous êtes libre d'utiliser tout nom de variable que vous voulez, mais si vous utilisez simplement "je," tout le monde sait exactement ce que vous faites, ce qui est une bonne chose.

Et comme une pensée sur les boucles for, si vous voulez voir une boucle infinie dans l'action, essayez ceci:

Pouvez-vous repérer pourquoi cette boucle n'aura jamais de fin?


Étape 3: While et Do

Il y a deux autres "standard" boucles qui sont vraiment juste des variations sur la même idée. Nous allons examiner brièvement par souci d'exhaustivité.

Tout d'abord, regardons la boucle while. C'est en fait le cœur de la boucle de construire. Une boucle for sera compilé dans une boucle while. Chaque maintenant et puis, si, une boucle while peut faire quelque chose qu'une boucle for est tout simplement trop lourd pour. La boucle while ressemble à ceci:

C'est en fait exactement le même que pour notre boucle à partir de la dernière étape, juste écrit avec un certain temps. Le tout en boucle elle-même commence avec le mot-clé while et comprend les accolades. La première ligne est juste notre initialiseur, ce qui est nécessaire pour être prêt pour la boucle, mais n'est pas automatiquement pris en compte comme il est avec une boucle for. La partie entre parenthèses après le mot clé est le test. Aussi longtemps que cela est vrai, la boucle s'exécute. Notre corps de boucle se compose non seulement de la chose, nous voulons arriver (je trace), mais aussi l'incrémentation de la variable i. Encore une fois, il est nécessaire de consacrer une ligne, même si la boucle offre une commodité pour ce très commun idiome.

En d'autres termes, ce code est exactement le même que pour la boucle à partir plus tôt, seulement avec plus de lignes concernées. Techniquement, il est pas plus de code, plus de lignes.

Alors pourquoi utiliser une boucle while? Généralement, c'est parce que nous n'avons pas une idée claire de exactement combien de fois quelque chose qui doit arriver. Imaginez un jeu de caractères dans une certaine direction, et il doit s'arrêter quand un mur de blocs de son chemin. On pourrait écrire quelque chose comme:

La boucle est souvent négligé, cousin de la boucle while. Ils sont pratiquement identiques, avec deux petites exceptions. Dans une boucle, le mot clé est faire (duh!). Et aussi, le tout vient après l'accolade fermante. Il ressemble à ceci:

La différence fonctionnelle entre les deux est que dans une boucle, vous avez la garantie que le corps de la boucle sera exécutée au moins une fois. Dans une boucle while, il est possible que la condition peut ne pas être respectées au départ, auquel cas, le corps n'est jamais exécuté.

Imaginez un spécialisé générateur de nombre aléatoire. Vous voulez choisir un nombre aléatoire de 1 à 10 à chaque fois qu'un bouton est cliqué, mais vous voulez vous assurer que le nombre n'est pas toujours le même que le dernier numéro qui a été choisi. Avec une boucle, vous pouvez choisir un nombre au hasard, le comparer avec le dernier numéro, puis répétez le processus si nécessaire. Dans ce cas, vous devez choisir au moins un nouveau nombre aléatoire. Il peut être tout ce dont vous avez besoin, mais il doit se produire au moins une fois. Imaginez le var "randomNumber" détient le courant de nombre aléatoire, et que ce code est à l'intérieur de, disons, une fonction qui est accroché jusqu'au clic sur le bouton.

Ce code crée une variable temporaire appelée "lastNumber" qui stocke le courant "randomNumber" de la valeur. Puis nous entrons dans la boucle. Puisque c'est un do, on exécute le corps, puis vous préoccuper de l'état, afin de nous donner "randomNumber" une nouvelle valeur aléatoire (en prenant un peu de valeur générée par les Mathématiques.random(), qui va de 0 à 1, en multipliant par 10, puis en arrondissant avec les Mathématiques.ceil()). Ensuite on vérifie la condition: si la valeur actuelle de "randomNumber" (dont nous avons juste changé) est la même que la valeur stockée dans "lastNumber" (qui fut le dernier véritable valeur de "randomNumber"), puis se poursuit en boucle. Essayez de nouveau, en d'autres termes. Donc, si "randomNumber" a été de 7, et pour la première fois dans la boucle a aussi généré une 7, puis on faisait étape à travers la boucle à nouveau, jusqu'à ce que quelque chose d'autre que le 7 est obtenu. Le résultat est un nombre aléatoire qui n'est jamais le même que le dernier que nous avons eu.


Étape 4: Poursuivre La

Il est parfois nécessaire de modifier l'exécution d'une boucle alors que nous sommes au milieu de l'exécution de la boucle. Nous pouvons faire deux choses à partir de l'intérieur d'une boucle qui modifie le débit de la boucle.

continuer est un mot-clé qui provoque immédiatement la boucle commencer à répéter à nouveau. Il pourrait code de congé non dans le corps, et c'est en fait le point de continuer-ing une boucle. Vous l'utilisez comme ceci:

Ce n'est pas un très bon exemple, mais il illustre l'utilisation et les effets de continuer. Ce qui est typique pour la boucle, le "je" va de 0 à 9. La première chose dans le bloc est de retrouver "je." Pas grand-chose jusqu'à présent. Ensuite, nous vérifions pour voir si "je" est dans une certaine fourchette: entre 5 et 8 ci-dessous. Si c'est le cas, alors nous continuons. La dernière ligne est une autre trace. Ainsi, alors que "je" est 0, 1, 2, 3, 4, ou 5, nous voyons deux traces pour chaque valeur de "i". Mais alors "je" tourne à 6, ce qui est supérieur à 5 et inférieur à 8, donc nous continuons. Par conséquent, cette itération de la boucle s'arrête immédiatement et nous commençons à l'itération suivante, avec "i" incrémenté et 7. 7 répond aussi aux critères et nous tirez une astuce similaire. Dans les deux cas, parce que nous avons continué avant la dernière ligne du bloc, nous voyons seulement une trace pour ces deux valeurs de "i".


Étape 5: Pause

la rupture est une sorte de bouton de panique pour les boucles. À l'aide de la boucle de simplement la fin de son exécution, peu importe combien vrai que la condition est. pause peut être utile pour la construction de échouent coffre-fort dans tout et faire des boucles, puisque ceux-ci peuvent être sujettes à des boucles infinies. Considérer:

Cette boucle, bien que techniquement pas une boucle infinie, sera plus susceptible de déclencher le délai d'exécution du script limite avant de générer exactement à 0,42. Nous pouvons construire un mécanisme de sécurité comme suit:

C'est un peu plus de travail, mais il assure que notre boucle ne sera jamais exécuter plus de 500 fois.

la rupture est plus utile que cela, cependant. Vous pourriez parcourir un Tableau, et de regarder pour une valeur particulière. Une fois que vous avez trouvé une correspondance, il n’est pas nécessaire de continuer à analyser le reste du tableau, vous pouvez donc tout aussi bien vous échapper de la boucle. Nous verrons cela en action sous peu.


Étape 6: Pour Chaque & Pour En

Il existe deux types de structures de boucle qui sont spécifiquement conçus pour fonctionner avec des collections comme des Tableaux. Ils diffèrent de manière subtile, mais de bons programmeurs connaissent les différences et savoir quand utiliser l'un.

D'abord, supposons que l'on avait un Tableau:

Maintenant, nous pouvons en boucle sur ce Tableau. C'est, nous savons que les Tableaux implicitement sont des ensembles de valeurs. Nous voulons profiter de chaque individu, et faire quelque chose à tour de rôle. C'est une tâche très commune, donc c'est pratique d'avoir deux types de boucle dédié à cette action.

Nous pouvons écrire une...en boucle comme ceci:

...commence avec le mot-clé de nouveau, mais l'utilisation du mot-clé qui rend ce différent de l'ordinaire pour la boucle. La chose à la droite de dans est la chose que nous voulons en boucle (le Tableau). Les trucs à la gauche de en est une déclaration de variable. Cette variable est disponible à la boucle (et d'ailleurs, soit dit en passant) et contiendra, pour chaque itération de la boucle, l'index/la clé/nom de chaque élément contenu dans la collection. Dans le cas d'un Tableau, on obtient les indices numériques. Notez, cependant, que ceux-ci sont convertis en Chaînes.

Ainsi, la variable "indice" a la clé stockée dans le. Cela signifie que l'on peut accéder aux valeurs réelles à l'aide de la clé entre crochets sur la collection (ary[index]).

...chaque boucles sont très similaires, avec une différence essentielle: au lieu de créer une variable pour contenir la clé, vous créez une variable pour contenir la valeur réelle de l'élément dans la collection.

Notez que le type de données est une Chaîne pour la variable "élément". C'est par coïncidence, le même que ce que nous avions dans la...dans la boucle. Toutefois, dans ce cas, le type de données est alimentée par ce que les valeurs sont en fait stockés dans le Tableau. Si nous avions ce Tableau:

Notre boucle pourrait ressembler à ceci:

Dans le corps de la boucle, la variable que nous avons déclaré contiendra la valeur de la collection dans chaque itération. Nous avons dû passer par un petit cerceau pour obtenir cette valeur dans la...dans la boucle. La boucle for...each a tendance à être un peu plus propre. Cependant, vous n'avez pas accès à la clé dans cette boucle, donc si c'est important, vous aurez besoin d'utiliser un autre type de boucle.

...chaque boucles ne sont pas seulement plus rapide à taper, ils sont plus rapides à exécuter. Donc, si ce type de boucle correspond à vos besoins (qui est, vous n'avez pas besoin de connaître la clé), vous pourriez préférer.


Étape 7: Boucles Imbriquées

Il est certainement possible d'imbriquer des boucles, tout comme il est possible de créer des multi-dimensions des Tableaux. C'est une question simple à faire, juste être sûr d'honorer les retraits ou les choses deviennent terriblement difficile à lire:

Si vous exécutez cet extrait, vous verrez quelque chose comme ceci:

Ceci donne une matrice de valeurs. Dans ce cas, nous obtenons toutes les combinaisons de 0, de 0 à 4, 4.

Notez, cependant, qu'il est extrêmement important d'utiliser un autre nom de variable pour la boucle imbriquée. Nous avons utilisé le "je" de la première boucle (connu sous le nom de la boucle externe) et "j" pour la deuxième boucle (la boucle interne). Si l'on avait utilisé le "je" comme nous avons l'habitude de le faire, nous serions avec juste ceci:

Il ne peut être une variable "i" à un moment, et si "je" atteint 5 sur la boucle interne et remplit donc la condition de la boucle externe ainsi, l'arrêt de l'ensemble chose plus tôt que nous l'avions prévu. Heureusement, ActionScript 3 a une certaine construit dans, une protection qui permet d'éviter cette erreur.

Il est possible de construire des Matrices multi-dimensionnelles comme ceci:

Il est également intéressant de noter que nous pouvons sortir de (ou de continuer) boucles imbriquées par son nom. Si vous utilisez break dans une boucle interne, il ne brise le courant (interne) de la boucle, pas de la boucle externe. Si vous avez besoin pour briser la boucle externe à partir de l'intérieur de la boucle interne, vous pouvez étiquette à l'extérieur de la boucle comme ceci:

Notons la très premier bit: l'étiquette, une virgule, puis l'instruction for. Cela donne à l'extérieur de la boucle de l'étiquette on peut utiliser avec break et continue. Ensuite, dans la boucle intérieure, à un certain arbitraire de l'état, de nous sortir de la totalité de la boucle en spécifiant de quelle boucle à la pause.


Étape 8: Boucle Sur Des Tableaux

Nous avons vu comment utiliser le...et le...chaque boucle pour boucle sur les Tableaux. Cependant, il est très courant d'utiliser le normal pour de la boucle pour parcourir un tableau. Les avantages sont que nous avons accès à l'index (à la différence de...chacun), et nous obtenons l'indice int forme (contrairement à...).

Donc, à la base, il ressemble à ceci:

Cependant, en faisant cela, il est conseillé de suivre quelques règles au nom de l'optimisation. Pour cette simple 5-itération de la boucle, c'est pas une grosse affaire, mais je vous encourage à en faire une habitude simplement de toujours utiliser ces idées.

Tout d'abord, la recherche ary.la longueur de chaque temps dans l'état nécessite beaucoup de temps. À moins que nous sommes en train d'altérer la longueur du Tableau dans la boucle, nous devrions obtenir cette valeur une fois, la stocker dans une variable et utiliser la variable dans la case:

Deuxièmement, assurez-vous que vos types de données numériques adéquation entre votre "je" variable et votre "len" à la variable. Comparaisons rapides entre int et un autre de type int, ou un Nombre et un autre Numéro, mais si vous faites des "je" un int et de faire "len" un certain Nombre, que la comparaison est nettement plus lent.

Troisièmement, lorsque l'obtention d'un élément de la pile, assurez-vous de le stocker dans une variable. Comme un supplément d'optimisation de truc, de déclarer la variable en dehors de la boucle. Aussi, mettre un type de données de la variable. Tout cela ajoute à la vitesse supérieure lors de l'utilisation de cet élément de la Matrice.


Étape 9: La Mission

Maintenant que nous avons obtenu à travers le sec théorie, nous allons construire quelque chose d'amusant: un simple shoot-em-up jeu, basé loosley (très vaguement) sur le classique d'Astéroïdes. Nous allons utiliser les boucles pour parcourir les collections de balles et les ennemis, et d'effectuer un hit des tests sur chaque. N'en attendez pas trop en termes de jeu; notre but est d'utiliser des boucles dans un cadre pratique, de ne pas apprendre les tenants et les aboutissants de la conception du jeu.

Un starter FLA est fourni de base avec des illustrations. Comme d'habitude pour l'AS3 101 de la série, nous sommes plus intéressés à apprendre à programmer, et moins dans le graphique de la production d'un projet. Dans l'intérêt de temps, nous allons supposer que vous avez commencé avec la FLA a fourni dans les fichiers source.

Un tour rapide de la FLA est dans l'ordre, cependant. Il existe quelques éléments de la bibliothèque, dont la plupart sont sur la scène. Il est le vaisseau du joueur:

C'est sur la scène de la gauche face à la droite. Il a un nom d'instance de navire. Le navire se déplacer verticalement dans la réponse que le joueur le mouvement de la souris, et ne changera jamais sa rotation ou de sa position horizontale. Vous pouvez remarquer que le point de référence du navire est centré, pour faciliter la position de la souris.

Il est un symbole appelé Astéroïde, qui représente quelque chose pour le joueur à se battre.

Ce n'est pas placée sur la scène, mais il est préparé pour une utilisation avec ActionScript. Vous remarquerez peut-être dans la bibliothèque que ce symbole a une entrée sous "Liens". Cela nous permet de travailler avec le symbole, et des instances, à l'aide de code. Les astéroïdes se déplace dans une direction aléatoire, et envelopper les bords de la scène.

Il y a un autre symbole appelé Puce:

Il n'est pas sur la scène, mais a un identifiant de Liaison, à l'instar de l'Astéroïde symbole. Les balles vont devenir attaché à la scène par programmation, et tirer le vaisseau du joueur vers la droite. Si il y a une collision entre la balle et la toute astéroïde, deux d'entre eux sont supprimés.

Ce fait conduit à l'une des figures associées à la programmation Arrrays et des boucles. Nous allons entrer dans les détails, assez vite, mais gardez un œil sur quelques problèmes avec notre boucle.

Enfin, il y a un "Vous avez gagné!", placée sur la scène dans le centre avec le nom de l'instance de gagner.

Ce sera invisible jusqu'à ce que le joueur tire tous les quatre astéroïdes, à quel point le jeu s'arrête et il apparaîtra.


Étape 10: Commencer À Coder

Comme il est d'usage de pratiquer lors de l'écriture de scénario scripts, créez un nouveau calque et nommez quelque chose comme "code" ou "script", et le verrouiller. Pour une question d'organisation, ne jamais mélanger vos couches avec des œuvres d'art et de code. Aussi, essayez de garder tout le code dans un script unique, autant que possible.

Avec votre calque créé et sélectionné, appuyez sur la touche F9 (Opt-F9 sur Mac) pour ouvrir le panneau Actions. Cliquez sur l'icône d'épingle en bas pour l'empêcher de perdre contexte si vous cliquez sur l'application.

La première chose que nous voulons faire est de vous assurer que la victoire de l'écran est caché. De sorte que la première bits, nous allons écrire est:


Étape 11: Baies de Stockage

Le bit suivant de notre script va être de créer deux Tableaux qui contiendra tous sur l'écran astéroïdes (dans un Tableau) et le tout sur l'écran balles (dans l'autre). Les deux Tableaux sont vides pour l'instant. Nous allons créer des balles et des astéroïdes que nous avons besoin d'eux et des trucs dans les Tableaux. Notre prochaine quelques lignes ressembler à ceci:

Nous allons être de la manipulation de ces Tableaux dans juste un peu, donc si vous avez besoin d'un apprêt sur les Tableaux, veuillez vous référer à mon dernier tutoriel sur les Tableaux.


Étape 12: Créer Des Astéroïdes

Nous savons que nous voulons créer 4 astéroïdes, nous allons utiliser une boucle while simple à créer et à mettre en place.

Ici, nous avons créer une nouvelle instance de l'Astéroïde symbole. Puis nous positionner de façon aléatoire (nous sommes en plaçant le x dans un rayon de 100 pixels de 450, et y en n'importe où à l'intérieur de la hauteur de la scène). Ensuite, nous utilisons la méthode addChild() pour qu'on puisse voir, et puis le stocker dans les astéroïdes Tableau à l'aide de push.

Si le nouvel Astéroïde() ce qui est nouveau pour vous, ne vous inquiétez pas, nous parlerons de l'affichage de la liste des rubriques dans le prochain AS3 101 tutoriel.

Avis pourquoi cette boucle fonctionne: il continue de fonctionner jusqu'à ce que la longueur du Tableau est de 4 (ou plus). Et à chaque itération de la Matrice, on finit par l'ajout d'un élément dans le Tableau. Par conséquent, la boucle s'exécute en 4 fois.

Pourquoi n'ai-je utiliser une boucle while et non pas d'une boucle for? En partie parce que cela semblait plus propre approche. En fin de compte, il n'a pas vraiment d'importance, mais depuis nous n'avons pas vraiment besoin de la variable compteur qui est généralement utilisée dans les boucles for, nous avons pu économiser un peu de taper du texte en utilisant une boucle while. Je vais vous avouer, si; c'est en partie parce qu'il semblait être un bon endroit pour utiliser une boucle while pour le tutoriel du saké. Rappelez-vous juste qu'il y a toujours plus d'une façon d'obtenir le même résultat, et le chemin que vous choisissez a autant à voir avec la préférence personnelle, comme il le fait avec "la bonne façon" de faire les choses (oh, et par la manière, il n'y a pas de "bonne façon" de faire les choses dans la programmation).


Étape 13: Créer une Animation Tique

Pour conduire le jeu, vous aurez besoin de faire beaucoup de choses à chaque fois la scène mises à jour, à la cadence. Nous allons mettre en place un écouteur d'événement pour l'événement ENTER_FRAME, et de faire la plupart de notre logique à la fonction d'écoute. Pour l'instant, il suffit de configurer le squelette:

Si vous le souhaitez, vous pouvez tester pour vous assurer la trace des feux à plusieurs reprises au fil du temps.


Étape 14: Déplacer le Navire

Avec le onTick fonction, nous pouvons commencer à bouger les choses. Nous allons commencer avec le navire.

Nous allons tout simplement les match du navire y de la souris y:

Cela demande à la scène pour la coordonnée y de la souris. Ceci est différent de poser une autre MovieClip pour les coordonnées de la souris; vous avez les valeurs de retour dans l'espace de coordonnées de la MovieClip vous avez demandé. À l'aide de l'étape, nous savons que nous sommes dans le principal espace de coordonnées.

Si vous testez-le maintenant, vous devriez voir que le navire se déplace vers le haut et vers le bas en réponse à la souris.


Étape 15: Commencer à Déplacer les Astéroïdes

Nous pouvons mettre l'astéroïde mouvement de logique dans la onTick de la fonction en tant que bien, mais c'est un peu plus compliqué. Tout d'abord, nous allons utiliser une boucle pour rouler à travers l'astéroïde Tableau. Ensuite, pour chaque astéroïde, nous allons ajouter (ou soustraire) le courant de x et y par un montant spécifique. Cela a pour effet de déplacer les choses progressivement avec chaque image, produisant l'illusion de mouvement en douceur au fil du temps. Placez le code suivant après le code de déplacer le navire:

Ici, nous sommes à l'aide de la boucle for each pour des raisons de commodité – nous n'avons pas besoin de connaître l'index de Tableau (et nous ne ferons pas, même après avoir rajouté cette boucle un peu). Test de ce film et de l'astéroïde devrait se déplacer, bien que leur mouvement est moins que l'idéal, pour être sûr. Les astéroïdes n'est pas voler en formation.


Étape 16: Envelopper les Astéroïdes Autour des Bords

Dans notre jeu en ce moment, le monde est plat et vous tout simplement de disparaître de la pointe et de ne jamais revenir si vous allez trop loin. Nous allons faire le tour du monde, alors qu'aller dans un sens signifie que vous aurez éventuellement montrer de nouveau venant de l'autre sens. Nous allons le faire en cochant la x et y de chaque astéroïde après le déplacement. S'ils sont placés de sorte que l'ensemble de l'astéroïde est hors de l'écran, nous allons régler le x ou y afin qu'ils reviennent sur l'autre côté. Remplir pour chaque boucle de la dernière étape avec ceci:

Nous n'quatre vérifie à l'aide des instructions if. Nous vérifions la position x de chaque astéroïde deux fois, une fois pour le bord gauche et une fois pour le bord droit. On vérifie ensuite la position y à deux fois, pour le haut et le bas. Dans tous les cas, nous allons vérifier pour voir si le Clip est complètement à côté de l'arête, puis repositionnement de sorte qu'il est complètement à côté de la face opposée.

Par exemple, prendre la première instruction if. Si la valeur de x est inférieure à 0, l'astéroïde est de commencer à aller hors de l'écran. Mais il pourrait être encore partiellement visible, donc nous avons besoin de vérifier que le x est à moins de 0 moins de la largeur de l'élément. C'est, si l'élément est de 100 pixels de large, nous devons nous assurer que l'astéroïde est au moins un x de -100 avant c'est complètement obscurci, à quel point on peut passer à l'action. Rappelez-vous, le point d'alignement doit être dans le coin supérieur gauche de l'élément.

Ainsi, au moment de repositionner un astéroïde qui s'est déplacé trop loin vers la gauche, nous avons simplement plop vers le bas à la largeur de scène. Ce doit être juste à la droite. Mais l'astéroïde se déplace vers la gauche, donc nous allons voir ce qu'il commence à entrer dans le stade sur l'image suivante.

Si vous regardez à travers les trois autres conditions, vous verrez un motif de sortir de cette logique.

Aller de l'avant et de tester maintenant. Alors que les astéroïdes sont toujours collés ensemble, ils ont au moins envelopper les bords.


Étape 17: Déplacer Les Astéroïdes Individuellement

Pour obtenir les astéroïdes indépendants de mouvement, chacun doit avoir sa propre vitesse, pas le "3" et "4" que nous avons branché en plus tôt. Pour ce faire, nous allons utiliser un objet pour représenter un seul astéroïde x et y de vitesses. Nous allons associer à chaque Point avec son astéroïde clip à l'aide d'un Dictionnaire. Pour commencer, créez le Dictionnaire à l'extérieur de la onTick fonction et avant la boucle while qui crée les astéroïdes.

Puis, juste après, nous allons mettre les valeurs dans le Dictionnaire. Nous allons revenir sur les astéroïdes Tableau (à l'aide pour chaque nouveau), et l'utilisation de l'astéroïde clip de la clé, et un nouveau Point de la valeur. Le Point x et y de valeurs sera déterminée à l'aide de nombres aléatoires.

Ensuite, nous allons mettre les valeurs dans le Dictionnaire. Nous allons ajouter une ligne à la boucle while qui définit les astéroïdes. Ci-dessous la boucle complète; les trois nouvelles lignes à la fin.

Maintenant, dans le onTick fonction, nous pouvons obtenir ces vitesses arrière du Dictionnaire, à l'aide de l'astéroïde clé, et d'appliquer les valeurs de vélocité pour la position:

Si cette étape est un peu déroutant, n'oubliez pas que j'ai recouvert de Dictionnaires dans mon tutoriel sur le conditionnel.

Voici le script en entier qu'il faut se tenir debout à l'heure actuelle:

Test le film maintenant, et les astéroïdes doivent avoir chacun leur propre voie de motion. Vous pouvez ajuster les valeurs utilisées pour mettre en place des Points pour essayer et ajuster la nature de la requête.


Étape 18: tirer une Balle

Maintenant, passons aux fragging! Lorsque le joueur clique sur leur bouton de la souris, nous allons déclencher une balle. Nous avons besoin de commencer par la mise en place d'un écouteur d'événement pour MOUSE_DOWN. Ajoutez la ligne suivante de retour où vous ajoutez les ENTER_FRAME auditeur:

Puis d'ajouter que le feu de la fonction à la fin du script:

Ceci appelle le "feu" de la fonction à chaque fois que le bouton de la souris est enfoncé. Pourquoi avons-nous ajouter à l'auditeur de la scène? Parce que le MOUSE_DOWN événement ne se déclenche si le curseur de la souris est sur l'objet d'affichage lorsque l'événement se produit. Ainsi, si nous avons ajouté l'événement à bord du navire, nous aurions beaucoup de raté incendies, chaque fois que la souris n'était pas directement sur le navire. À l'aide de l'étape assure que la souris sera toujours sur quelque chose (sauf si vous avez réellement se déplacer à l'extérieur de Flash Player).

La fonction de tir est un peu longue, mais relativement simple. Ici est l'endroit où nous profitons de l'identifiant de liaison mis en place pour la Balle symbole dans la bibliothèque. Nous créons une nouvelle Puce clip, la position, et ensuite utiliser la méthode addChild() pour s'assurer que nous pouvons réellement voir. Enfin, nous nous assurons de garder une trace de la balle en l'enfonçant dans les balles de Tableau.

Si vous trouvez cette logique un peu confus, ne vous inquiétez pas, nous parlerons de l'affichage de la liste des sujets dans notre prochain épisode de AS3 101. Ce code parfait de sens que si vous pouvez attendre quelques semaines.

Si vous testez maintenant, vous devriez voir que cela fonctionne, bien que les balles ne bouge pas. Nous allons changer ensuite.


Étape 19: Déplacer les Balles

De retour dans la onTick fonction, nous avons besoin de faire une boucle sur les balles Tableau et le déplacement de chaque balle. Cela rappelle le mouvement des astéroïdes, mais nous allons avoir besoin de traiter les choses un peu différemment. D'une part, nous savons exactement comment déplacer chaque balle, donc il n'est pas nécessaire de suivre les vitesses. Comme les balles se déplacent horizontalement vers la droite, il n'est pas nécessaire de vérifier à tout stade de limites autres que le bord droit. Pour des raisons qui seront plus claires dans l'étape suivante, nous allons aussi aller pour la "traditionnelle" pour la boucle au lieu de la boucle for each. Nous aurons besoin que d'index de Tableau, et un contrôle plus fin de la boucle, donc nous allons nous en tenir avec les classiques.

Ajouter ce bloc à la fin de votre onTick fonction:

Cela devrait être assez explicite; tout ce que nous faisons est d'obtenir tous les balle des balles de Tableau et en le déplaçant à 3 pixels vers la droite. Ensuite, si le x est tellement élevée qu'il est sur la droite, nous avons tracer un message. Nous allons faire notre propre jusqu'à la prochaine étape.

Tester le film, et les balles doivent se déplacer. Mais juste parce que les balles de quitter la scène, ils ne sont pas allés! Les traces doivent prouver que. Ils sont toujours dans le Tableau, toujours sur scène, et toujours en mouvement. Nous avons besoin de supprimer les thèses de puces à la fois la scène et le Tableau.


Étape 20: Nettoyer les Balles perdues

Supprimer la trace et de le remplacer par:

Cela permettra d'éliminer le clip de la scène, ce qui est bon. Mais nous avons aussi besoin de supprimer l'élément de la Matrice, sinon, le Tableau va continuer à croître et se développer, et nous allons continuer boucle de plus de plus de et plus de balles, et les premières balles nous avons le feu continue à bouger jusqu'à présent, même si elles ne peuvent pas être vus. Nous avons besoin de nous assurer de supprimer toutes les références à la balle, de sorte que le garbage collector peut retirer complètement de l'application. Cela permet de garder l'utilisation de la mémoire gérable.

Il est facile de supprimer un élément d'un Tableau, aussi longtemps que vous savez de son index (et vous pouvez toujours utiliser le Tableau de la méthode indexOf de trouver que). Nous venons d'utiliser la jonction de la méthode. Le second paramètre de la fonction splice est le nombre d'éléments à supprimer à partir du Tableau, en commençant par l'index spécifié dans le premier paramètre. Alors...

...et juste en dessous de la méthode removeChild ligne, qui va enlever de la même balle de l'élément dans le Tableau, ainsi.

Cependant, il y a un problème, et c'est une commune, même pour les développeurs expérimentés. Le problème, c'est subtil, mais assez pour jeter plus compliqué programmes. Disons que nous avons 10 balles dans le Tableau (indices de 0 à 9), et nous avons déterminé que la balle à l'index 2 doit être supprimé. La variable i est de 2. Nous avons donc supprimer l'index 2. Les Indices de 3 à 9 faites glisser vers l'avant afin de combler le vide, en devenant les indices de 2 à 8.

Cependant, la boucle roule sur, et i est incrémenté. j'ai maintenant 3, et alors nous obtenons le troisième élément de la Matrice. Si vous avez été attentif, vous remarquerez que l'élément directement après l'élément qui a été supprimé n'est jamais toute l'attention. Il a été à l'indice 3 quand j'étais à 2, et puis il glissa l'index 2 juste que je suis devenu de 3. Maintenant, dans notre cas, il suffit d'aller chercher dans la prochaine exécution de la onTick fonction, mais c'est une chose la plus délicate qui a empêché de nombreux-un-programmeur.

Pour résoudre ce problème, il suffit de décrémenter i à la fin de la boucle, après le retrait de la balle.

À l'aide de notre exemple précédent, cela donnerait i de l'arrière 2 à 1, juste après l'article 3, devenu l'article 2. Puis j'ai est incrémenté que la boucle s'exécute à nouveau, et est maintenant de 2. Il peut alors être utilisé pour ramasser l'élément suivant.

Il est à noter que pour que cela fonctionne, nous avons besoin de faire exactement ce que je déconseillées et utiliser la longueur du Tableau directement dans la boucle de la déclaration. Si nous avions mis de la longueur dans une variable, comme je l'ai suggéré, il ne serait pas en mesure de ramasser les changements dans la longueur du Tableau. Dans la plupart des cas, vous ne modifiez pas la longueur du Tableau en boucle sur elle, donc l'avis que j'ai donné est le son. Dans ce cas, cependant, il pourrait causer plus de problèmes qu'elle n'en résoudra.

L'ensemble de la puce boucle devrait ressembler à ceci:

Tester le film pour s'assurer que tout fonctionne. Si tout s'est bien passé, les choses apparaissent exactement comme ils l'ont fait la dernière fois, seulement, maintenant, nous savons que notre gestion de la mémoire est saine.


Étape 21: Vérifier Les Collisions

Pour garder les choses simples, nous ne vous inquiétez pas à propos de collisions entre astéroïdes et le navire. Nous allons nous concentrer sur les balles et les astéroïdes.

Nous allons une fois de plus à ajouter du code à la onTick fonction. Après la balle de circulation de la boucle, nous avons travaillé sur les deux dernières étapes, ajoutez ce code:

C'est tout à fait un peu de code, donc nous allons le décomposer.

Nous commençons par boucler sur les astéroïdes Tableau. Parce que nous sommes vérifier les collisions et potentiellement la suppression des astéroïdes dans le cadre de la boucle, nous sommes à l'aide d'un standard pour la boucle tout en évitant la variable pour stocker la longueur du Tableau.

Et puis, nous avons d'une référence à l'astéroïde pour cette itération. Et puis on lance une boucle imbriquée. Notez l'utilisation de la variable j pour garder cette boucle imbriquée de la variable compteur séparé de l'extérieur de la boucle. Et la première chose à faire dans la boucle imbriquée est d'obtenir une référence à une balle.

Ce qu'il accomplit jusqu'à présent est la capacité de mélanger et assortir chaque astéroïde-balle combinaison. Nous ne nous soucions pas de puce à puce, ou astéroïde est-à-astéroïde, donc entre toutes les combinaisons possibles de i et j, nous devrions être en mesure de comparer tous les la balle à chaque astéroïde.

Et la comparaison est l'étape suivante: nous utilisons un simple hitTestObject appel sur l'astéroïde pour voir si elle est de frapper la balle. Si elle l'est, nous exécutons le reste du code de la propriété par l'état. Sinon, nous venons de continuer à rouler à travers la boucle et de vérifier la combinaison suivante.

Si nous recevons un coup, nous utilisons la méthode removeChild pour enlever visuellement les deux éléments. Et puis, nous utilisons épissure de les retirer de leurs Tableaux respectifs.

Enfin, nous décrémenter i, tel que discuté précédemment. Mais pourquoi n'avons-nous pas de décrémentation j? Parce que si nous avons trouvé un hit pour l'astéroïde, puis clairement pas d'autre balle peut frapper. Il n'y a aucun intérêt à continuer de boucle sur les balles de la Matrice de regarder pour sorties entre déjà déclaré en état de mort astéroïde et une autre balle. Donc, au lieu de cela, nous utilisons le mot-clé break et arrêter la balle boucle où il est. Qui nous permet de choisir la boucle externe et vérifiez à nouveau le prochain astéroïde.


Étape 22: Avons-Nous Gagner?

Une dernière étape, et c'est de vérifier pour voir si nous avons gagné. Nous pouvons dire en cochant la astéroïdes longueur du Tableau après être passé par l'étape précédente de la boucle. Si la longueur est 0, alors nous n'avons pas plus d'astéroïdes et nous avons gagné!

À ce stade, on peut retirer le ENTER_FRAME à l'écoute, et de montrer les félicitations plaque en tournant, elle est visible true à la propriété, et s'assurer qu'il est sur le dessus de tous les autres éléments visuels en utilisant setChildIndex.

Ci-dessous le script complet, pour la référence:


Étape 23: En Résumé...

Maintenant vous devriez être un habitué de la pro boucles. Combinez cela avec votre connaissance de Tableaux et vous êtes bien sur votre chemin à la manipulation du contenu dynamique. En fait, c'est là que les choses sont en tête, avec AS3 101. Ensuite, il ya la liste d'affichage, et après que XML. Avec tout ce que vous avez appris jusqu'ici dans cette série, avec ces deux, vous vous demanderez comment vous avez obtenu le long bâtiment de sites Flash avant. Piloté par les données de contenu est une expérience libératrice.

Nous n'avons jamais eu dans un sujet connu comme les itérateurs, qui sont des objets dédiés à la traversée des Tableaux et d'autres collections sans boucle, comme nous l'avons fait ici. Ils ont l'avantage de garder le Tableau lui-même hors de la vue et protégé de la destructrice des mains, mais ils sont un peu d'un sujet avancé. Je le mentionne parce que d'autres langues ne fournissent itérateur ou énumérateur des objets, et dans ces deux langues, il est plus courant d'une boucle sur une collection à l'aide de l'itérateur. Il est possible (et même souhaitable, à mon avis) pour créer votre propre itérateurs dans ActionScript. Mais nous avions besoin de tracer la ligne quelque part pour ce tutoriel.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.