start     Articole     Despre mine    

Cum se programeaza un joc de SNAKE (tutorial cu imagini)

Oare o fi cineva pe lumea asta care sa nu stie jocul Snake?… Un joc foarte captivant prin simplitatea si interactivitatea lui. Cu siguranta l-ai jucat pe telefonul tau de atatea ori. Dar te-ai intrebat vreodata ce se ascunde in spatele lui?

Ei bine, azi a venit vremea sa intri in culise. Hai sa disecam sarpele si sa-l reconstruim apoi bucata cu bucata :-).

Stiu ca textul poate fi cam dificil de urmarit, asa ca am decis sa experimentez o varianta diferita de articol. Asa ca vei vedea aici multe poze si doar putin text.

Mai inainte de a incepe efectiv discutarea jocului Snake, iti voi face o dezvaluire . Programele pe care le scriu in simulator (http://igotopia.ro/programez-online/) nu imi merg intotdeauna din prima. Cel mai adesea se intampla ca la apasarea butonului “Executa…” sa nu vad niciun efect.

Asta fiindca fie scriu gresit numele unei variabile sau al unei functii, fie uit sa inchid vreo paranteza, fie altceva…

Intrebarea e: cum reusesc sa imi dau seama unde e problema in programul meu? Raspuns: ma folosesc de o facilitate pe care o ofera browserele pentru programatori. Este vorba despre consola.

Dar s-o luam cu inceputul. Mai intai: unde imi scriu programele pe care le postez pe acest site? In simulatorul online de la adresa mentionata mai sus. Iata-l cum arata in Chrome (31.0.1650.63 m).

Ca sa deschid consola fac click dreapta pe pagina si selectez optiunea Inspect element, dupa care aleg sectiunea Console, ca in imaginile urmatoare:

(Dar daca folosesti alt browser web, cum faci sa apara consola? Lucrurile nu se schimba mult. De exemplu, in Firefox (3.6.13) din meniul Tools alegi Error Console. Iar in Safari trebuie sa activezi in prealabil optiunea “Inspect element” (adica Safari->Preferences->Advanced si bifezi Show develop menu in menu bar). Iar daca folosesti Internet Explorer… nu conteaza, caci oricum iti recomand sa treci la unul dintre browserele mentionate anterior.)

Gata! Acum ma apuc sa programez jocul:

Chiar credeai :-)? Ti-am mai spus ca mai inainte de a sari la pasul de implementare trebuie realizat pasul de proiectare. Asa ca iau o foaie de hartie si un pix si ma apuc sa desenez. Iata ce a iesit:

Am hotarat, deci, interfata jocului si modul de functionare a lui. Urmeaza sa ii construiesc un model de baza de numere, adica sa identific ce variabile imi trebuiesc pentru a putea memora starea jocului la orice moment de timp.

Si abia acuma ma apuc sa schitez programul. Mai intai identific ce functii mi-ar trebui, dupa care le detaliez pe fiecare in parte.

Dupa cum ai observat, primele doua functii nu le-am detaliat. Imi par prea simple. Ar trebui sa ti se para si tie la fel, daca ai parcurs constiincios tutorialul pentru construirea jocului de labirint.

In continuare ar trebui sa detaliez si mai mult fiecare liniuta. Cat de mult? Pana ajung la nivelul la care detalierea sa contina doar intructiuni permise si corecte. (Vezi in posterul acesta toate instructiunile permise.)

Ca sa nu fac articolul acesta enervant de lung, voi sari peste aceasta etapa si voi trece direct la codul sursa al programului. Scriu mai intai variabilele care au rezultat din etapa de proiectare a jocului. Si scriu si programul propriu-zis, urmand ca functiile sa le definesc ulterior.

Ups! Daca apas acum butonul “Executa…”, consola imi zice ca am o eroare in cod. Bineinteles ca functia AfiseazaBordura nu e definita. Inca. Asa ca scriu scheletele pentru functii si apas din nou butonul de executie.

