Build en klassisk Snake spillet i Actionscript 2.0
8
Del
en
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Vel, vi nærmer oss slutten av 2009, og som alltid, disse siste dager i desember, er en tid for refleksjon, minner og nostalgi. På Activetuts + vi forsøke å være framtidsrettet, beveger seg med tiden og omfavner teknologien. Å si at, er det også viktig at vi appellere til alle våre lesere, så for de av dere som ikke har klart overgangen ennå, la oss avslutte året med en bit av Actionscript 2.0!
I denne opplæringen, du vil lage en enkel AS2 snake spillet
Trinn 1:. Sette opp File
Start-Flash, og klikk Opprett ny: Flash-fil (Actionscript 2.0) Nå kan du enten velge å følge dette trinnet og trekke ønsket movieclips selv, eller du kan hoppe fremover og bruke de jeg laget. Hvis du ønsker å bruke de jeg opprettet kan du finne dem i kildefilen. Bare legg dem til biblioteket og dra dem inn på scenen. Hvis du skal tegne din egen: du trenger ikke å bokstavelig talt trekke det samme som jeg gjorde, men sørg for at du holder deg til de størrelsene Pass på at du gir ormegård forekomstnavnet Snakepit Hotell og justere det litt over midten av scenen (slik at vi kan legge til tekst under det senere, uten å rote til estetikk) Tegn en firkant (kanskje med avrundede hjørner) uten ramme (størrelse 25 x 25), og kopiere det slik at du har 2 nøyaktig den samme. Konverter en av dem til en MovieClip. Igjen, ta hensyn til det øvre venstre registrering. Sørg for at du gir den forekomstnavnet bodypart0 Hotell og dobbeltsjekke at størrelsen er 25 x 25. Enter "hodet" MovieClip. Når du er inne det, legge til denne linjen med kode til den første og eneste ramme: Nå, tegne litt ansikt på slangens hode, slik at du kan fortelle det fra andre kroppsdeler Legg til en annen ramme til "hodet" MovieClip, og på denne rammen, tegne en trist eller døde ansikt. Husk duplikat plassen du opprettet i trinn 3? Vi kommer til å konvertere den til en MovieClip nå. Ta hensyn til registrering punktet igjen Sørg for at du gir den forekomstnavnet kroppsdel Opprett et dynamisk tekstfelt under høyre hjørne av snake pit. Pass på at du setter variabelen til scorer Siden det er et dynamisk tekstfelt, vi må. bygge inn skriften. Klikk på embed-knappen i egenskapsvinduet (der du bare definert variabelen og tekststil). vil du se popup vist nedenfor. Sørg for at du velger Tallene [0..9] Tegn en blå sirkel uten ramme, størrelse 25 x 25, og deretter slette sentrum med viskelæret verktøyet. Nå velger sirkelen som gjenstår, og konvertere den til en MovieClip. Alternativt kan du designe et stykke av mat for deg selv, så lenge det fortsatt er 25 x 25. Gi mat en overraskende eksempel navn på mat Venstre-under ormegård virket som et godt sted å sette noen tips. Bare skriv den statiske teksten "Bruk piltastene til å flytte" her. Jeg vet, piltastene fungerer ikke ennå, men vi får til det snart. Jeg lover Tegn en hvit firkant (et sted utenfor scenen, for nå) og legge til teksten "Du døde!" til den. Dette er popup vi vil vise etter at noen har tapt en kamp. Konverter den til en MovieClip, og gi den forekomstnavnet popup Dobbeltklikk på popup du nettopp opprettet for å skrive det. Når du er inne det, skape et dynamisk tekstfelt (variabel = poengsum Knappen bør gis forekomstnavnet < em> againbutton Inne på knappen, du kan lage en litt mørkere "Over" og enda mørkere "Down" tilstand. Gratulerer, du har opprettet alle visuelle objekter som kreves for snake spillet. Nå over til koden Før jeg kaster en mengde koder på deg, skal jeg fortelle deg hva du skal gjøre med det. All koden i denne opplæringen går på den første og eneste ramme av filmen. Ingen grunn til å feste den til knapper eller noe. Nå, ta en titt på denne stykke Action Red.anm. Beklager om dette folkens, ikke koden syntaks utheving ønsker ikke å vise denne del av Actionscript i FireFox. Ta en titt på koden her. I et nøtteskall, denne biten av koden gjør følgende. Først blir den opprinnelige kroppsdel usynliggjort - vi vil bruke duplikater snart. Noen standardverdiene (re) sett, eventuelle duplikater igjen fra det forrige spillet blir slettet. I do {} while () loop, mat og bodypart0 (hodet) er gitt en x og y koordinat. Hvis dette matcher (så de er på nøyaktig samme sted), de er gitt et nytt koordinatsystem, før vi ikke lenger har en kamp. Deretter blir arrays satt opp der vi vil inneholde bodyparts 'x og y koordinatene I denne bit av koden, skaper vi en keyListener objekt , som vi legger til Key, som representerer tastaturet. Når en tast trykkes, blir onkeydown funksjonen utløses. Fra Vis koder () -funksjonen, vil vi utlede hvilken tast ble trykket og deretter definere retning i henhold til dette. Vi vil lagre dette i retning Funksjonen ned her er en stor en. Det er utført på hver ramme, men bare virkelig gjør noe hver 5 rammer. Den sjekker om slangen ikke beveger seg utenfor boksen, og flytter alle kroppsdeler sammen til sin nye posisjon da. Den sjekker deretter om maten er der også, og så spiser den med spise () -funksjonen vi vil diskutere senere. Deretter sjekker den hvis slangen er knusende inn i en vegg, og til slutt den sjekker om slangebitt selv i halen. Alle disse funksjonene vil bli lagt til snart (insideSnake (), død (), etcetera). Husk:. All koden for denne opplæringen går på den første og eneste ramme av filmen Denne er fin og lett. Den utfører handlingene som må tas når slangen dør: scoren må være definert i popup, popup vist, slangen er død ansikt vist og spillet-variabelen satt til false (som spillet avsluttet) <. br> funksjon døde () {popup.score = 'poengsum:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) spill = false; } Funksjonen nedenfor utløses onEnterFrame funksjon vi diskutert tidligere, når maten er plukket opp. Det dupliserer først en del av slange kropp, så posisjonerer den på plass for den siste kroppsdel (slik at det vil bli med i linjen på neste bilde). Koordinatene er lagt til koordinere inneholder arrays, og maten er omplassert (et sted ikke inne i slangen!). Dessuten er resultatet oppdatert. Denne funksjonen sjekker bare hvis de innleste koordinatene overens med noen av koordinatene til slangens kroppsdeler. Hvis skiphead er satt til sann, er det lov å matche hode koordinater (når du sjekker om hodet biter halen, dette kommer i hendig). Som en siste bit av koden; vi har fortsatt å legge til en on-release funksjonen til knappen inne i popup! Det vil utløse newgame () -funksjonen vi diskutert tidligere, når den klikkes. Husk: all koden for denne opplæringen går på den første og eneste ramme av filmen - inkludert denne litt om knappen Jeg er sikker på at du har gjort dette før, men nå er tiden: trykke Ctrl + Enter (eller Cmd + Enter på en Mac) for å kompilere SWF-fil og teste spillet. Det skal nå være i full drift. Nyt Hvis du har gjort det hele veien her!; Gratulerer! Du skapte ganske 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, gjerne kommentere nedenfor. Også er jeg ganske spent på å se filer produsert som et resultat av denne opplæringen - Jeg vil gjerne se en link i kommentarfeltet Takk for at du leser min tutorial!. Jeg håper du likte den så mye som jeg gjorde. Anmeldelser
. Du kan sette scenen størrelse til hva behager deg. - Jeg har satt meg til 500 x 350. Jeg vil råde deg til å sette framerate til 30fps
Trinn 2:. Lag Snake Pit
< p> Det første vi skal lage er gropen for slangen å streife rundt. Lag et rektangel på 400 x 250 og konvertere den til en MovieClip. Sørg for at du legger merke til registreringspunktet; gjøre det øverste venstre.
Trinn 3:. Lag slangens hode
Trinn 4: Snake Head Action
stop ();
. Opprett Andre Karrosserideler:
Trinn 5:
Trinn 6 Tilleggs Face
Trinn 7:.. Opprett Score Feltet
. Kontroller også at feltet er stort nok for flere tegn, og justert til høyre. Resten av innstillingene kan settes i henhold til din egen stil - jeg brukte Tahoma 24 Fet
Trinn 8: Inkludering Skrift
Trinn 9:. Lag mat
Trinn 10: Mat Instance Name
. Dobbeltsjekk at størrelsen er 25 x 25.
Trinn 11: Legge Instruksjoner
Trinn 12: Opprette Popup
også. For justering formål, har jeg satt registreringspunkt til sentrum
Trinn 13:. Score
) og en knapp lese teksten
Play Again.
.
Trinn 14: newgame Funksjon
Trinn 15:. Griper Direction
variabel for senere bruk. Husk: all koden for denne opplæringen går på den første og eneste ramme av filmen
keyListener = new Object ();. keyListener.onKeyDown = function () {keycode = Key.getCode () if (keycode == 37) {retning = "venstre"} else if (keycode == 38) {retning = 'up'} else if (keycode == 39) {retning = "rett"} else if (keycode == 40) {retning = 'down'}}; Key.addListener (keyListener);
Trinn 16: onEnterFrame Funksjon
this.onEnterFrame = function () {if (spill) {if (framecount /5 == Math.ceil (framecount /5) ) {if ((bodypart0._y <! = snakepit._y & & retning == 'up') & &! (bodypart0._y + bodypart0._height > = snakepit._y + snakepit._height- 2 & & retning == 'down') & & (bodypart0._x + bodypart0._width > = snakepit._x + snakepit._width - 2 &! & retning == "rett") & &! (bodypart0._x < = snakepit._x & & retning == 'left')) {bodypartsy [0] = bodypart0._y; bodypartsx [0] = bodypart0._x; for (i = bodypartsy.length-1; i > 0; I--) {eval ('kroppsdel' + i) ._ y = bodypartsy [(i-1)] eval ('kroppsdel' + i) ._ x = bodypartsx [(i-1)] bodypartsy [i] = eval ('kroppsdel' + i) ._ y bodypartsx [i] = eval ('kroppsdel' + i) ._ x}} if (food._x == bodypart0._x & & food._y == bodypart0._y) {spise ()} if (retning) {if (retning == 'up') {if (bodypart0._y < = snakepit._y) {døde ()} else {bodypart0._y- = bodypart0._width}} else if (retning == 'down') {if (bodypart0._y + bodypart0._height > = snakepit._y + snakepit._height-2) {døde ()} else {bodypart0._y + = bodypart0._width}} else if (retning == "rett") {if (bodypart0._x + bodypart0._width > = snakepit._x + snakepit._width - 2) {døde ()} else {bodypart0._x + = bodypart0._width}} else if (retning == 'left') {if (bodypart0._x < = snakepit._x) {døde ()} else {bodypart0._x- = bodypart0._width}} } if (spill) {if (insideSnake (bodypart0._x, bodypart0._y, true)) {døde ()}}} framecount ++}}
Trinn 17: dead () Funksjon
Trinn 18: spise () Funksjon
Funksjon spise () {duplicateMovieClip (kroppsdel, 'kroppsdel' + bodypartsy.length, this.getNextHighestDepth ()) bodypart0.swapDepths (this.getNextHighestDepth ()) eval ('kroppsdel' + bodypartsy .length) ._ y = eval ('kroppsdel' + (bodypartsy.length-1)) ._ y eval ('kroppsdel' + bodypartsx.length) ._ x = eval ('kroppsdel' + (bodypartsy.length-1)). _x bodypartsy.push (eval ('kroppsdel' + bodypartsy.length) ._ y) bodypartsx.push (eval ('kroppsdel' + bodypartsx.length) ._ x) gjøre {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) /mat. _height) * Math.random ()) * food._height} while (insideSnake (food._x, food._y)); poengsum = bodypartsx.length-1}
Trinn 19: insideSnake () Funksjon
Funksjon insideSnake (xneedle, yneedle, skiphead) {if (skiphead) {startat = 1; } Else {startat = 0; } For (q = startat; q < bodypartsx.length; q ++) {if (bodypartsx [q] == xneedle) {if (bodypartsy [q] == yneedle) {return true; }}} Return false; }
Trinn 20: The Popup Button
popup.againbutton.onRelease = function () {newgame ()}
Trinn 21: Bølge det hele opp
Konklusjon