Aplicatia Pong

Pong este un joc simplu, care consta intr-o paleta (controlata de utilizator) si o bila. Bila se loveste de paleta si de cei 3 pereti. Daca bila loveste paleta, utilizatorul castiga puncte. Daca bila aluneca in spatele paletei, jocul s-a terminat.

Constructia aplicatiei:

DESIGN: App Inventor Designer

1. Pentru a deschide fereastra App Inventor Designer, mergem la adresa http://appinventor.mit.edu si ne logam cu un cont Google (Gmail account).

2. Descarcam si salvam o poza de paleta si un fisier de sunet pentru a simula loviturile (profesorul le va pune la dispozitie).

3. Pe coloana stanga din Designer, deschidem paleta Basic, si prima data tragem o componenta Label in Viewer (#1). Sub panoul Components, activam componenta Label1 si ii schimbam numele in „ScoreLabel“ (#2). Sub panoul Properties (in partea dreapta), stergem textul afisat de componenta Label1 si il inlocuim cu “Score“ (#3), schimbandu-i marimea fontului la 18, latimea la 150 pixels, si inaltimea la 30 pixels.

4. Din paleta Basic, tragem doua butoane in Viewer sub etichete. Redenumim primul buton in „StartButton“ si ii schimbam campul de text in „Start.“ Redenumim al doilea buton in „ResetButton“ si ii schimbam campul de text in „Reset.“

5. De sub paleta Screen Arrangement, tragem o componenta Horizontal Arrangement in viewer. Tragem si un ScoreLabel in componenta Horizontal Arrangement, apoi doua butoane, langa aceasta (putem vedea asta si sub panoul Components de asemenea).

6. Din paleta Basic, tragem o componenta Canvas si ii setam latimea la 300 si inaltimea la 390 pixeli de sub panoul Properties. Putem schimba fundalul canvas-ului cu orice culoare dorita.

7. De sub panoul Animation, tragem o componenta Ball si una Image Sprite in componenta Canvas din Viewer(#1). Activam componenta Image Sprite (#2) si ii schimbam imaginea in paddle.gif (#3).

8. Activam Ball1 in panoul Components si mergem la panoul Properties pentru a seta heading-ul la 30, intervalul la 50, radius la 20, si viteza la 5. Putem schimba culoarea bilei (PaintColor) in orice culoare dorim.

BUILD: Blocks Editor

In coltul dreapta sus al Designer, facem click pe butonul Blocks Editor. Asteptam cateva momente cat timp editorul se incarca. Aceasta dureaza ceva timp si adesea ne cere acceptul, ok-ul etc. Caci programul java se descarca in calculator. Daca aveti probleme cu incarcarea the Blocks Editor, vizitati http://www.java.com pentru a vedea daca exista java instalat, sau pentru a diagnostica erorile de instalare. Odata ce Blocks Editor s-a deschis, exista cateva optiuni ce ruleaza pe partea stanga a ecranului.

1. Din paleta MyBlocks, deschidem drawer-ul Canvas1 si tragem blocul Canvas1.Touched in zona de lucru. Acest bloc vine automat cu 3 blocuri: x, y si touchedSprite.

2. Din paleta MyBlocks deschidem drawer-ul ImageSprite1 si tragem blocul set ImageSprite1.x in taietura „do” a blocului Canvas1.Touched.

3. Din paleta My Blocks, deschidem drawer-ul My Definitions si tragem blocul valoare x la limita blocului set ImageSprite1.x. Se vor uni ca 2 piese de puzzle magnetic.

Blocurile valoare x si y au fost adaugate automat la drawer-ul My Definitions cand am pus blocul Canvas1.Touched in zona de lucru. De fiecare data cand o atingere este detectata pe Canvas1, aceste „variabile” vor fi atribuite valorilor coordonatelor x si y a locatiei atingerii.

4. Din paleta My Blocks, deschidem drawer-ul Ball1 si tragem blocul Ball1.EdgeReached in zona de lucru, precum si blocul Ball1.Bounce. Dupa ce am facut aceasta, deschidem drawer-ul My Definitions si inseram blocul limita intr-o deschizatura a blocului Ball1.Bounce ce cere pentru o valoare limita. Bounce este o functie integrata pentru sprites. Ii spune Sprite-ului sa se indeparteze de perete.

Blocul Ball1.EdgeReached genereaza automat variabila limita sub My Definitions. Cand bila atinge o limita, trebuie sa raporteze acea informatie programului principal. Face aceasta prin stocarea unui numar in variabila limita. In imaginea de mai jos invatam despre valorile limita din canvas-urile lui App Inventor.

App Inventor atribuie valori numerice limitelor unui canvas, dupa cum urmeaza:
top = 1, right = 3, bottom = -1, left = -3

Valorile Heading pentru obiecte animate merg intr-un cerc ca o busola, cu valori intre 0 si 360 grade.
Un obiect care se misca spre partea superioara a ecranului are un heading de 90 grade.

5. Din paleta My Blocks, deschidem drawer-ul StartButton si tragem blocul StartButton.Click in Viewer (#1). Facem click pe drawer-ul Ball1 si tragem un set Ball1.Heading to block si il plasam in sectiunea „do“ a blocului StartButton.Click block (#2). Din paleta Built-In a lui Math drawer, tragem blocul call random integer si il adaugam la sfarsitul blocului Ball1.Heading (#3).

Pull out a number 123 block from the Built-In palette's Math drawer. Plug it into the first to the „from“ area and type „225“ into the block in place of the „123.“ Do this again for the „to“ area and type „315.“ This will make the ball take on a heading between 225 and 315 degrees when the start button is clicked (see heading diagram above).

6. Din drawer-ul Ball1 , tragem un set Ball1.Speed to block si il plasam sub blocul set Ball1.Heading. Punem un bloc numar 123 in spatiul „to“ socket si tastam 5. Aceasta va muta bila 5 pixeli in directia heading-ului de fiecare data cand ticaie ceasul intern. Ceasul intern al unui obiect se numeste interval. Intervalul unui sprite de bila este setat initial la 1000 milisecunde (=1 secunda), dar il putem modifica de la proprietati.

7. Din drawer-ul Ball1, tragem un bloc Ball1.MoveTo si il punem sub blocul Ball1.Speed. Din Math drawer, tragem un bloc de impartire (/) si il punem in deschizatura „x” din blocul Ball1.MoveTo. Din paleta My Blocks, deschidem drawer-ul Screen1 si tragem un bloc Screen1.Width block si il punem in prima zona libera din blocul diviziune. Facem click pe a 2a zona libera si tastam „2“ (un bloc numar 123 apare cu 2 in casuta de text). Din drawer-ul Ball1, tragem un bloc Ball.Radius si il punem in zona „y“ a blocului Ball1.MoveTo. Aceasta va pune bila pe mijlocul ecranului in partea superioara de fiecare data cand se apasa butonul de start. (Practic blocul „MoveTo“ ii spune lui Ball1 sa se mute la coordonata x care reprezinta jumatate din latimea ecranului si la coordonata y care este egala cu radius de bila insasi – care este un numar foarte mic, astfel ca bila va parea foarte aproape de partea superioara a ecranului.)

8. Din drawer-ul Ball1, tragem un bloc set Ball1.Enabled. Facem click pe ecran chiar langa si apoi pe „Logic“ din meniul mic colorat ce apare, apoi click pe „true“. Asta va face bila sa inceapa sa se miste.

9. Din drawer-ul Ball1, tragem un bloc set Ball1.Interval to block si il setam la 10. Asta va face ca bila sa se miste la fiecare 10 millisecunde (se va deplasa numarul de pixeli specificati in proprietatea Speed). Dupa ce blocul interval este creat, mutam blocurile de set Ball1.Enabled and Ball1.Interval deasupra blocului Ball1.Heading astfel incat sa apara ca primele blocuri din blocul event StartButton.Click.

10. Din drawer-ul ImageSprite1, tragem un bloc when Image Sprite1.Dragged si il punem in zona de lucru. Din acelasi drawer, tragem un ImageSprite1.MoveTo si il punem in blocul when ImageSprite1.Dragged. Facem click pe drawer-ul My Definitions, si tragem un bloc de tip currentX value si il punem in deschizatura „x“. Din drawer-ul ImageSprite1, tragem un bloc ImageSprite1.Y si il punem in deschizatura „y”. Aceasta va muta paleta pe axa x (orizontal) cand o deplasamdar nu o va muta pe axa y (vertical).

11. Din drawer-ul Ball1, tragem un bloc when Ball1.CollidedWith si il punem intr-o zona deschisa. Facem click pe cuvantul „other“ din blocul nume si tastam „ImageSprite1“ (trebuie ca numele sprite-ului sa fie exact).

12. Din drawer-ul Ball1, tragem un bloc set Ball1.Heading si il punem in interiorul blocului Ball1.CollidedWith. Facem click pe paleta Built-In si deschidem Math drawer, si tragem un bloc de impartire. Facem click in prima zona libera si tastam „360“. Facem click pe paleta MyBlocks deschidem drawer-ul Ball1, si apoi tragem un bloc Ball1.Heading si il punem in a 2a zona libera. Aceasta va intoarce bila cand loveste paleta. (Practic, uitandu-ne la diagrama de mai jos, vedem ce se intampla cand impartim un heading la 360. Heading-urile trebuie sa fie intre 0 si 360 si un numar negativ va fi tratat ca si cand ar fi negativ.

13. In spatiul de lucru, gasim locul in care sa punem blocul Ball1.EdgeReached. vom adauga cateva blocuri noi la acest eveniment, pentru moment tragem blocul Ball1.Bounce de langa Ball1.EdgeReached ca pentru a le separa. Lasam blocul Ball1.Bounce sa pluteasca liber in zona de lucru pentru moment.

14. Sub paleta Built-In, deschidem drawer-ul Control si tragem un block de tip daca…atunci…altfel (ifelse). Din Math drawer, tragem un bloc de egal (=) si il punem in deschizatura „test”. Deschidem drawer-ul My Definitions si tragem un bloc de valoare limita si il punem in prima zona libera. Facem click pe a 2a ona libera si tastam “-1“ (pentru partea de jos sau limita sudica). Aceasta va testa sa vada daca limita atinsa reprezinta limita de jos a canvas-ului.

15. Din drawer-ul Ball1, tragem un bloc set Ball1.Enabled to block si il punem in zona „then-do“ a blocului ifelse. Facem click la dreapta acestuia pentru a obtine meniul popup, apoi facem click pe „Logic“ si alegem „false“. Aceasta va opri bila din miscare cand trece de paleta. In plus, tragem un bloc de set scoreLabel.Text din drwaer-ul ScoreLabel si il atasam sub blocul Ball1.Enabled. Din paleta Built-In, deschidem drawer-ul Text, si tragem un bloc text si il punem dupa „to“ (putem da de asemenea click pe zona de lucru pentru a face sa apara meniul din care alegem textul). Facem click pe text pentru a-l schimba in „Game Over!“ Acest text va aparea pe ecran in ScoreLabel cand bila trece dincolo de paleta.

16. Acum luam blocul orfan Ball1.Bounce care a stat singurel in spatiul de lucru si il punem in deschizatura „else-do“ a blocului ifelse. Ar trebui sa aiba totusi blocul de valoare limita atasat in spatiul sau „edge”. Acest intreg bloc ifelse va face bila sa ricoseze din toate marginile, mai putin din cea sudica. Pasii 13-15 ar trebui sa duca la un set de blocuri ca acesta:

17. Din paleta Built-In, deschidem drawer-ul Definition, tragem o variabila def ca si bloc si o punem intr-o zona deschisa. Facem click pe „variable“ si tastam „score“ pentru a schimba numele variabilei de scor. Punem un bloc de tip numar cu valoarea 0 in el in deschizatura „as. Aceasta creeaza o variabila numita „score“ si ii seteaza valoarea la 0.

18. De sub paleta Built-In, deschidem drawer-ul Definition, si tragem un bloc de procedura si il punem intr-o zona deschisa. Facem click pe“procedure“ si o redenumim in „updateScore“. Then Apoi, din drawer-ul Definition drawer, tragem un bloc de nume si apoi facem click pe „name” si tastam „scorevalue”. Aceasta creeaza un parametru pentru procedura care se numeste „scorevalue“. Un parametru este o variabila temporara care tine o valoare pentru o procedura. Valoarea este specificata cand procedura este apelata.

19. Din paleta MyBlocks, deschidem My Definitions si tragem un set global score to block si il punem in zona „do“ a procedurii updateScore. Din My Definitions tragem un bloc de valoare scorevalue si il punem in zona „to“. Aceasta seteaza variabila de scor la valoarea trecuta.

20. Din drawer-ul ScoreLabel, tragem un bloc scoreLabel.Text block si il punem dupa blocul anterior. Din paleta Built-In, deschidem drawer-ul Text, tragem un bloc join si il punem dupa „to“. Setam primei zone libere textul „Score:” si celei de-a 2a zone scorul global din paleta MyBlocks si din drawer-ul My Definitions. Aceasta va seta textului etichetei de scor un string care leaga „Score:” de actuala valoare a variabilei de scor.

21. Sub paleta My Blocks, deschidem drawer-ul My Definitions, si tragem un bloc call updateScore pe care il punem la finalul butonului StartButton. Facem click langa bloc si tastam 0 pentru a reseta scorul la 0.

22. Sub paleta My Blocks, deschidem drawer-ul My Definitions, tragem alt bloc call updateScore si il punem in blocul Ball1.CollidedWith. De sub paleta Built-In, deschidem Math drawer si tragem un bloc de suma (+) pe care il punem la finalul blocului call updateScore. Din drawer-ul My Definitions, tragem un bloc de scor global si il punem in prima zona libera. Facem click in a 2a zona libera si tastam 1. Aceasta va incrementa scorul cu o unitate.

23. De sub paleta My Blocks, deschidem drawer-ul ResetButton si tragem when ResetButton.Click in zona deeschisa. Ne intoarcem la setul de blocuri incercuite de blocul StartButton.Click pe care l-am creat inainte si activam intreagul bloc procedura, facand click o data pe blocul verde StartButton.Click, Ball1.Move to, si tinand apasat pe tasta (ctrl) si pe tasta c in acelasi timp pentru a copia blocul. Apoi facem click intr-o zona deschisa (oriunde) si tinem apasate impreuna tastele ctrl+v pentru a lipi ce am copiat.. Tragem intregul bloc copiat in ResetButton.Click.

Din drawer-ul ScoreLabel, tragem ScoreLabel.Text to block si il plasam sub blocul anterior. Tastam „0“ si tragem blocul „0“ in deschizatura goala a blocului ScoreLabel.Text to block. In plus, deschidem drawer-ul Text de sub paleta Built-In si tragem un bloc join pe care il punem dupa ScoreLabel.Text. Setam primei zone libere textul „Score:“ si celei de-a doua numarul zero. (Intrebare: Ar merge sa facem acelasi lucru apeland procedura UpdateScore cu 0 ca si parametru scorevalue? De ce sau de ce nu?)

Gata! Pentru putin amuzament, vom incerca acum sa schimbam culoarea si dimensiunea bilei, respectiv a paletei pentru a ne personaliza aplicatia.

Exercitiul 1: Schimbarea vitezei si dimensiunii bilei
Putem face viteza bilei sa creasca si dimensiunea bilei sa descreasca cand se scorul creste cu 10?
Indiciu: Sub math Drawer, blocul reminder (a,b) returneaza rezultatul impartirii lui a la b si ia restul. Ex: remainder (11,5)=1, remainder(-11,5)=-1, remainder(11,-5)=1, remainder(-11, -5)=-1

Exercitiul 2: Adaugarea de sunete

Incarcam fisierele audio in Designer. Facem ca sunetul „noink” sa se declanseze cand bila loveste peretele, „ta-da” cand creste viteza bilei si sunetul de buzzer cand bila trece dincolo de paleta.

Exercitiul 3:
• Jucatorul sa aiba 3 vieti, adica sa poata pierde de 3 ori bila dincolo de paleta, inainte de a scrie Game Over.
• Scorul sa descreasca cu o unitate de fiecare data cand jucatorul pierde o viata.

android_incepatori/laborator/laborator4.txt · Ultima modificare: 2013/08/01 18:13 de către daiana.negulici
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0