Medii de programare vizuala

Lucrare de Laborator 3

Exemplu de realizare a unei aplicații cu App Inventor.

În continuare, este prezentată realizarea unui joc (Fig. 1.54) în cadrul căruia utilizatorul are pe ecran o
poartă de fotbal, o minge, un indicator de forță a șutului, un indicator de direcție și un portar. Scopul
jocului este de a înscrie gol, având mingea în punctul de 11 m. Portarul, direcția și forța sunt în continuă
mișcare, fiecare având viteze diferite. Portarul se mișcă pe linia porții efectuând o cursă completă, care
se repetă până când mingea ajunge la el, sau mingea intră în poartă, sau mingea trece pe lângă poartă.
Utilizatorul are la dispoziție două butoane: unul pentru a șuta, iar celălalt pentru a repune mingea pe
punctul de la 11 m. În funcție de indicatorul de forță și de direcție, mingea va merge mai repede sau mai
încet, respectiv mai la stânga sau mai la dreapta. În momentul în care mingea intră în poartă este afișat
mesajul GOOOOL, când mingea este prinsă de portar, mesajul , iar când mingea trece pe lângă poartă,
mesajul Ce ratare.

Elemente vizuale
Terenul de fotbal este reprezentat de un element Canvas al cărui fundal este o imagine cu extensia .jpg
ce conține, în partea superioară, poarta de fotbal, imaginată într-o manieră tridimensională, punctul de
la 11 m, de unde se va executa lovitura de pedeapsă și două marcaje folosite pentru orientarea direcției
și stabilirea forței șutului. Portarul este reprezentat printr-un element de tipul ImageSprite, având ca
fundal o imagine sugestivă a unui portar, după cum se poate observa în Fig. 1.54. Portarul se mișcă pe
orizontală, între barele porții, cu viteza constantă. Mingea este reprezentată printr-un control de anima-
ție de tip Ball, având dimensiunea 5 și culoarea inspirată din jocurile de fotbal, galbenă.

Fig. 1.54 Joc realizat cu App Inventor

Indicatorul de direcție (Fig. 1.55) si indicatorul pentru forța șutului (Fig. 1.56) sunt realizați tot cu con-
troale de animație de tipul Ball. Aceștia execută o mișcare în plan orizontal, respectiv vertical, iar limitele
sunt evidențiate prin indicatoarele din fundal. Butonul Shoot este folosit pentru a lansa mingea către
poartă. Aceasta va avea direcția dată de indicatorul de direcție și forța dată de indicatorul de forță al
șutului. Butonul Retry repune mingea pe punctual de la 11 m, pentru a se putea efectua un nou șut pe
poartă.

Fig. 1.55 Indicator de direcție Fig. 1.56 Indicator pentru forța șutului

Stabilirea acțiunii
Acțiunea jocului este realizată foarte simplu și constă în sincronizarea a patru ceasuri. Ceasul utilizat
pentru mișcarea portarului are intervalul setat la 100 milisecunde. Poziția portarului are ordona-
ta constantă, de valoare 40, în sistemul de coordinate carteziene cu originea în colțul din stânga sus.
Abscisa variază între 104 și 186, bazat pe dimensiunea porții, simulând perfect realitatea. Incrementarea
si decrementarea abscisei se face cu un pas de 3 pixeli, astfel încât, într-o cursă completă, portarul să
acopere suprafața întregii porți.

Fig. 1.57 descrie modul de programare al ceasului portarului. Poziția portarului este stabilită de valoarea
curentă a variabilei globale pozG. La fiecare pas, se verifică dacă mișcarea este spre stânga sau spre
dreapta (dată de valoarea variabilei globale wayG) și dacă, după ajustarea corespunzătoare a poziției
portarului, acesta este între limitele admise.

Forța șutului este dată de poziția bilei albastre din Fig. 1.56. Acest indicator are abscisa fixă, cu valoa-
rea 306, iar ordonata variabilă, cu valori între 302 și 225. Intervalul este împărțit în 11 părți, viteza fiind
incrementată cu pas egal de la poziția 302 spre 255, și decrementată invers. Fig. 1.57 descrie modul de
programare al ceasului asociat forței șutului. Poziția bilei este stabilită de valoarea curentă a variabilei
globale Ball3.y. La fiecare pas, se verifică dacă mișcarea este în sus sau în jos (dată de valoarea variabilei
globale wayy) și dacă, după ajustarea corespunzătoare a poziției bilei, acesta este între limitele admise.
 Fig. 1.57 Stabilirea poziției portarului

Indicatorul de direcție a mingii este programat similar cu cel de stabilire a forței șutului, folosind un ceas
pentru a realiza mișcarea orizontală între punctele 236 si 306, ordonata 320. Intervalul este împărțit la
17, rezultând, astfel, o viteză diferită de deplasare față de indicatorul de forță a șutului. Dacă butonul
Shoot este apăsat când bila se află în centrul intervalului, aceasta va fi șutată perpendicular pe direcția
porții. Cu cât abaterea este mai mare față de centrul intervalului, cu atât mingea se va deplasa mai la
stânga sau mai la dreapta față de centrul porții.

Mingea se deplasează între pozițiile 103 și 190 pe abscisă și 50 și 306 pe ordonată. Viteza este dată de
indicatorul de viteză, în timp ce direcția este influențată atât de indicatorul de direcție, cât și de șut (Fig.
1.59). La fel cum în realitate, un șut puternic este mai puțin plasat, și în cadrul acestui joc un șut cu vite-
ză mai mică va avea șanse mai mari de a nimeri direcția porții.
 Fig. 1.58 Stabilirea forței șutului

Fig. 1.59 Determinarea direcției mingii

În cazul în care între minge și portar există coliziune, jocul se încheie cu mesajul Saved (Fig. 1.60). Dacă
mingea intră în poartă, mesajul este GOOOOOL, iar dacă mingea trece pe lângă poartă, va fi afișat mesa-
jul Ce ratare (Fig. 1.60).
 Fig. 1.60 Rezultatele posibile

Metoda CollidedWith a componente de tip ImageSprite, care implementează portarul, surprinde mo-
mentul în care mingea se ciocnește de portar (Fig. 1.61). În acest caz, sunt oprite toate ceasurile și se
afișează pe ecran mesajul corespunzător.

Evident, fiecare buton are asociată o acțiune proprie. Apăsarea butonului este surprinsă de metoda Click
asociată acestuia. Butonul Retry aduce jocul în stare inițial. Ca urmare, va opri ceasul mingii, va porni
celelalte trei ceasuri (pentru portar, direcție și forță) și va pune mingea la poziția punctului de 11 m.
Butonul Shoot, va opri ceasurile direcției și forței, va determina direcția de deplasare și va porni ceasul
mingii. Fig. 1.62 prezintă, în detaliu, modul în care cele două butoane au fost programate.

Fig. 1.61 Portarul prinde mingea

Fig. 1.62 Acțiunile asociate celor două butoane