Share
Eh bien, nous approchons de la fin de 2009 et, comme toujours, ces derniers jours de décembre sont une période de réflexion, de souvenirs et de nostalgie. Chez Activetuts +, nous nous efforçons d’être avant-gardistes, d’évoluer avec le temps et d’adopter les technologies. Cela dit, il est également important de faire appel à tout nos lecteurs, alors pour ceux d'entre vous qui n'ont pas encore fait le saut, terminons l'année avec un peu d'ActionScript 2.0!
Dans ce tutoriel, vous allez créer un jeu de serpent AS2 simple.
Lancez Flash, puis cliquez sur Créer un nouveau: fichier Flash (Actionscript 2.0). Vous pouvez régler la taille de la scène à votre guise - j'ai réglé la mienne à 500 x 350. Je vous conseille de régler le framerate à 30fps.
Maintenant, vous pouvez soit décider de suivre cette étape et dessiner vous-même les MovieClips requis, soit vous pouvez sauter et utiliser ceux que j'ai créés. Si vous voulez utiliser ceux que j'ai créés, vous pouvez les trouver dans le fichier source. Ajoutez-les simplement à la bibliothèque et faites-les glisser sur la scène. Si vous voulez dessiner vous-même: vous n’avez pas à dessiner littéralement comme je l’ai fait, mais assurez-vous de respecter les tailles..
La première chose que nous allons créer est la fosse pour le serpent. Créez un rectangle de 400 x 250 et convertissez-le en MovieClip. Assurez-vous de faire attention au point d'enregistrement. le faire en haut à gauche.
Assurez-vous de donner à la fosse à serpents le nom de l'instance fosse aux serpents et alignez-le légèrement au-dessus du centre de la scène (afin que nous puissions ajouter du texte en dessous, sans gâcher l'esthétique).
Dessinez un carré (peut-être avec des coins arrondis) sans bordure (format 25 x 25) et copiez-le pour en avoir exactement 2 identiques. Convertir l'un d'eux en un MovieClip. Encore une fois, faites attention à l'enregistrement en haut à gauche.
Assurez-vous de lui donner le nom de l'instance bodypart0 et vérifiez que sa taille est de 25 x 25.
Entrez le "tête" MovieClip. Une fois dedans, ajoutez cette ligne de code à la première et unique image:
Arrêtez();
Maintenant, dessinez un petit visage sur la tête du serpent afin de pouvoir le distinguer des autres.
Ajoutez un deuxième cadre au MovieClip "principal" et dessinez sur ce cadre un visage triste ou mort..
Rappelez-vous le carré dupliqué que vous avez créé à l'étape 3? Nous allons le convertir en un MovieClip maintenant. Faites de nouveau attention au point d'enregistrement.
Assurez-vous de lui donner le nom de l'instance partie du corps.
Créez un champ de texte dynamique sous le coin droit de la fosse à serpents. Assurez-vous de définir la variable sur But. Assurez-vous également que le champ est suffisamment large pour plusieurs caractères et aligné à droite. Le reste des paramètres peut être réglé selon votre propre style - J'ai utilisé Tahoma 24 Bold.
Puisqu'il s'agit d'un champ de texte dynamique, nous devrons intégrer la police. Cliquez sur le bouton incorporer dans le panneau des propriétés (où vous venez de définir la variable et le style du texte)..
Vous verrez le popup montré ci-dessous. Assurez-vous de sélectionner Chiffres [0… 9].
Tracez un cercle bleu sans bordure de format 25 x 25, puis effacez le centre à l’aide de la gomme. Maintenant, sélectionnez le cercle qui reste et convertissez-le en MovieClip. Alternativement, vous pouvez concevoir un morceau de nourriture pour vous, tant qu'il reste 25 x 25.
Donnez à la nourriture un nom de cas surprenant aliments. Vérifiez que sa taille est de 25 x 25.
Gauche-dessous de la fosse aux serpents semblait être un bon endroit pour mettre des indicateurs. Tapez simplement le texte statique "Utilisez les touches fléchées pour vous déplacer" ici. Je sais que les touches fléchées ne fonctionnent pas encore, mais nous y reviendrons dans un instant. je promets!
Dessinez un carré blanc (quelque part en dehors de la scène, pour l'instant) et ajoutez le texte "Tu es mort!" à cela. Ceci est le popup que nous afficherons après que quelqu'un ait perdu un jeu.
Convertissez-le en MovieClip et donnez-lui le nom de l'instance. apparaitre ainsi que. À des fins d'alignement, j'ai défini le point d'enregistrement au centre.
Double-cliquez sur le popup que vous venez de créer pour le saisir. Une fois dedans, créez un champ de texte dynamique (variable = But) et un bouton lisant le texte Rejouer.
Le bouton devrait recevoir le nom de l'instance à nouveau.
À l'intérieur du bouton, vous pouvez créer un état "Over" légèrement plus sombre et un état "Down" encore plus sombre..
Félicitations, vous avez créé tous les objets visuels nécessaires au jeu Snake. Passons maintenant au code!
Avant de vous lancer un morceau de code, je vais vous dire quoi en faire. Tout le code de ce didacticiel s’applique à la première et unique image de votre film. Pas besoin de l'attacher à des boutons ou quoi que ce soit. Maintenant, jetez un oeil à ce morceau de code ActionScript.
Note de l'éditeur: Désolé, le surligneur en syntaxe de code ne souhaite pas afficher ce bloc ActionScript particulier dans FireFox. Regardez le code ici.
En un mot, ce morceau de code a les effets suivants. Tout d’abord, l’objet original est rendu invisible. Nous utiliserons bientôt les doublons. Certaines valeurs par défaut sont (re) définies, tous les doublons du jeu précédent sont supprimés. Dans la boucle do while (), la nourriture et bodypart0 (la tête) reçoivent une coordonnée x et y. Si cela correspond (ils se trouvent donc exactement au même endroit), une nouvelle coordonnée leur est donnée, jusqu'à ce que nous n'ayons plus de correspondance. Ensuite, les tableaux sont configurés dans lesquels nous allons contenir les coordonnées x et y de bodyparts.
Dans ce morceau de code, nous créons un objet keyListener, que nous attachons à Key, qui représente le clavier. Chaque fois qu'une touche est enfoncée, la fonction onKeyDown est déclenchée. À partir de la fonction getCode (), nous allons déterminer quelle touche a été enfoncée puis définir la direction en fonction de cela. Nous allons stocker cela dans le direction variable pour une utilisation ultérieure. Rappelez-vous: tout le code de ce tutoriel est sur la première et unique image de votre film.
keyListener = new Object (); keyListener.onKeyDown = function () keycode = Key.getCode () if (code de la clé == 37) direction = 'gauche' else si (code de la clé == 38) direction = 'haut' autre si (code de la clé == 39) direction = 'right' else if (code de clé == 40) direction = 'down'; Key.addListener (keyListener);
La fonction ici est une grande. Il est exécuté sur chaque image, mais ne fait vraiment que quelque chose toutes les 5 images. Il vérifie si le serpent ne sort pas de la boîte, puis déplace tous les corps vers leur nouvelle position. Il vérifie ensuite si la nourriture est là aussi, puis la mange en utilisant la fonction eat () dont nous parlerons plus tard. Ensuite, il vérifie si le serpent s'écrase contre un mur et, enfin, il vérifie si le serpent se pique dans la queue. Toutes ces fonctions seront bientôt ajoutées (insideSnake (), dead (), etc.). Rappelez-vous: tout le code de ce tutoriel est sur la première et unique image de votre film.
Accentsconagua
this.onEnterFrame = function () if (jeu) if (framecount / 5 == Math.ceil (framecount / 5)) if (! (bodypart0._y <= snakepit._y && direction == 'up') && !(bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2 && direction == 'down') &&! (bodypart0._x + bodypart0._width> = snakepit._x + snakepit._width - 2 && direction == 'right') &&! ( bodypart0._x <= snakepit._x && direction == 'left')) bodypartsy[0] = bodypart0._y; bodypartsx[0] = bodypart0._x; for (i=bodypartsy.length-1;i > 0; i--) eval ('bodypart' + i) ._ y = bodypartsy [(i-1)] eval ('bodypart' + i) ._ x = bodypartsx [(i-1)] bodypartsy [i] = eval ( 'bodypart' + i) ._ y bodypartsx [i] = eval ('bodypart' + i) ._ x if (food._x == bodypart0._x && food._y == bodypart0._y) eat () if (direction) if (direction == 'up') if (bodypart0._y <= snakepit._y) dead() else bodypart0._y-= bodypart0._width else if (direction == 'down') if (bodypart0._y+bodypart0._height >= snakepit. ._x + snakepit._width - 2) dead () else bodypart0._x + = bodypart0._width autrement if (direction == 'gauche') if (bodypart0._x <= snakepit._x) dead() else bodypart0._x-= bodypart0._width if (game) if (insideSnake(bodypart0._x,bodypart0._y,true)) dead() framecount++ Celui-ci est agréable et facile. Il exécute les actions à prendre lorsque le serpent meurt: le score doit être défini dans la fenêtre contextuelle, la fenêtre contextuelle affichée, le cadran mort du serpent affiché et la variable de jeu définie sur false (à la fin du jeu).
function dead () popup.score = 'score:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) game = false;
La fonction ci-dessous est déclenchée dans la fonction onEnterFrame dont nous avons discuté précédemment, lorsque la nourriture est ramassée. Il duplique d’abord une partie du corps du serpent, puis le positionne à l’emplacement du dernier corps du corps (afin qu’il se joigne à la ligne suivante). Ses coordonnées sont ajoutées aux coordonnées contenant les tableaux, et la nourriture est repositionnée (quelque part pas à l'intérieur du serpent!). En outre, le score est mis à jour.
function eat () duplicateMovieClip (bodypart, 'bodypart' + bodypartsy.length, this.getNextHighestDepth ()) bodypart0.wapDepths (this.getNextHighestDepth ()) eval ('bodypart' + bodyparts.local). '+ (bodypartsy.length-1)) ._ y eval (' bodypart '+ bodypartsx.length) ._ x = eval (' bodypart '+ (bodypartsy.length-1)) ._ x bodypartsy.push (eval (' bodypart ') + bodypartsy.length) ._ y) bodypartsx.push (eval ('bodypart' + bodypartsx.length) ._ x) do food._x = snakepit._x + Math.floor (((snakepit._width-food._width) / food._width) * Math.random ()) * food._width food._y = snakepit._y + Math.floor (((snakepit._height-food._height) / food._height) * Math.random ()) * food._height while (insideSnake (food._x, food._y)); score = bodypartsx.length-1 Cette fonction vérifie simplement si les coordonnées saisies correspondent aux coordonnées des parties du corps du serpent. Si skiphead est défini sur true, il est autorisé à faire correspondre les coordonnées de la tête (lors de la vérification si la tête se mord la queue, cela est pratique).
