Bygg et Classic Snake Game i ActionScript 2.0

Vel, vi nærmer oss slutten av 2009, og som alltid er disse siste dagene i desember en tid for refleksjon, minner og nostalgi. På Activetuts + forsøker vi å være fremtidsrettet, flytte med tiden og omfavne teknologien. Å si det, det er også viktig vi appellerer til alle våre lesere, så for de av dere som ikke har gjort hoppet ennå, la oss avslutte året med litt ActionScript 2.0!

I denne opplæringen lager du et enkelt AS2 slangespill.




Trinn 1: Sette opp filen

Start Flash, og klikk Opprett ny: Flash-fil (Actionscript 2.0). Du kan stille scenestørrelsen til det som passer deg - jeg har satt min til 500 x 350. Jeg anbefaler deg å sette framerat til 30 fps.

Nå kan du enten bestemme seg for å følge dette trinnet og tegne de nødvendige filmklippene selv, eller du kan hoppe videre og bruke dem jeg opprettet. Hvis du vil bruke dem jeg opprettet, kan du finne dem i kildefilen. Bare legg dem til biblioteket og dra dem på scenen. Hvis du skal tegne din egen: du trenger ikke å bokstavelig talt tegne det samme som jeg gjorde, men sørg for at du holder deg til størrelsene.

Trinn 2: Lag Snake Pit

Det første vi skal skape er gropen for slangen å streife rundt. Lag et rektangel på 400 x 250 og konverter det til en filmklipp. Pass på at du tar hensyn til registreringspunktet; gjør det øverst til venstre.

Pass på at du gir slangen pit forekomstnavnet slangegrop og juster den litt over midten av scenen (slik at vi kan legge til tekst under det senere, uten å bryte opp estetikken).

Trinn 3: Lag slangens hode

Tegn en firkant (kanskje med avrundede hjørner) uten en kantlinje (størrelse 25 x 25) og kopier den slik at du har 2 nøyaktig det samme. Konverter en av dem til en filmklipp. Igjen, vær oppmerksom på den øverst til venstre registreringen.

Pass på at du oppgir navnet på forekomsten bodypart0 og kontroller at størrelsen er 25 x 25.

Trinn 4: Snake's Head ActionScript

Skriv inn "head" movieclip. Når du er inne i det, legg til denne linjen med kode til den første og eneste rammen:

 Stoppe();

Nå tegner et lite ansikt på slangens hode, slik at du kan fortelle det bortsett fra andre kroppsarter.

Trinn 5: Ytterligere ansikt

Legg til en andre ramme til "head" movieclip, og i denne rammen tegner du et trist eller dødt ansikt.

Trinn 6: Opprett de andre kroppsdelene

Husk duplikatfeltet du opprettet i trinn 3? Vi skal konvertere den til en filmklipp nå. Vær oppmerksom på registreringspunktet igjen.

Pass på at du oppgir navnet på forekomsten kroppsdel.

Trinn 7: Opprett resultatfeltet

Opprett et dynamisk tekstfelt under høyre hjørne av slangen. Pass på at du stiller variabelen til poengsum. Pass også på at feltet er bredt nok til flere tegn, og justert til høyre. Resten av innstillingene kan settes i henhold til din egen stil - jeg brukte Tahoma 24 Bold.

Trinn 8: Embedding fonten

Siden det er et dynamisk tekstfelt, må vi legge inn skrifttypen. Klikk på innlemmeknappen i egenskapspanelet (hvor du bare definerte variabelen og tekststilen).

Du får se popupen som vises nedenfor. Pass på at du velger Tall [0 ... 9].

Trinn 9: Lag maten

Tegn en blå sirkel uten en kantlinje, størrelse 25 x 25, og slett deretter senteret med viskelærverktøyet. Velg nå sirkelen som gjenstår og konverter den til en filmklipp. Alternativt kan du designe et stykke mat for deg selv, så lenge det forblir 25 x 25.