Alta eroare! Da, am uitat sa pun scheletul pentru functia AfiseazaMarNou. Il completez, dupa care completez si corpul functiei de desenare a bordurii. Apoi rulez din nou programul.

Faina bordura, dar nu e gri ca in specificatii. Nicio problema — se rezolva!

Si iata si sarpele! Capul gri si corpul negru, asa cum am stabilit. Urmeaza functia de afisare a unui mar nou (intr-o pozitie aleatoare).

Asa cum am stabilit in pasul de proiectare, mai intai calculez un numar pseudoaleator in variabila nrAleator, dupa care parcurg fiecare element de pe tabla de joc pentru a ma opri la a nrAleator-a pozitie neocupata de sarpe. Am nevoie, asadar, de doua variabile ce vor lua valori de la 2 la 9. (Pentru explicatii, te rog sa revezi lectia de aici.) Din inertie, le-am denumit i si j. Apoi le-am redenumit in x si y, pentru a fi mai clara utilizarea lor. De asemenea, imi mai trebuie si un contor pentru a numara cate pozitii libere de pe tabla am parcurs.

Ce trebuie sa fac in continuare? Sa verific daca la pozitia curenta (adica la pozitia de la coordonatele (x, y)) se gaseste un element din sarpe. Asa ca parcug fiecare element din sarpe si vad daca vreunul sa gaseste la coordonatele (x, y). In caz afirmativ, variabilei e_sarpe ii voi atribui valoarea 1. Apoi verific daca valoarea din variabila e_sarpe a ramas 0 (ceea ce inseamna ca nu se gaseste sarpe la pozitia curenta), si in caz afirmativ maresc cu 1 valoarea contorului; dar mai inainte verific daca ma gasesc a a nrAleator-a pozitie libera de pe tabla — iar daca da, atunci pun marul acolo.

Iar la finalul functiei — evident — aprind (in culoarea verde) punctul de la noile coordonate ale marului.

In sfarsit, iata marul! A fost ceva de munca, nu?

A mai ramas doar de specificat functionarea tastelor (adica cele patru taste de schimbare a directiei, plus tasta de avansare). Incep prin a citi tasta apasata si a verifica daca s-a apasat vreo tasta de modificare a directiei de mers a sarpelui. Apoi verific daca s-a apasat tasta de avasare a pozitiei sarpelui. Daca da, atunci preiau pozitia capului sarpelui si o avansez in directia curenta de mers. Apoi vad daca am dat peste mar sau nu, si avansez pozitia sarpelui.

Urmeaza sa fac modificarile vizibile pe ecran, si daca a mancat marul sa afiseze unul nou. Si mai ramane apoi sa verific daca jocul s-a incheiat. Adica verific mai intai daca sarpele a intrat (cu capul) in bordura. Iar apoi verific daca sarpele a intrat in el insusi. Daca jocul s-a incheiat, marul il aprind in culoarea rosu si incetez ascultarea tastelor.

Execut programul.

Eroare! Nu exista AprindeMarNou. Corect, am gresit numele functiei. Ii zice AfiseazaMarNou. Modific si rulez din nou. Si…

… merge!!! A meritat toata munca asta, nu-i asa? 🙂

Daca esti genul caruia ii prinde bine sa se motiveze mai inainte de a se apuca de lucru, poti descarca de aici codul sursa integral pentru jocul Snake (in versiunea 1.0, adica fara animatie — avansarea facandu-se prin apasarea tastei P). (Bineinteles, va urma si Snake 2.0…)

Ti-a placut?

Vrei sa inveti programare de la zero, vrei sa sprijini site-ul sau vrei sa imi multumesti? Cumpara-mi cartea “Cum programezi un joc de la zero”.

 

 

 

 

Cu drag,

Florin

 

🙂





Loading Facebook Comments ...