Share
În acest tutorial, veți învăța cum să vă creați propria versiune a jocului clasic Whack-a-Mole - numai, creaturile noastre nefericite de alegere vor fi viermi. Veți putea modifica viteza jocului și cutiile de vierme ale viermilor.
Vom utiliza clase comune de tip ActionScript 3, în mod special Mouse-ul evenimentelor pentru a crea o distracție Rătăciți un mol cum ar fi jocul în Flash
Deschideți Flash și creați un document de 480 pixeli lățime și 320 pixeli înălțime. Setați rata cadrelor la 24fps.
(Notă: există o greșeală în imaginea de mai sus, lățimea și înălțimea sunt greșite! Mulțumită lui Roel Traa pentru faptul că a indicat acest lucru.)
O interfață simplă și prietenoasă va fi utilizată, având mai multe forme, butoane și MovieClips, continuați cu pașii următori pentru a construi această interfață grafică.
Selectează Instrumentul dreptunghiului (R) pentru a crea un dreptunghi 320x480px # CC9866, # BA7743 și centrați-l în scenă.
Folosește Instrument de text (T) pentru a adăuga un titlu utilizând fontul preferat. Puteți utiliza, de asemenea, unele dintre grafica jocului pentru a face mai frumos. Graficul vierme folosit în acest tutorial a fost descărcat de aici sub a Creative Commons Licență.
Utilizați din nou butonul Instrument de text pentru a crea trei butoane, după cum se arată în imaginea de mai sus. Transformați-le în butoane și dați-le nume de instanțe descriptive pentru a le folosi mai ușor în cod ulterior. Transformați graficele în scenă la un singur MovieClip și numește-o TitleView, nu uitați să verificați Exportați pentru caseta ActionScript.
Ștergeți ultima vizualizare cu excepția fundalului și creați o serie de Suprafețele dinamice de text după cum se arată în imagine, să le dați nume descriptive de instanță și să le convertiți în butoane. Folosește Instrumentul dreptunghiului (R) pentru a crea un buton săgeată care va fi folosit pentru a vă întoarce la Ecranul titlului.
credite ecranul va apărea în fața Titlu Ecran, utilizați graficele și fonturile utilizate anterior pentru al crea. Numeste CreditsView și nu uitați să verificați Exportați pentru ActionScript cutie.
Grafica grafică simplă este utilizată în Joc Ecran, nu există o procedură de creare a acestei grafice, ci doar să folosiți imaginația și instrumentele Flash pentru a crea ceva asemănător imaginii de mai sus. Fiecare gaură din ecranul de joc este a MovieClip care conține o animație a viermilor care iese, este, practic, o animație simplă în funcție de cadru, asigurați-vă că ați verificat sursa pentru o mai bună înțelegere.
O alertă va fi afișată când toate vierii au arătat că va afișa scorul final la care ați ajuns. Folosește Instrumentul dreptunghiului pentru ao crea și a adăuga un nume descriptiv la TextField de jos, setați numele instanței acestuia AlertView și marchează Exportați pentru ActionScript cutie.
Vom utiliza un motor tween diferit de cel implicit inclus în bliț, ceea ce va crește performanța și va fi mai ușor de utilizat.
Puteți descărca TweenNano de pe site-ul său oficial.
Vom folosi Sound Effects pentru a îmbunătăți sentimentul jocului, puteți găsi sunetul folosit în acest exemplu în Soungle.com folosind cuvântul cheie lovit.
Vom face aplicația interactivă utilizând o clasă externă, adăugați-o la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Creați structura claselor de bază pentru a începe să scrieți codul.
pachet import flash.display.Sprite; clasa publică principală extinde Sprite funcția publică Main (): void // code constructor
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; importul flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Expo;
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele, unele dintre ele sunt explicate de sine, astfel încât nu va fi nici un comentariu acolo.
private var titleView: TitluView = new TitleView (); opțiuni private var: OptionsView; private cred credite: CreditsView; private var lastSelected: TextField; // ultima viteză selectată în ecranul de opțiuni priv var varSelected2: TextField; // ultima zonă de selectare selectată în ecranul opțiunilor private var hitSize: Number = 1; // masca de mărime a loviturii este la scară completă la start timer privat: Timer = timer nou (1400); // timpul implicit pentru ca viermii să apară ca niște găuri particulare: Vector.= Vector nou. (); // stochează cele 8 găuri în etapa private var currentWorms: int = 0; // viermii au fost deja afișați privat var wormsHit: int = 0; private var totalWorms: String = '10'; // total de viermi de afișat
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută atunci când faceți o instanță a unui obiect sau executați utilizând clasa Dococument.
Acesta numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
funcția publică finală Principal (): void addChild (titleView); holes.push (h1, h2, h3, h4, h5, h6, h7, h8); startButtonListeners ();
Vom începe prin a adăuga ascultătorii mouse-ului la butoanele din ecranul de titlu, ceea ce ne va duce la ecranul de joc, opțiuni sau credite.
funcția finală privată startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titluView.optionsB.addEventListener (MouseEvent.MOUSE_UP, addOptions); titluView.playB.addEventListener (MouseEvent.MOUSE_UP, showGameView); altceva titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.removeEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
Opțiuni Ecranul este completat atunci când utilizatorul face clic pe butonul de opțiuni, un buton săgeată este adăugat la butonul săgeată pentru al elimina atunci când este terminat.
funcția finală privată addOptions (e: MouseEvent): void options = new OptionsView (); addChild (opțiuni); TweenNano.from (opțiuni, 0.3, x: stage.stageWidth, onComplete: funcție (): void options.backBtn.addEventListener (MouseEvent.MOUSE_UP, hideOptions);); optionsListeners ();
Acesti ascultatori sunt adaugati atunci cand Opțiuni Pe ecran sunt afișate, se ocupă de butoanele de pe scenă. Mai mult din comportamentul său în etapele următoare.
opțiuni private finaleListeneri (acțiune: String = 'adăuga'): 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);
Opțiunile prestabilite sunt setate de aceste linii, acestea stabilesc butoanele selectate în prezent, care sunt lente și mari.
lastSelected = options.slowBtn.slowTF; lastSelected2 = options.bigBtn.bigTF;
Un parametru va determina dacă ascultătorii sunt adăugați sau eliminați, următoarele linii sunt executate dacă acel parametru nu indică adăugarea ascultătorilor.
altceva 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);
Butonul săgeată va elimina Opțiuni ecranul când ați făcut clic.
funcția finală privată hideOptions (e: MouseEvent): void TweenNano.to (opțiuni, 0.3, x: stage.stageWidth, onComplete: function (): void options.removeEventListener (MouseEvent.MOUSE_UP, hideOptions) ; opțiuni = null;);
Această funcție rulează când butoanele de viteză sunt apăsate, prima sa parte schimbă culoarea textului butoanelor, modifică opțiunea curentă pe alb și noua valoare selectată în galben.
schimbare finală a funcției finaleSpeed (e: MouseEvent): void / * Schimbarea țintă și ultima selectată Color * / lastSelected.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966;
Aceasta este cea de-a doua parte a funcției de viteză, detectează butonul clic pe verificarea numelui și mărirea / micșorarea Cronometrul în consecinţă.
dacă (e.target.name == 'slowTF') timer = nou Cronometru (1400); lastSelected = e.target ca TextField; altfel dacă (e.target.name == 'mediumTF') timer = new Timer (1100); lastSelected = e.target ca TextField; altfel dacă (e.target.name == 'fastTF') timer = new Timer (800); lastSelected = e.target ca TextField;
Următoarea funcție rulează când se face clic pe un buton din selecția zonei de lovire. Se comportă în același mod ca și ultima funcție.
funcția finală privată selectHitArea (e: MouseEvent): void / * Modificarea țintă și ultima selectată Color * / lastSelected2.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966; / * Detectarea butonului clic și modificarea zonei de lovire în consecință * / if (e.target.name == 'smallTF') hitSize = 0; lastSelected2 = e.target ca TextField; altfel dacă (e.target.name == 'mediumTF') hitSize = 0.5; lastSelected2 = e.target ca TextField; altfel dacă (e.target.name == 'bigTF') hitSize = 1; lastSelected2 = e.target ca TextField;
credite ecranul este afișat când utilizatorul face clic pe butonul credite, un ascultător al mouse-ului este adăugat complet MovieClip pentru ao elimina.
funcția finală privată aratăCredități (e: MouseEvent): void titleView.optionsB.visible = false; titleView.creditsB.visible = false; titleView.playB.visible = false; credits = new CreditsView (); addChild (credite); TweenNano.from (credite, 0,3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Cand credite ecranul este apăsat pe ecran, va fi readus înapoi și scos din scenă.
funcția finală privată ascundeCredități (e: MouseEvent): void TweenNano.to (credite, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsB.visible = true; titleView.playB.visible = true; titleView.optionsB.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP; hideCredits); removeChild (credite); credite = null;);
Să ne oprim aici pentru a face un test rapid și a ne asigura că codul nostru de joc funcționează:
Rețineți că unele linii au fost comentate deoarece unele funcții nu au fost încă create.
Amintiți-vă că Milestone-urile sunt incluse în fișierele sursă, așa că dacă dintr-un anumit motiv fișierul dvs. nu mimează acest lucru, aruncați o privire la sursă pentru a vedea ce poate cauza.
Următoarele linii elimină Titlu ecran și părăsește Joc Ecran vizibil. De asemenea, se solicită o funcție pentru a pregăti jocul care urmează să fie jucat.
Accentsconagua
Funcția finală privată showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv' nul;); prepareWorms (); Folosim o declarație pentru a adăuga a Mouse-ul ascultătorului la fiecare gaură MovieClip în scenă. Acest lucru va face Worms clickable.
funcția finală privată prepareWorms (): void pentru (var i: int = 0; i < 8; i++) /* Add Mouse Listeners */ holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);
Ca Hole MovieClip are mai mult de un cadru, trebuie să fie oprit pentru a împiedica afișarea tuturor viermilor în același timp.
/ * Opriți viermii la cadru 1 * / găuri [i] .gotoAndStop (1); startTimer ();
Acest cronometru va începe numărătoarea inversă și va face ca Worms să apară aleator în stadiu.
funcția finală privată startTimer (): void timer.addEventListener (TimerEvent.TIMER, showWorm); timer.start ();
Acest cod verifică dacă viermele afișate nu au depășit încă limita și o apelează Alerta daca e adevarat.
funcția finală privată showWorm (e: TimerEvent): void if (currentWorms == int (totalWorms)) alert (); altceva var randomHole: int = Math.floor (Math.random () * 8); // Se utilizează pentru a calcula ce vierme va apărea
Zona de lovituri selectată în Opțiuni ecranul va fi schimbat aici pe fiecare vierme utilizând proprietățile scalei AS3.
găuri [randomHole] .addFrameScript (1, funcția () găuri [randomHole] .worm.hArea.scaleX = hitSize; găuri [randomHole] .worm.hArea.scaleY = hitSize;);
Câteva milisecunde vor trece în cazul în care Viermele va fi vizibil, când MovieClip a ajuns în ultimul său cadru, se va opri și va reveni la primul cadru.
gauri [randomHole] .addFrameScript (găuri [randomHole] .totalFrames - 1, funcție () găuri [randomHole] .gotoAndStop (1);); găuri [randomHole] .play (); currentWorms ++;
Această funcție se ocupă atunci când se face clic pe un vierme, acesta va juca în mod substanțial un sunet, va ridica scorul și va ascunde viermele din nou.
funcția finală privată wormHit (e: MouseEvent): void if (e.target.name == 'hArea' || e.target.name == 'vierme') var hit: Hit = new Hit (); hit.play (); wormsHit ++; e.target.parent.gotoAndPlay (18); scorulTF.text = wormsHit + '/' + totalWorms;
Puteți adăuga un bonus personalizat dacă toate viermii sunt loviți prin schimbarea următoarelor linii de cod.
dacă (totalWorms == String (wormsHit)) alert ();
Această funcție va opri jocul și va arăta scorul final, de asemenea, adaugă un ascultător de mouse pentru a reseta jocul când a fost făcut clic.
funcția finală a funcției finale (): void timer.stop (); var alert: AlertView = nou AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, reporniți); addChild (alertă); TweenNano.from (alertă, 0.6, scaleX: 0.2, scaleY: 0.2, ease: Expo.easeOut);
Următoarea funcție va reîncărca swf-ul, restartând orice variabilă, metodă și revenind la Ecranul titlului.
reinițializare finală a funcției finale (e: MouseEvent): void navigateToURL (nou URLRequest (stage.loaderInfo.url), '_level0');
După cum puteți vedea multe dintre variabilele joc / parametrii pot fi modificate și adaptate la nevoile dvs. Încercați să creați propria versiune a jocului!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
