start     Articole     Despre mine    

apasa butonul potrivit

Sunt foarte incantat! Azi vom face poate cel mai spectaculos pas catre construirea unui joc.

Pana aici am parcurs impreuna in lectiile trecute conceptele fundamentale pe care oricine isi doreste sa devina programator trebuie sa le stapaneasca intr-un mod personal. Am vorbit despre instructiuni, despre variabile, despre instructiunea daca, despre instructiunea cat timp, despre vectori si matrici, despre functii si despre operatori.

Imbinand in moduri ingenioase toate cunostintele si abilitatile deprinse pana acum iti poti construi propriul joc. Da, ai (aproape) tot ce iti trebuie!

Mai lipseste doar un aspect. Un aspect simplu, dar fara de care n-am fi putut vorbi niciodata de jocuri pe calculator. Este vorba despre interactivitate.

Si cum putem asigura aceasta interactivitate altfel decat lasand utilizatorului programului nostru posibilitatea de a da comenzi programului? (Altfel am putea programa doar poze sau cel mult filme, si nicidecum jocuri.)

Cum cea mai utilizata metoda de a interactiona cu calculatorul este (inca) tastatura, iti voi arata in lectia de azi cum iti poti face programul sa raspunda asa cum doresti la apasarea anumitor taste.

Lectia va fi una scurta, insa intelegerea ei pe deplin va necesita exercitiu din partea ta.

 

Hai sa vedem acum cum putem sa ii spunem calculatorului nostru virtual ce sa faca atunci cand se apasa o tasta.

La prima vedere lucrurile sunt un pic mai complicate, caci imbina practic majoritatea informatiilor de pana aici. Insa daca lectiile trecute nu ti-au pus probleme, nici aceasta nu o va face.

In momentul in care calculatorul detecteaza apasarea unei taste el apeleaza in mod automat o functie care a fost specificata in acest sens. In cadrul acelei functii se citeste tasta care a fost apasata si se specifica modul in care calculatorul trebuie sa reactioneze la acest eveniment.

In paragraful anterior an rezumat intreaga lectie.

Hai sa-l reparcurgem pas cu pas si sa detaliem acolo unde e cazul.

La apasarea vreunei taste calculatorul apeleaza in mod automat o functie specificata de noi. Buuun! E foarte bine ca se ocupa el in mod automat de treaba asta. Mai ramane sa vedem (1) cum ii putem spune ce functie sa apeleze si (2) ce caracteristici trebuie sa aiba aceasta functie.

Cat priveste (1), raspunsul consta in functia predefinita AscultaTaste. Numele ii e destul de sugestiv, nu? Aceasta functie asteapta ca parametru numele unei functii care sa contina functionarea dorita in cazul apasarii tastelor. Prin urmare, in program o vom apela in felul urmator:

AscultaTaste(FunctieTaste)

In loc de FunctieTaste pot folosi orice nume valid de functie. Singura constrangere este (si cu asta raspund la intrebarea (2)) ca aceasta functie trebuie sa primeasca un parametru. In acest parametru calculatorul (care, repet, va apela in mod automat functia FunctieTaste) va pune informatii despre evenimentul care s-a produs (adica apasarea tastei).

Sa zicem ca denumim ev (de la eveniment) parametrul functiei FunctieTaste. Prin urmare, definitia ei va arata in felul urmator:

function FunctieTaste(ev)
{
       // instructiunile din cadrul functiei,
       //  ce vor fi executate in mod automat
       //  la fiecare apasare de tasta detectata.
       …
}

Evident, asa cum am zis mai sus, simpla definitie a acestei functii nu este suficienta pentru ca programul sa raspunda la apasarea tastelor. Este necesar ca dupa ce definesc aceasta functie sa-i spun calculatorului ca pe ea doresc sa o apeleze atunci cand detecteaza vreo tasta apasata. Cum fac asta? Am spus mai sus: prin apelul AscultaTaste(FunctieTaste).

Bun. Aproape am terminat.

Ramane doar sa vedem ce scriem in cadrul functiei FunctieTaste.

Pai n-ar trebui sa fie prea greu, nu? Doar avem parametrul ev, in care ni se trasmit (in mod automat) informatii despre evenimentul care s-a produs.

Da, chiar nu e greu. Singura mica problema e ca in ev nu ni se spune direct ce tasta a fost apasata. Dar nu e grav, caci avem la dispozitie functia predefinita TastaApasata, care face exact acest lucru. Primeste ca parametru variabila ev si returneaza tasta ce a fost apasata, in format literal.

