Share
Dans ce didacticiel, vous apprendrez à créer votre propre version du jeu classique Whack-a-Mole. Seulement, nos malheureuses créatures de prédilection seront les vers. Vous serez en mesure de modifier la vitesse du jeu et les zones de résultats des vers.
Nous utiliserons les classes communes ActionScript 3, spécialement Événements de souris pour créer un divertissement Whack une taupe comme le jeu en flash
Ouvrez Flash et créez un document de 480 pixels de large, 320 pixels de haut. Définir le taux de trame à 24fps.
(Remarque: il y a une erreur dans l'image ci-dessus; la largeur et la hauteur sont inverses! Merci à Roel Traa de l'avoir signalé.)
Une interface simple et conviviale comprenant plusieurs formes, boutons et MovieClips sera utilisée. Continuez avec les étapes suivantes pour créer cette interface graphique..
Sélectionnez le Outil Rectangle (R) pour créer un rectangle de 320x480px # CC9866, # BA7743 et le centrer sur la scène.
Utilisez le Outil texte (T) pour ajouter un titre en utilisant votre police préférée. Vous pouvez également utiliser certains graphiques du jeu pour le rendre plus agréable. Le graphique de ver utilisé dans ce tutoriel a été téléchargé à partir d’ici sous une Creative Commons Licence.
Utilisez à nouveau le Outil texte pour créer trois boutons comme indiqué dans l'image ci-dessus. Convertissez-les en boutons et donnez-leur des noms d'instances descriptifs pour pouvoir les utiliser facilement plus tard dans le code. Convertir les graphiques en phase en un seul MovieClip et nommez-le TitleView, n'oubliez pas de vérifier la Exporter pour la boîte ActionScript.
Effacez la dernière vue sauf le fond et créez une série de Champs de texte dynamiques comme indiqué dans l'image, attribuez-leur un nom descriptif et convertissez-le en bouton. Utilisez le Outil Rectangle (R) pour créer un bouton fléché qui sera utilisé pour revenir à la Écran titre.
le Crédits l'écran apparaîtra devant le Titre Écran, utilisez les graphiques et les polices utilisés auparavant pour le créer. Nomme le CréditsVoir et n'oubliez pas de vérifier la Exporter pour ActionScript boîte.
De simples graphiques caricaturaux sont utilisés dans le Jeu Écran, il n’existe pas vraiment de procédure pour créer ce graphisme, utilisez simplement votre imagination et les outils de dessin Flash pour créer quelque chose comme l’image ci-dessus. Chaque trou de l’écran de jeu est un MovieClip qui contient une animation du ver qui sort, c’est essentiellement une simple animation image par image, assurez-vous de vérifier le source pour une meilleure compréhension.
Une alerte sera affichée lorsque tous les Worms seront affichés. Le résultat final sera affiché. Utilisez le Outil Rectangle pour le créer et ajouter un nom descriptif au dernier TextField, définissez son nom d'instance sur AlertView et marquer le Exporter pour ActionScript boîte.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans le flash, ce qui augmentera les performances tout en étant plus facile à utiliser..
Vous pouvez télécharger TweenNano depuis son site officiel.
Nous utiliserons les effets sonores pour améliorer le jeu. Vous pouvez trouver le son utilisé dans cet exemple sur Soungle.com à l'aide du mot clé frappé.
Nous allons rendre notre application interactive en utilisant une classe externe, ajouter son nom à la Classe champ dans le Publier section de la Propriétés panneau pour associer la FLA à la classe de document Main.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Créez votre structure de classe de base pour commencer à écrire votre code.
package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; importer com.greensock.easing.Expo;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet, certains de leurs noms s’expliquent d'eux-mêmes, il n'y aura donc pas de commentaire.
private var titleView: TitleView = new TitleView (); options de var privées: OptionsView; crédits var privés: CreditsView; private var lastSelected: TextField; // dernière vitesse sélectionnée dans l'écran des options private var lastSelected2: TextField; // la dernière zone sélectionnée dans l'écran des options private var var hitSize: Number = 1; // le masque de taille de frappe est à pleine échelle au démarrage private var timer: Timer = new Timer (1400); // heure par défaut pour que les vers apparaissent sous forme de trous de var privés: Vecteur.= nouveau vecteur. (); // stocke les 8 trous de la scène private var var currentWorms: int = 0; // vers déjà montrés private var wormsHit: int = 0; private var totalWorms: String = '10'; // nombre total de vers à afficher
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe.
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void addChild (titleView); trous.pousser (h1, h2, h3, h4, h5, h6, h7, h8); startButtonListeners ();
Nous allons commencer par ajouter les écouteurs de la souris aux boutons de la vue du titre, cela nous mènera à l'écran du jeu, des options ou des crédits..
fonction finale privée startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.addEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.removeEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
le Les options L'écran est interpolé lorsque l'utilisateur clique sur le bouton des options. Un écouteur à la souris est ajouté au bouton fléché pour le supprimer lorsque l'opération est terminée..
fonction finale privée addOptions (e: MouseEvent): void options = new OptionsView (); addChild (options); TweenNano.from (options, 0.3, x: stage.stageWidth, onComplete: function (): void options.backBtn.addEventListener (MouseEvent.MOUSE_UP, hideOptions);); optionsListeners ();
Ces auditeurs sont ajoutés lorsque le Les options Écran montré, ils manipulent les boutons sur scène. Plus de son comportement dans les prochaines étapes.
fonction finale privée optionsListeners (action: String = 'add'): void if (action == 'add') options.slowBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea);
Les options par défaut sont définies par ces lignes, elles définissent les boutons actuellement sélectionnés qui sont lents et gros.
lastSelected = options.slowBtn.slowTF; lastSelected2 = options.bigBtn.bigTF;
Un paramètre déterminera si les écouteurs sont ajoutés ou supprimés, les lignes suivantes sont exécutées si ce paramètre n'indique pas l'ajout des écouteurs..
else options.slowBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea);
Le bouton fléché enlèvera le Les options écran lorsque vous cliquez dessus.
fonction finale privée hideOptions (e: MouseEvent): void TweenNano.to (options, 0,3, x: stage.stageWidth, onComplete: fonction (): void options.removeEventListener (MouseEvent.MOUSE_UP, hideOptions); removeChild (options) ; options = null;);
Cette fonction est activée lorsque les touches de vitesse sont enfoncées. Sa première partie modifie la couleur du texte des touches, l'option actuelle est blanche et la nouvelle valeur sélectionnée devient jaune..
fonction finale privée changeSpeed (e: MouseEvent): void / * Change la cible et la dernière couleur sélectionnée * / lastSelected.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966;
C’est la deuxième partie de la fonction de vitesse, elle détecte le bouton sur lequel on clique en vérifiant son nom et augmente / diminue la Minuteur en conséquence.
if (e.target.name == 'slowTF') timer = new Timer (1400); lastSelected = e.target as TextField; else if (e.target.name == 'mediumTF') timer = new Timer (1100); lastSelected = e.target as TextField; else if (e.target.name == 'fastTF') timer = new Timer (800); lastSelected = e.target as TextField;
La fonction suivante est exécutée lorsqu'un bouton de la sélection de zone active est cliqué. Il se comporte de la même manière que la dernière fonction.
fonction finale privée selectHitArea (e: MouseEvent): void / * Change la cible et la dernière couleur sélectionnée * / lastSelected2.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966; / * Détecter le bouton cliqué et modifier la zone active en conséquence * / if (e.target.name == 'smallTF') hitSize = 0; lastSelected2 = e.target as TextField; else if (e.target.name == 'mediumTF') hitSize = 0.5; lastSelected2 = e.target as TextField; else if (e.target.name == 'bigTF') hitSize = 1; lastSelected2 = e.target as TextField;
le Crédits l’écran s’affiche lorsque l’utilisateur clique sur le bouton des crédits, un écouteur de souris est ajouté à la liste complète. MovieClip l'enlever.
fonction finale privée showCredits (e: MouseEvent): void titleView.optionsB.visible = false; titleView.creditsB.visible = false; titleView.playB.visible = false; crédits = new CreditsView (); addChild (crédits); TweenNano.from (credits, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Quand le Crédits l'écran est cliqué, il sera interpolé et retiré de la scène.
fonction finale privée hideCredits (e: MouseEvent): void TweenNano.to (crédits, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsB.visible = true; titleView.playB.visible = titleView.optionsB.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (crédits); credits = null;);
Arrêtons-nous ici pour faire un test rapide et pour nous assurer que notre code de jeu fonctionne:
Gardez à l'esprit que certaines lignes ont été commentées car certaines fonctions n'ont pas encore été créées..
Rappelez-vous que les jalons sont inclus dans les fichiers source, donc si pour une raison quelconque votre fichier ne l'imite pas, jetez un coup d'œil à la source pour voir ce qui peut en résulter.
Les lignes suivantes suppriment le Titre écran et quitte le Jeu Écran visible. Il appelle également une fonction pour préparer le jeu à jouer.
Accentsconagua
fonction finale privée showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: fonction (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nul;); prepareWorms (); Nous utilisons ici une déclaration pour ajouter un Souris Listener à chaque trou MovieClip dans la scène. Cela rendra les Worms cliquables.
fonction finale privée prepareWorms (): void pour (var i: int = 0; i < 8; i++) /* Add Mouse Listeners */ holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);
Comme le trou MovieClip a plus d’une image, il faut l’arrêter pour empêcher tous les vers de s’afficher en même temps.
/ * Stop Worms At Frame 1 * / holes [i] .gotoAndStop (1); startTimer ();
Ce minuteur lancera le compte à rebours et fera apparaître les vers de manière aléatoire dans la scène..
fonction finale privée startTimer (): void timer.addEventListener (TimerEvent.TIMER, showWorm); timer.start ();
Ce code vérifie si les vers affichés n’ont pas encore dépassé la limite et appelle un Alerte si vrai.
fonction finale privée showWorm (e: TimerEvent): void if (currentWorms == int (totalWorms)) alert (); else var randomHole: int = Math.floor (Math.random () * 8); // Utilisé pour calculer quel ver apparaîtra
La zone de contact sélectionnée dans le Les options l'écran sera changé ici sur chaque ver en utilisant les propriétés d'échelle d'AS3.
holes [randomHole] .addFrameScript (1, function () holes [randomHole] .worm.hArea.scaleX = hitSize; holes [randomHole] .worm.hArea.scaleY = hitSize;);
Quelques millisecondes s’écouleront là où le ver sera visible. Lorsque le MovieClip aura atteint sa dernière image, il s’arrêtera et reviendra à la première image..
trous [randomHole] .addFrameScript (holes [randomHole] .totalFrames - 1, function () trous [randomHole] .gotoAndStop (1);); trous [randomHole] .play (); currentWorms ++;
Cette fonction gère quand un ver est cliqué, il va fondamentalement jouer un son, augmenter le score et cacher le ver à nouveau.
fonction finale privée wormHit (e: MouseEvent): void if (e.target.name == 'hArea' || e.target.name == 'ver') var hit: Hit = new Hit (); hit.play (); wormsHit ++; e.target.parent.gotoAndPlay (18); scoreTF.text = wormsHit + '/' + totalWorms;
Vous pouvez ajouter un bonus personnalisé si tous les vers ont été touchés en modifiant les lignes de code suivantes..
if (totalWorms == String (wormsHit)) alert ();
Cette fonction arrêtera le jeu et révélera le score final, elle ajoutera également un écouteur à la souris pour réinitialiser le jeu en cas de clic..
fonction finale privée alert (): void timer.stop (); var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, redémarrer); addChild (alerte); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, facilité: Expo.easeOut);
La fonction suivante rechargera le swf, en redémarrant une variable, une méthode et en retournant à la Écran titre.
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Comme vous pouvez le constater, de nombreuses variables / paramètres du jeu peuvent être modifiés et adaptés à vos besoins. Essayez de créer votre propre version du jeu.!
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