Trinn 10: Navn på næringsmiddel

Gi maten et overraskende eksempelnavn på mat. Dobbeltklikk at størrelsen er 25 x 25.

Trinn 11: Legge til instruksjoner

Venstre under slangen grop virket som et godt sted å sette noen pekere. Skriv bare den statiske teksten "Bruk piltastene til å flytte" her. Jeg vet, piltastene virker ikke ennå, men vi kommer snart til det. jeg lover!

Trinn 12: Opprett popupen

Tegn et hvitt torg (et sted utenfor scenen, for nå) og legg til teksten "Du døde!" til det. Dette er popupen vi viser etter at noen har mistet et spill.

Konverter den til en filmklipp, og gi den forekomstnavnet popup også. For tilpasningsformål har jeg satt registreringspunktet til senteret.

Trinn 13: Resultat

Dobbeltklikk på popupen du nettopp har opprettet for å skrive den inn. Når du er inne i det, opprett et dynamisk tekstfelt (variabel = poengsum) og en knapp som leser teksten Spill igjen.

Knappen skal gis forekomstnavnet againbutton.

På innsiden av knappen kan du opprette en litt mørkere "Over" og enda mørkere "Down" -tilstand.

Gratulerer, du har opprettet alle visuelle objekter som kreves for slangespillet. Nå over til koden!

Trinn 14: newgame-funksjon

Før jeg kaster en del kode på deg, forteller jeg deg hva du skal gjøre med det. Alle koden i denne opplæringen går på den første og eneste rammen av filmen. Du trenger ikke å feste den på knapper eller noe. Nå, se på dette stykke ActionScript.

Redaktørens merknad: Beklager for dette folkets kode, ikke synkroniseringslampen for kodeks vil ikke vise denne delen av ActionScript i FireFox. Ta en titt på koden her.

I et nøtteskall gjør denne delen av koden følgende. Først blir det opprinnelige bodypartet gjort usynlig - vi bruker snart duplikater. Noen standardverdier er (re) sett, noen duplikater som er igjen fra forrige spill, blir slettet. I do while () sløyfen får mat og bodypart0 (hodet) en x- og y-koordinat. Hvis dette stemmer (slik at de er på samme sted), får de en ny koordinat, til vi ikke lenger har en kamp. Deretter settes arraysene der vi skal inneholde bodyparts 'x- og y-koordinater.

Trinn 15: Ta tak i retningen

I denne delen av kode lager vi et keyListener-objekt, som vi legger til Key, som representerer tastaturet. Når en tast trykkes, utløses onKeyDown-funksjonen. Fra getCode () -funksjonen vil vi avlede hvilken tast som ble trykket og deretter definere retningen i henhold til dette. Vi lagrer dette i retning variabel for senere bruk. Husk: Alle koden for denne opplæringen går på den første og eneste rammen av filmen.

 keyListener = nytt objekt (); keyListener.onKeyDown = function () keycode = Key.getCode () hvis (nøkkelkode == 37) retning = 'venstre' annet hvis (nøkkelkode == 38) retning = 'opp' annet hvis 39) retning = 'høyre' annet hvis (nøkkelkode == 40) retning = 'ned'; Key.addListener (keyListener);

Trinn 16: onEnterFrame Funksjon