Practic, daca la inceputul functiei FunctieTaste scriem:

       var tasta = TastaApasata(ev)

in variabila tasta vom avea memorata in format literal tasta ce a fost apasata.

OK, dar ce e cu formatul asta literal? Pana aici in variabile am memorat doar numere.

Ei bine, in variabile se pot memora si caractere (litere). (De fapt, la nivel intern tot cu numere se lucreaza, fiecarui caracter de pe tastatura corespunzandu-i un cod numeric. Insa pentru programator este mai simplu sa lucreze cu caractere.)

Aceste caractere trebuie puse intre apostrofuri. De exemplu, caracterul corespunzator apasarii tastei A este 'a' (iar 'A' corespunde apasarii combinatiei de taste SHIFT+A).

Asadar, daca doresc sa verific daca s-a apasat tasta A pot scrie in program (in cadrul functiei FunctieTaste, bineinteles, si presupunand ca in variabila tasta am tasta apasata) o conditie de genul urmator:

if (tasta == 'a')
{
       // instructiuni ce trebuie executate daca s-a
       //  apasat tasta A
       …
}

Cam asta e. Acum e timpul sa punem cap la cap tot ce am zis pana aici si sa facem un mic program demonstrativ.

 

Hai sa facem un program in care sa plimbam pe ecranul virtual un punct cu ajutorul tastelor A (stanga), S (jos), D (dreapta) si W (sus).

Si ca lucrurile sa fie mai interesante, as propune ca punctul sa fie rosu daca ne gasim in centrul ecranului (considerand centru in acest caz patratul cu coltul stanga-jos la coordonatele (3, 3) si coltul dreapta-sus la coordonatele (8, 8)), si sa fie negru in caz contrar (deci pe primele doua linii din marginile ecranului virtual).

Fara alte comentarii preliminare, iata programul:

// Program deplasare punct din taste
// 1) Initializari:
var x = 1
var y = 1
Aprinde(x, y)
// 2) Functia de tratare a apasarii tastelor:
function FunctieTaste(ev)
{
      var tasta = TastaApasata(ev)
      Stinge(x, y)
      if ( (tasta == 'a') && (x > 1) )
      {
             x = x-1
      }
      if ( (tasta == 'd') && (x < 10) )
       {
              x = x+1
      }
      if ( (tasta == 's') && (y > 1) )
      {
             y = y-1
      }
      if ( (tasta == 'w') && (y < 10) )
       {
              y = y+1
       }
       if ( (x>=3)&&(y>=3)&&(x<=8)&&(y<=8) )
      {
             Aprinde(x, y, ROSU)
      }
      else
      {
             Aprinde(x, y)
      }
}
AscultaTaste(FunctieTaste)

Il poti testa mai jos.

(Browserul tau nu suporta Canvas!…)

N-a fost chiar greu, nu? Dupa cum ai vazut, programul contine in esenta doua parti: 1) o parte de initializari (in care nu fac altceva decat sa definesc doua variabile (x si y) in care voi memora coordonatele curente ale punctului pe ecran, coordonate pe care le initializez cu (1, 1) (deci punctul stanga-jos al ecranului), si sa aprind (cu negru) punctul de la coordonatele (x, y)) si 2) o parte in care spun calculatorului ce sa faca atunci cand se apasa vreo tasta.

Si daca intram in detaliile functiei FunctieTaste vei vedea ca si acolo lucrurile sunt destul de clare. Mai intai aflu ce tasta a fost apasata, apoi sting punctul de la coordonatele (x, y), dupa care verific daca a fost apasata vreuna dintre tastele A, S, D sau W si modific in mod corespunzator coordonata x sau y (verificand, de asemenea, ca punctul sa nu iasa in afara ecranului). Iar la final aprind punctul de la coordonatele (x, y) (care probabil au fost modificate) fie cu rosu, fie cu negru (in functie de pozitia in care se gaseste punctul pe ecran).

Ca exercitiu te-as ruga sa modifici programul astfel incat elementul care se plimba pe ecran sa nu mai fie doar un punct, ci un mic patratel format din 4 puncte. Ce zici? Accepti provocarea?

Stiu ca nu e usor, dar daca chiar iti doresti sa programezi un joc trebuie sa-ti pui creierul in miscare. (Doare doar putin. Apoi devine chiar placut 🙂 .)

 

 

Abia asteptand sa-ti citeasca reactiile,

Florin Bîrleanu





Loading Facebook Comments ...