Construiește un joc clasic de șarpe în ActionScript 2.0

Ei bine, ne apropiem de sfârșitul anului 2009 și, ca întotdeauna, aceste zile finale în decembrie sunt un moment de reflecție, amintiri și nostalgii. La Activetuts + ne străduim să gândim înainte, să ne mișcăm cu timpul și să adoptăm tehnologia. Spunând acest lucru, este de asemenea important să apelăm la aceasta toate cititorii noștri, deci pentru cei dintre voi care nu au făcut încă saltul, să terminăm anul cu un pic de ActionScript 2.0!

În acest tutorial, veți crea un simplu joc de șarpe AS2.




Pasul 1: Configurarea fișierului

Porniți Flash și faceți clic pe Creați nou: fișier Flash (Actionscript 2.0). Aveți posibilitatea să setați mărimea scenei oricui vă plac - am setat a mea la 500 x 350. Vă sfătuiesc să setați framerate la 30fps.

Acum, puteți fie să decideți să urmați acest pas și să trageți pe cont propriu monitoarele necesare, fie să puteți săriți și să le folosiți pe cele pe care le-am creat. Dacă doriți să folosiți cele create, le puteți găsi în fișierul sursă. Doar adăugați-le la bibliotecă și trageți-le pe scenă. Dacă aveți de gând să trageți propria dvs.: nu trebuie să trageți literalmente la fel ca mine, dar asigurați-vă că vă rămân la dimensiunile.

Pasul 2: Creați groapa de șarpe

Primul lucru pe care îl vom crea este groapa pentru ca șarpele să se plimbe. Creați un dreptunghi de 400 x 250 și convertiți-l într-un pixel. Asigurați-vă că acordați atenție punctului de înregistrare; faceți-o în partea de sus-stânga.

Asigurați-vă că dați șarpelui numele instanței snakepit și aliniați-o ușor deasupra centrului scenei (astfel încât să putem adăuga textul mai jos, fără a afecta estetica).

Pasul 3: Creați capul șarpelui

Desenați un pătrat (probabil cu colțuri rotunjite) fără o margine (dimensiunea 25 x 25) și copiați-l astfel încât să aveți 2 exact același lucru. Conversați unul dintre ele într-un film. Din nou, acordați atenție înregistrării din stânga sus.

Asigurați-vă că îi dați numele instanței bodypart0 și verificați dublu că dimensiunea sa este de 25 x 25.

Pasul 4: Captura de șarpe ActionScript

Introduceți movieclipul "cap". Odată ce ați intrat, adăugați această linie de cod la primul și singurul cadru:

 Stop();

Acum, trageți un chip mic pe capul șarpelui, astfel încât să-l puteți spune în afară de alte organe.

Pasul 5: Face suplimentar

Adăugați un al doilea cadru la movieclip "cap", iar pe acest cadru trageți o față tristă sau mortă.

Pasul 6: Creați celelalte corpuri

Amintiți-vă pătratul duplicat pe care l-ați creat în pasul 3? O vom transforma acum într-un movieclip. Atenție la punctul de înregistrare din nou.

Asigurați-vă că îi dați numele instanței parte a corpului.

Pasul 7: Creați câmpul de scoruri

Creați un câmp de text dinamic sub colțul din dreapta al găurii de șarpe. Asigurați-vă că ați setat variabila la scor. De asemenea, asigurați-vă că câmpul este suficient de larg pentru mai multe caractere și aliniat la dreapta. Restul setărilor pot fi setate în funcție de propriul dvs. stil - am folosit Tahoma 24 Bold.

Pasul 8: Încărcarea fontului

Deoarece este un câmp de text dinamic, va trebui să încorporăm fontul. Faceți clic pe butonul de încorporare din panoul proprietăților (unde ați definit stilul variabil și text).

Veți vedea pop-ul afișat mai jos. Asigurați-vă că selectați Numerale [0 ... 9].

Pasul 9: Creați hrana

Desenați un cerc albastru fără limită, dimensiune 25 x 25, apoi ștergeți centrul utilizând instrumentul de ștergere. Acum, selectați cercul care rămâne și convertiți-l într-un movieclip. Alternativ, puteți crea o bucată de mâncare pentru dvs., atâta timp cât rămâne 25 x 25.

Pasul 10: Numele instanței de alimentare