Funksjonen her nede er en stor. Den utføres på hver ramme, men bare virkelig gjør noe hver fem ramme. Det kontrollerer om slangen ikke beveger seg utenfor boksen, og flytter deretter alle kroppsdelene til sin nye posisjon. Det sjekker deretter om maten er der også, og spiser den ved hjelp av eat () -funksjonen, diskuterer vi senere. Deretter sjekker det om slangen knuses i en vegg, og til slutt kontrollerer den om slangen biter seg i halen. Alle disse funksjonene vil bli lagt til snart (insideSnake (), dead (), etc.). Husk: Alle koden for denne opplæringen går på den første og eneste rammen av filmen.

 this.onEnterFrame = function () if (game) hvis (framecount / 5 == Math.ceil (framecount / 5)) hvis (! (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 hvis (food._x == bodypart0._x && food._y == bodypart0._y) eat hvis (retning) hvis (retning == 'opp') hvis (bodypart0._y <= snakepit._y)  dead()  else  bodypart0._y-= bodypart0._width   else if (direction == 'down')  if (bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2) døde () annet bodypart0._y + = bodypart0._width annet hvis (retning == 'høyre') if (bodypart0._x + bodypart0._width> = snakepit ._x + snakepit._width - 2) dead () else bodypart0._x + = bodypart0._width annet hvis (retning == 'venstre') hvis (bodypart0._x <= snakepit._x)  dead()  else  bodypart0._x-= bodypart0._width    if (game)  if (insideSnake(bodypart0._x,bodypart0._y,true))  dead()    framecount++  

Trinn 17: Død () Funksjon

Denne er fin og enkel. Den utfører de tiltakene som må tas når slangen dør: poenget må defineres i popupen, popupen vises, slangen er dødsfall vist og spillvariabelen satt til feil (når spillet avsluttet).

 funksjon dead () popup.score = 'score:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) spill = false; 

Trinn 18: Spis () Funksjon

Funksjonen nedenfor utløses i funksjonen onEnterFrame vi diskuterte tidligere, når maten hentes. Det dupliserer først en del av slangens kropp, og plasserer den på stedet for det siste bodypartet (slik at det blir med i linjen på neste ramme). Koordinatene legges til koordinaten som inneholder arrays, og maten er reposisjonert (et sted ikke inne i slangen!). Også poengsummen er oppdatert.

 funksjonen spise () duplicateMovieClip (bodypart, 'bodypart' + bodypartsy.length, this.getNextHighestDepth ()) bodypart0.swapDepths (this.getNextHighestDepth ()) eval ('bodypart' + bodypartsy.length) ._ y = eval ('bodypart '+ (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) gjør 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 mens (insideSnake (food._x, food._y)); score = bodypartsx.length-1

Trinn 19: InsideSnake () Funksjon

Denne funksjonen kontrollerer bare om de innputtede koordinatene samsvarer med noen av koordinatene til slangens kroppsformer. Hvis hoppehode er satt til ekte, er det tillatt å matche hodens koordinater (når du sjekker om hodet biter halen, kommer dette til nytte).

 Funksjon insideSnake (xneedle, yneedle, skiphead) if (skiphead) startat = 1;  ellers startat = 0;  for (q = startat; q 

Trinn 20: Popup-knappen

Som en siste bit av kode; vi må fortsatt legge til en utløsingsfunksjon til knappen inne i popup-vinduet! Det vil utløse funksjonen newgame () vi diskuterte tidligere, da den ble klikket. Husk: Alle koden til denne opplæringen går på den første og eneste rammen av filmen din - inkludert denne teksten om knappen!

 popup.againbutton.onRelease = function () newgame ()

Trinn 21: Pakke det hele opp

Jeg er sikker på at du har gjort dette før, men nå er klokken: Trykk Ctrl + Enter (eller Cmd + Enter på en Mac) for å kompilere SWF-filen og teste spillet ditt. Det skal nå være fullt funksjonelt. Nyt!

Konklusjon

Hvis du gjorde det hele veien her; Gratulerer! Du skapte ganske et vanedannende spill, i AS2! Selvfølgelig er et spill aldri ferdig. Det er alltid rom for kreativ forbedring.

Hvis du har spørsmål eller forslag, vær så snill å kommentere nedenfor. Også, jeg er ganske nysgjerrig på å se filer produsert som et resultat av denne opplæringen - jeg vil gjerne se en lenke i kommentarene!

Takk for at du lest min opplæring. Jeg håper du likte det så mye som jeg gjorde.