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

 

🙂





15 comments
stefanut_barbu
stefanut_barbu

buna ziua d l florin as avea si eu o intrebare legata de cariera mea de viitor!!!eu sunt elev la colegiul national fratii buzesti din craiova pe mate info:)!!!

de la o vreme a inceput sa mi placa mult creearea si dezvoltarea siteu rilor atat de mult incat de fiecare data cand invat ceva nou legat de html ,repede ma uit la un site simplu de pe net gen wikipedia si mi testez indemanarea in inspect element!!!!!nu prea fac mare lucru dar e un inceput,acum intrebarea mea este urmatoarea :ce ar trebui sa ma fac pentru a ajunge sa creez si sa dezvolt DOAR SITEURI?cum  se numeste mai exact programatorul care face sau dezvolta doar site uri ?


andreisergiu10
andreisergiu10

imi puteti raspunde si mie la cele doua intrebari va rog frumos!!!


andreisergiu10
andreisergiu10

buna ziua domnule florin as avea si eu doua intrebari daca se poate:

1.)care este diferenta dintre web designer si web developer(putin amanuntit va rog frumos)?

2.)mi ati putea da cateva exemple de locuri(centre)in care m as putea angaja ca web developer?

stefanoficce
stefanoficce

e cineva aici care se uita la intrebare si mi ar putea raspunde????


tudorintu
tudorintu

salutare dl florin as avea si eu doua intrebari:

    prima :ce limbaje de programare ti r trebui pentru pentru a ajunge programator in jocuri?

   a doua:daca as alege spre exemplu facultatea de automatica si calculatoare  la ce domeniu ar trebui sa ma inscriu pentru a ajunge programator in jocuri?intreaba un elev in clasa 12.


Florin Birleanu
Florin Birleanu moderator

@tudorintu Pentru jocuri e nevoie in general sa cunosti bine C++, dar depinde si de jocuri... (De exemplu, joculete de Android poti face folosind Java.) Nu exista o specializare anume care sa te pregateasca pentru programarea jocurilor, dar daca inveti bine programare (algoritmi, structuri de date, grafica) nu vei avea dificultati in a programa jocuri. Mult spor la studiat! :-)

andreasanti
andreasanti

buna ziua d l florin as mai avea o intrebare daca se poate AS FACE SI FIZICA LA FACULTATEA PE CARE VREAU S O URMEZ???


andreasanti
andreasanti

buna ziua domnule florin ma numesc andrei pacala si as dori sa va intreb ceva daca se poate ...sunt elev la colegiul national gheorghe titeica ..la mate-info clasa 10  si intentionez sa ma fac web designer deoarece ador sa creez siteu ri si stiu in mare parte ce limbaje de programare ar trebui...am aflat nu de curand ca cea mai buna facultate pentru meseria mea de viitor ar fi AUTOMATICA SI CALCULATOARE dar am o nedumerire ...am cautat peste tot si nu am gasit nicio specializare care s ar potrivi cu web designer asa ca as dori sa va intreb:DACA AR FI SA URMEZ FACULTATEA DE AUTOMATICA SI CALCULATOARE CE DOMENIU AR TREBUI SA ALEG PENTRU A AJUNGE WEB DESIGNER?as fi bucuros sa va ingaduiti am raspunde...va rog mult de tot...

Florin Birleanu
Florin Birleanu moderator

@andreasanti Calculatoare si tehnologia informatiei. :-) (Oricum, in materie de web design trebuie sa te bazezi aproape 100% pe studiu individual, caci lucrurile evolueaza intr-un ritm ametitor in domeniul asta; si, in plus, cu cat ai mai multa experienta practica in domeniu, cu atat abilitatile tale cresc si devii mai valoros...)

Marius Cirstea
Marius Cirstea

Foarte bine, felicitările mele. Un an nou fericit și la cât mai multe tutoriale de genul. Mi-ați făcut poftă, așa că o să-l adaptez pe C#.

Trackbacks

  1. […] vorbit in articolul trecut despre cum poti sa programezi celebrul joc Snake folosind doar informatiile prezentate in tutorialele de programare pentru incepatori pe care le-am […]