Acum ceva vreme porneam impreuna la drum in fascinantul domeniu al programarii calculatoarelor. Am parcurs cale lunga de atunci — am deprins bazele programarii structurate, am invatat sa afisam lucruri pe ecran, sa ascultam taste si sa facem animatii. Ba chiar am vazut cum se pot imbina toate acestea pentru a construi jocuri.

E timpul sa intram ca-n branza intr-o noua lectie — folosirea soarecelui :-). Vei vedea cum poti asculta clickurile facute cu mouse-ul pe ecranul nostru virtual si cum poti raspunde la ele.

Daca lectia de utilizare a tastaturii nu ti-a pus probleme, nici folosirea mouse-ului n-o va face. Si aici ideea este aceeasi:

1) construiesc o functie in care ii spun calculatorului ce sa faca in cazul in care s-a facut click pe ecran; (<– functia aceasta va avea ca parametru o variabila ce va contine informatii legate de evenimentul ce s-a produs (cum ar fi, de exemplu, punctul de pe ecranul virtual unde s-a facut click))

2) si apoi ii spun calculatorului sa asculte apasarea mouse-ului si sa apeleze automat functia creata de mine la pasul anterior. (<– calculatorul se va ocupa (in mod automat) si de construirea si trimiterea parametrului catre functia mea)

Mai precis, pentru a folosi mouse-ul intr-un program care sa ruleze in simulatorul nostru igotopic trebuie o structura de program de genul urmator:

   function FunctieMouse(ev)
   {
      …
   }
   
   AscultaMouse(FunctieMouse);

In loc de FunctieMouse puteam sa scriu orice nume valid de functie. Singura constrangere este ca aceasta functie trebuie sa accepte un parametru (pe care l-am denumit ev de la eveniment).

Bun, dar ce scriu in functia FunctieMouse? Pai, actiunile pe care le vreau executate automat atunci cand se detecteaza un click de mouse (realizat cu butonul din stanga).

Dar daca vreau sa stiu in care punct dintre cele 10×10 din ecranul meu virtual s-a facut click?

Pentru asta am construit functiile predefinite XMouse si YMouse. Le voi apela in functia FunctieMouse, le voi da ca parametru pe ev (parametrul primit de FunctieMouse), iar ele imi vor returna coordonatele (pe axa x, respectiv pe axa y) punctului de pe ecranul virtual in care se gasea mouse-ul atunci cand s-a facut click.

Asa ca la inceputul functiei FunctieMouse va trebui sa am ceva de genul urmator:

   var xm = XMouse(ev);
   var ym = YMouse(ev);

Apoi voi putea folosi cele doua variabile de exemplu pentru a aprinde punctul de la coordonatele respective de pe ecranul virtual:

   Aprinde(xm, ym);

Si uite asa a rezultat fara sa ne dam seama un mic program care ne permite sa-l desenam pe Mickey facand click cu mouse-ul in punctele de pe ecran:

   function FunctieMouse(ev)
   {
      var xm = XMouse(ev);
      var ym = YMouse(ev);
      
      Aprinde(xm, ym);
   }
   
   AscultaMouse(FunctieMouse);

Testeaza programul in simulatorul de mai jos (luandu-l cu Copy de aici de mai sus si dand Paste in caseta de text din stanga) si apoi lasa artistul din tine sa se exprime liber :-).

(In caz ca ai sarit peste lectiile anterioare si nu stii cum sa folosesti simulatorul asta, uite ce trebuie sa faci exact: (1) selectezi cu mouse-ul programelul de deasupra (scris cu font colorat) si dai Copy, (2) faci click in caseta de text a simulatorului de deasupra acestui paragraf si dai Paste, (3) apesi butonul Reseteaza afisajul si apoi (4) apesi butonul Executa programul, dupa care (5) faci click-uri cu mouse-ul pe grilajul din dreapta simulatorului si vei vedea cum patratelele acelea devin din albe, negre.)

Asa cum te astepti daca mi-ai urmarit lectiile de pana acum, urmeaza o tema de gandire pentru tine: Dezvolta programul pentru a-l transforma intr-un mic Paint care sa iti permita sa selectezi din coloana din stanga una dintre cele 8 culori disponibile si apoi sa desenezi in restul ecranului folosind acea culoare.

Ti-a placut? Da da, atunci ma poti ajuta mult dand un share sau spunand si altora despre site. Scopul este ca in cel mai scurt timp programarea calculatoarelor sa nu mai fie o limba straina pentru niciun român.

Florin Bîrleanu