Share
I denne opplæringen lærer du hvordan du lager din egen versjon av det klassiske Whack-a-Mole-spillet. Bare våre uheldig vesener vil være ormer. Du vil kunne endre spillets hastighet og ormene.
Vi bruker spesielle ActionScript 3-klasser spesielt Mus Hendelser å skape en underholdende Whack A Mole lignende spill i Flash
Åpne Flash og opprett et 480 piksler bredt, 320 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
(Merk: Det er en feil i bildet ovenfor, bredden og høyden er feil vei rundt! Takk til Roel Traa for å peke ut dette.)
Et enkelt og vennlig grensesnitt vil bli brukt, med flere former, knapper og MovieClips, fortsett til de neste trinnene for å bygge denne GUI.
Velg Rektangelverktøy (R) for å lage et 320x480px # CC9866, # BA7743 rektangel og sentrere det i scenen.
Bruke Tekstverktøy (T) for å legge til en tittel ved hjelp av favorittfonten din. Du kan også bruke noen av grafikkene i spillet for å gjøre det bedre. Ormen grafikken som ble brukt i denne opplæringen ble lastet ned herfra under a Creative Commons Tillatelse.
Bruk igjen Tekstverktøy å opprette tre knapper som vist på bildet over. Konverter dem til knapper og gi dem beskrivende forekomstnavn for å enkelt bruke dem senere i koden. Konverter grafikken i scenen til en enkelt Filmklipp og nev det TitleView, Husk å sjekke Eksporter for ActionScript-boksen.
Fjern den siste visningen bortsett fra bakgrunnen, og opprett en serie med Dynamic TextFields som vist på bildet, gi dem beskrivende forekomstnavn og konverter dem til knapper. Bruke Rektangelverktøy (R) for å lage en piltast som vil bli brukt til å gå tilbake til Tittelskjerm.
De studiepoeng skjermen vil vises foran Tittel Skjerm, bruk grafikk og skrifter som brukes før for å lage den. Navngi det CreditsView og husk å sjekke Eksporter for ActionScript eske.
Enkel tegneserieaktig grafikk brukes i Spill Skjerm, det er egentlig ikke en prosedyre for å lage denne grafikken, bare bruk din fantasi og Flash tegning verktøy for å lage noe som bildet ovenfor. Hvert hull i spillskjermbildet er a Filmklipp som inneholder en animasjon av ormen som kommer ut, er det i utgangspunktet en enkel ramme for ramme animasjon, pass på å sjekke kilden til bedre forståelse.
Et varsel vil bli vist når alle ormene har vist, det vil vise sluttresultatet du nådde. Bruke Rektangelverktøy å opprette det og legge til et beskrivende navn til bunnen av TextField, angi dets forekomstnavn til AlertView og merk av Eksporter for ActionScript eske.
Vi bruker en annen tween motor fra standard inkludert i flash, dette vil øke ytelsen, så vel som å være enklere å bruke.
Du kan laste ned TweenNano fra sitt offisielle nettsted.
Vi bruker lydeffekter for å forbedre følelsen av spillet, du kan finne lyden som brukes i dette eksemplet i Soungle.com ved hjelp av søkeordet truffet.
Vi gjør interaktiv applikasjon ved å bruke en ekstern klasse, legg til navnet til Klasse felt i publisere delen av Eiendommer panel for å knytte FLA til hoveddokumentklassen.
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Lag din grunnklassestruktur for å begynne å skrive koden din.
pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code
Dette er klassene vi må importere for vår klasse for å jobbe, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importer flash.text.TextField; importere flash.utils.Timer; importer flash.events.TimerEvent; importer flash.events.MouseEvent; importer flash.net.navigateToURL; importere flash.net.URLRequest; importer com.greensock.TweenNano; importer com.greensock.easing.Expo;
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem, noen av navnene deres er selvklart, så det blir ingen kommentar der.
private var titleView: TitleView = new TitleView (); private var-alternativer: OptionsView; private varemerker: CreditsView; privat var sist valgt: TextField; // siste valgt hastighet i alternativskjermbildet private var sistSelected2: TextField; // det siste valgte treffområdet i alternativskjermbildet private var hitSize: Number = 1; // hit størrelse maske er i full skala ved start privat var timer: Timer = ny Timer (1400); // standard tid for ormene å vises private var hull: Vector.= Ny Vector. (); // lagrer de 8 hullene i scenen privat var currentWorms: int = 0; // ormer allerede vist private var ormerHit: int = 0; private var totalt Worms: String = '10'; // totalt ormer å vise
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt eller kjører ved hjelp av theяDocument Class.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
offentlig sluttfunksjon Main (): void addChild (titleView); holes.push (h1, h2, h3, h4, H5, H6, H7, H8); startButtonListeners ();
Vi starter med å legge til muselyttene på knappene i tittelvisningen, dette tar oss til skjermbildet for spill, alternativer eller kreditt.
privat endelig funksjon startButtonListeners (handling: 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);
De alternativer Skjermen er tweened når brukeren klikker alternativknappen, en muselytter legges til pilknappen for å fjerne den når den er ferdig.
privat endelig funksjon addOptions (e: MouseEvent): void options = new OptionsView (); addChild (opsjoner); TweenNano.from (alternativer, 0.3, x: scene.stageWidth, onComplete: function (): void options.backBtn.addEventListener (MouseEvent.MOUSE_UP, hideOptions);); optionsListeners ();
Disse lytterne legges til når alternativer Skjermen i vist, de håndterer knappene på scenen. Mer av sin oppførsel i de neste trinnene.
private endelige funksjonsalternativerListeners (handling: 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);
Standardalternativene er angitt av denne linjen, de angir de valgte knappene som er treg og stor.
lastSelected = options.slowBtn.slowTF; lastSelected2 = options.bigBtn.bigTF;
En parameter vil avgjøre om lytterne blir lagt til eller fjernet, de neste linjene utføres hvis denne parameteren ikke indikerer å legge til lytterne.
ellers 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);
Pilknappen fjerner alternativer skjermen når du klikker.
privat sluttfunksjon hideOptions (e: MouseEvent): void TweenNano.to (alternativer, 0.3, x: stage.stageWidth, onComplete: funksjon (): void options.removeEventListener (MouseEvent.MOUSE_UP, hideOptions); removeChild ; alternativer = null;);
Denne funksjonen går når hurtigknappene trykkes, den første delen endrer tekstfargene på knappene, den endrer det gjeldende alternativet til hvitt og den nye valgte verdien til gul.
privat endelig funksjon changeSpeed (e: MouseEvent): void / * Endre mål og sist valgt Farge * / lastSelected.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966;
Dette er den andre delen av fartsfunksjonen, den oppdager at knappen klikket på å sjekke navnet sitt og øker / reduserer Timer tilsvarende.
hvis (e.target.name == 'slowTF') timer = ny timer (1400); lastSelected = e.target som TextField; annet hvis (e.target.name == 'mediumTF') timer = ny timer (1100); lastSelected = e.target som TextField; annet hvis (e.target.name == 'fastTF') timer = ny timer (800); lastSelected = e.target som TextField;
Den neste funksjonen går når en knapp på valgt områdevalg klikkes. Den oppfører seg på samme måte som den siste funksjonen.
privat endelig funksjon selectHitArea (e: MouseEvent): void / * Endre mål og sist valgt Farge * / lastSelected2.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966; / * Oppdag klikkte knappen og endre hitområdet tilsvarende * / hvis (e.target.name == 'smallTF') hitSize = 0; lastSelected2 = e.target som TextField; annet hvis (e.target.name == 'mediumTF') hitSize = 0.5; lastSelected2 = e.target som TextField; annet hvis (e.target.name == 'bigTF') hitSize = 1; lastSelected2 = e.target som TextField;
De studiepoeng Skjermbildet vises når brukeren klikker på kredittknappen, en muselytter er lagt til det fulle Filmklipp for å fjerne den.
privat siste funksjonsprogram Kreditter (e: MouseEvent): void titleView.optionsB.visible = false; titleView.creditsB.visible = false; titleView.playB.visible = false; studiepoeng = nytt CreditsView (); addChild (sp); TweenNano.from (credits, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Når studiepoeng skjermen er klikket den vil bli tweened tilbake og fjernet fra scenen.
privat endelig funksjon hideCredits (e: MouseEvent): void TweenNano.to (kreditter, 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 (credits); credits = null;);
La oss stoppe her for å gjøre en rask test og sørge for at vår spillkode fungerer:
Husk at noen linjer har blitt kommentert, ettersom noen funksjoner ikke er opprettet ennå.
Husk at milepæler er inkludert i kildefilene, så hvis filmen din av en eller annen grunn ikke etterligner denne, ta en titt på kilden for å se hva som kan forårsake det.
Følgende linjer fjerner Tittel skjermen og forlater Spill Skjerm synlig. Det kaller også en funksjon for å forberede spillet som skal spilles.
Accentsconagua
Private Endelig Funksjon ShowGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: funksjon (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = null;); prepareWorms (); Vi bruker en forklaring her for å legge til en Muslytter til hvert hull Filmklipp i scenen. Dette vil gjøre ormene klikkbare.
privat endelig funksjon forberede Worms (): void for (var i: int = 0; i < 8; i++) /* Add Mouse Listeners */ holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);
Som hullet Filmklipp har mer enn en ramme, må den stoppes for å forhindre at alle ormer vises samtidig.
/ * Stopp ormer i ramme 1 * / hull [i] .gotoAndStop (1); startTimer ();
Denne timeren starter nedtellingen og gjør at Worms vises tilfeldig i scenen.
privat endelig funksjon startTimer (): void timer.addEventListener (TimerEvent.TIMER, showWorm); timer.start ();
Denne koden kontrollerer om de viste ormene ennå ikke har passert grensen, og kaller en Varsling hvis sant.
privat siste funksjonsvinduWorm (e: TimerEvent): void if (currentWorms == int (totalWorms)) alert (); else var randomHole: int = Math.floor (Math.random () * 8); // Brukes til å beregne hvilken orm som vil vises
Det valgte treffområdet i alternativer skjermen vil bli endret her på hver orm ved hjelp av skalaegenskapene til AS3.
hull [randomHole] .addFrameScript (1, funksjon () huller [randomHole] .worm.hArea.scaleX = hitSize; hull [randomHole] .worm.hArea.scaleY = hitSize;);
Et par millisekunder vil passere hvor ormen vil bli synlig, når MovieClip nådde sin siste ramme, stopper den og går tilbake til den første rammen.
hull [randomHole] .addFrameScript (hull [randomHole] .totalFrames - 1, function () huller [randomHole] .gotoAndStop (1);); hullene [randomHole] Beskytt din Nintendo DS (); currentWorms ++;
Denne funksjonen håndteres når en Worm er klikket, den vil i utgangspunktet spille en lyd, øke poengsummen og skjule ormen igjen.
privat endelig funksjon wormHit (e: MouseEvent): void if (e.target.name == 'hArea' || e.target.name == 'orm') var hit: Hit = new Hit (); hit.play (); wormsHit ++; e.target.parent.gotoAndPlay (18); scoreTF.text = wormsHit + '/' + totalWorms;
Du kan legge til en egendefinert bonus hvis alle ormene der du treffer ved å endre de neste kodelinjene.
if (totalWorms == String (wormsHit)) alert ();
Denne funksjonen stopper spillet og avslører sluttresultatet, det legger også til en muselytter for å tilbakestille spillet når det klikkes.
privat endelig funksjonalarm (): void timer.stop (); var varsel: AlertView = ny AlertView (); alert.x = scene.stageWidth * 0,5; alert.y = scene.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, start på nytt); addChild (varsling); TweenNano.from (varsel, 0,6, scaleX: 0.2, scaleY: 0.2, ease: Expo.easeOut);
Den neste funksjonen vil laste inn swf, starte en hvilken som helst variabel, metode og returnere til Tittelskjerm.
privat endelig funksjonstart (e: MouseEvent): void navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0');
Som du kan se mange av spillvariablene, kan parametrene endres og tilpasses dine behov. Prøv å lage din egen versjon av spillet!
Jeg håper du likte denne opplæringen, takk for å lese!
