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, despreinstructiunea daca,
despre instructiunea cat timp, despre vectori si matrici, desprefunctii 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 predefinitaTastaApasata, 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.

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
.)