start     Articole     Despre mine    

Cum il desenezi pe Mickey folosind un… mouse :-)

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 si apoi lasa artistul din tine sa se exprime liber :-).

(Browserul tau nu suporta Canvas!…)

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 nimeni in Romania.

Florin Bîrleanu





3 comments
DeaconuMihai
DeaconuMihai

var x

var y

var i

var culoare

//

var v =Vector (8)

v[0]=ALBASTRU

v[1]=VERDE

v[2]=GALBEN

v[3]=ROSU

v[4]=GRI

v[5]=NEGRU

v[6]=TURCOAZ

v[7]=ALB

//

y=10;

i=0;

while(i<8)

{

Aprinde(2+i,y,v[i]);

  i=i+1;

}

//

culoare =v[0];

function FunctieMouse(ev)

{

  var xm = XMouse(ev);

  var ym = YMouse(ev);

  if ((ym ==10)&&(xm!=1)&&(xm!=10))

  {

    culoare=v[(xm-2)];

  }

  else

  {

    if (ym<10)

    {

      Aprinde(xm, ym,culoare);

    }

  }

}

//

AscultaMouse(FunctieMouse);

Marius Cirstea
Marius Cirstea

var culoare;

Aprinde(3,11,ROSU);

Aprinde(4,11,ALBASTRU);

Aprinde(5,11,VERDE);

Aprinde(6,11,GRI);

Aprinde(7,11,GALBEN);

Aprinde(8,11,ALB);

Aprinde(9,11,NEGRU);


function FunctieMouse(ev)

 {

      var xm = XMouse(ev);

      var ym = YMouse(ev);

     if(ym==11)

     {

       if(xm==3)

        culoare = ROSU;

       if(xm==4)

         culoare = ALBASTRU;

       if(xm==5)

         culoare = VERDE;

       if(xm==6)

         culoare = GRI;

       if(xm==7)

         culoare = GALBEN;

       if(xm==8)

         culoare = ALB;

       if(xm==9)

         culoare = NEGRU;

     }    

     Aprinde(xm, ym,culoare);

   }

   AscultaMouse(FunctieMouse);



Foarte bun tutorialu asta... Totusi, nu mi-am dat seama care era a 8-a culoare. Sper sa ajute si pe altii sa inteleaga cat de putin "evenimentele"! Bafta!