Dați hrana un nume de exemplu surprinzător alimente. Verificați dublu că dimensiunea sa este de 25 x 25.

Pasul 11: Adăugarea de instrucțiuni

Stânga sub groapa de șarpe părea un loc bun pentru a pune niște indicii. Pur și simplu tastați textul static "Utilizați tastele săgeată pentru a muta" aici. Stiu ca tastele sageti nu functioneaza inca, dar vom ajunge la asta in scurt timp. iți promit!

Pasul 12: Crearea pop-up-ului

Desenați un pătrat alb (undeva în afara scenei, deocamdată) și adăugați textul "Ai murit!" la el. Acesta este pop-ul pe care îl afișăm după ce cineva a pierdut un joc.

Convertiți-l într-un movieclip și dați-i numele instanței Pop-up de asemenea. În scopul alinierii, am setat punctul de înregistrare la centru.

Pasul 13: Scor

Faceți dublu clic pe pop-ul pe care tocmai l-ați creat pentru ao introduce. Odată ce ați intrat, creați un câmp de text dinamic (variabilă = scor) și un buton care citește textul Joaca din nou.

Butonul trebuie să aibă numele instanței againbutton.

În interiorul butonului, puteți crea o stare "Peste" și chiar mai întunecată "Jos" mai puțin întunecată.

Felicitări, ați creat toate obiectele vizuale necesare pentru jocul de șarpe. Acum, până la cod!

Pasul 14: Funcția de joc nou

Înainte să arunc o bucată de cod la tine, îți voi spune ce să faci cu asta. Tot codul din acest tutorial merge pe primul și singurul cadru al filmului tău. Nu este nevoie să atașați butoanele sau orice altceva. Acum, aruncați o privire asupra acestei acțiuni ActionScript.

Nota editorului: Îmi pare rău despre acești oameni, indicatorul de sintaxă de cod nu dorește să afișeze această bucată specială de ActionScript în FireFox. Uitați-vă la cod aici.

Pe scurt, acest cod de cod face următoarele. În primul rând, partea de corp originală este invizibilă - în curând vom folosi duplicate. Unele valori implicite sunt (re) setate, toate duplicatele rămase din jocul anterior sunt șterse. În bucla while (), alimente și bodypart0 (capul) sunt date coordonate x și y. În cazul în care se potrivesc (astfel încât aceștia se află exact în același loc), li se dă o nouă coordonată, până când nu mai avem un meci. Apoi, sunt configurate matricele în care vom conține coordonatele x și y ale corpurilor.

Pasul 15: Îndepărtați direcția

În acest bit de cod, vom crea un obiect keylistener, pe care îl atașăm la Key, care reprezintă tastatura. Ori de câte ori este apăsată o tastă, funcția onKeyDown este declanșată. Din funcția getCode (), vom determina ce tastă a fost apăsată și apoi vom defini direcția în funcție de aceasta. Vom păstra acest lucru în direcţie variabilă pentru utilizare ulterioară. Amintiți-vă: tot codul acestui tutorial merge pe primul și singurul cadru al filmului dvs..

 keyListener = Obiect nou (); KeyListener.onKeyDown = functie () keycode = Key.getCode () daca (keycode == 37) direction = 'left' altceva daca (keycode == 38) direction = 'up' 39) direction = 'right' altfel dacă (keycode == 40) direction = 'down'; Key.addListener (keyListener);

Pasul 16: Funcția onEnterFrame

Funcția aici este una mare. Este executat pe fiecare cadru, dar face doar ceva la fiecare 5 cadre. Verifică dacă șarpele nu se mișcă în afara cutiei și apoi mișcă toate componentele corpului de-a lungul noii poziții. Apoi verifică dacă hrana este acolo și apoi o mănâncă folosind funcția eat () pe care o vom discuta mai târziu. Apoi, verifică dacă șarpele se sparge într-un zid și în cele din urmă verifică dacă șarpele se mușcă în coadă. Toate aceste funcții vor fi adăugate în curând (insideSnake (), dead (), etcetera). Amintiți-vă: tot codul acestui tutorial merge pe primul și singurul cadru al filmului dvs..

 this.onEnterFrame = funcția () if (jocul) if (framecount / 5 == Math.ceil (framecount / 5)) if (! <= snakepit._y && direction == 'up') && !(bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2 && directia == 'jos') &&! (bodypart0._x + bodypart0._width> = snakepit._x + snakepit._width - 2 & direction == 'dreapta') &&! 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) ._ y corppartsx [i] = eval ('bodypart' + i) ._ x dacă food._x == bodypart0._x && food._y == bodypart0._y) dacă (direcția) if (direcția == 'sus') if (bodypart0.y <= snakepit._y)  dead()  else  bodypart0._y-= bodypart0._width   else if (direction == 'down')  if (bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2) dead () altceva bodypart0._y + = bodypart0._width altceva dacă (direcția == 'dreapta') if (bodypart0._x + bodypart0._width> = snakepit ._x + snakepit._width - 2) dead () altceva bodypart0._x + = bodypart0._width altfel dacă (direcția == 'stânga') if (bodypart0._x <= snakepit._x)  dead()  else  bodypart0._x-= bodypart0._width    if (game)  if (insideSnake(bodypart0._x,bodypart0._y,true))  dead()    framecount++  

Pasul 17: Funcția mort ()

Acesta este frumos și ușor. Efectuează acțiunile care trebuie luate atunci când șarpele moare: scorul trebuie să fie definit în fereastra pop-up, pop-ul afișat, fața mortală a șarpelui afișată și variabila jocului setată la false (așa cum sa încheiat jocul).

 funcția mort () popup.score = 'scor:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) game = false; 

Pasul 18: Mâncați () Funcția

Funcția de mai jos este declanșată în funcția onEnterFrame discutată mai devreme, când mâncarea este preluată. Mai întâi duplică o parte din corpul șarpelui, apoi îl poziționează în locul ultimului corp (astfel încât să se alăture liniei de pe următorul cadru). Coordonatele sale sunt adăugate la coordonatele care conțin matrice, iar mâncarea este repoziționată (undeva nu în interiorul șarpelui!). De asemenea, scorul este actualizat.

 ()) (=) (=) () () () () '+ (bodypartsy.length-1)) ._ y eval (' bodypart '+ bodypartsx.length) ._ x = eval (' bodypart '+ (bodypartsy.length-1) + bodypartsy.length) ._ y) bodypartsx.push (eval ('bodypart' + bodypartsx.length) ._ x) do food._x = snakepit._x + Math.floor (((snakepit._width-food._width) / alimente.width) * Math.random ()) * food._width food._y = snakepit._y + Math.floor (((snakepit._height-food._height) /food._height) * Math.random () food._height în timp ce (în interiorulSnake (food._x, food.y)); scor = bodypartsx.length-1

Pasul 19: Funcția insideSnake ()

Această funcție doar verifică dacă coordonatele introduse se potrivesc cu oricare dintre coordonatele corpurilor de șarpe. Dacă skiphead-ul este setat la true, este permis să se potrivească cu coordonatele capului (atunci când se verifică dacă capul muște coada, acest lucru vine la îndemână).

 funcția insideSnake (xneedle, yneedle, skiphead) if (skiphead) startat = 1;  altceva startat = 0;  pentru (q = startat; q 

Pasul 20: Butonul Popup

Ca un ultim cod de cod; tot trebuie să adăugăm o funcție de lansare pe butonul din interiorul ferestrei pop-up! Aceasta va declanșa funcția newgame () pe care am discutat-o ​​mai devreme când a fost făcută clic pe ea. Amintiți-vă: tot codul din acest tutorial merge pe primul și singurul cadru al filmului dvs. - inclusiv acest bit despre buton!

 popup.againbutton.onRelease = funcție () newgame ()

Pasul 21: Înfășurați totul

Sunt sigur că ați făcut acest lucru înainte, dar acum este momentul: apăsați Ctrl + Enter (sau Cmd + Enter pe un Mac) pentru a compila fișierul swf și a vă testa jocul. Ar trebui să fie pe deplin funcțională. se bucura!

Concluzie

Dacă ai reușit totul aici; Felicitări! Ai creat un joc destul de captivant, în AS2! Desigur, un joc nu este niciodată terminat. Există întotdeauna loc pentru îmbunătățiri creative.

Dacă aveți întrebări sau sugestii, nu ezitați să comentați mai jos. De asemenea, sunt foarte curios să văd fișierele produse ca urmare a acestui tutorial - mi-ar plăcea să văd un link în comentarii!

Vă mulțumim că ați citit tutorialul meu. Sper că ți-a plăcut la fel de mult ca și mine.

Cod