Share
În această serie, creăm un joc Hangman pentru platforma Android. În primul tutorial, am setat aplicația până la prezentarea a două ecrane pentru utilizator și am făcut, de asemenea, un început cu elementele interfeței utilizator, imaginile și desenele de formă pentru a fi precise. În cel de-al doilea tutorial, vom mări aspectul jocului.
Crearea layout-ului jocului presupune utilizarea unui adaptor pentru a crea butoanele cu litere și poziționarea părților corpului pe care le vom afișa când utilizatorii selectează litere incorecte. De asemenea, vom stoca răspunsurile jucătorului în XML, le vom prelua și vom alege un cuvânt aleator folosind Java.
Pentru a vă reîmprospăta memoria, jocul final va arăta astfel.
În tutorialul anterior, am creat imagini pentru spânzurare și pentru cele șase părți ale corpului. Vom plasa acestea în interiorul jocului în acest tutorial. Pozițiile pe care le setați pentru aceste elemente trebuie să fie determinate de elementele de imagine pe care le utilizați. O abordare este importarea imaginilor într-un editor de imagini, cum ar fi Photoshop-ul Adobe, poziționarea manuală a acestora și apoi utilizarea acestora X și y pozițiile relative la imaginea burdufului pentru a determina pozițiile corecte care să se aplice fiecărei imagini în aspectul XML. Dacă începeți cu imaginile demonstrative pe care le-am inclus în tutorialul anterior, puteți utiliza valorile enumerate în acest tutorial.
Începeți prin deschiderea activity_game.xml. În interiorul layout-ului liniar pe care l-am adăugat în tutorialul anterior, introduceți un aspect relativ pentru a ține cele șapte imagini care vor alcătui zona gallows.
În interiorul layout-ului relativ pe care tocmai l-ați creat, începeți prin adăugarea imaginii spânzurate, după cum se arată mai jos.
Nu uitați să modificați numele trasabil dacă imaginea pe care o utilizați este denumită diferit. Am setat culoarea stângă și cea superioară a imaginii 0 astfel încât să putem poziționa celelalte imagini în funcție de poziția sa. Vom adăuga resursele de șir pentru descrierile conținutului puțin mai târziu în acest tutorial. Următorul este capul.
Dacă utilizați propriile imagini, va trebui să modificați în consecință plăcuța stângă și cea superioară. Noi folosim un id astfel încât să putem face referire la imaginea în cod. Acest lucru este necesar pentru a face să apară și să dispară în funcție de intrarea utilizatorului. Următoarea imagine pe care o adăugăm este corpul.
Acest lucru arată foarte asemănător cu ceea ce am făcut pentru cap și, după cum puteți vedea mai jos, brațele și picioarele sunt destul de asemănătoare.
Deschideți fișierul XML res / values al proiectului și adăugați șirurile de descriere a conținutului pe care le-am utilizat în fragmentele de cod de mai sus.
Spânzurători Capul Corpul Un braț Un picior
Reveniți la fișierul de aspect și comutați la Afișare grafică pentru a vedea rezultatul activității noastre. Reglați umplutura din partea superioară și stângă a fiecărei imagini pentru a regla poziția acestora, dacă este necesar.
Ori de câte ori începe un nou joc, părțile corpului trebuie să fie ascunse. Fiecare parte a corpului este dezvăluită dacă jucătorul alege o literă care nu este prezentă în cuvântul țintă.
Jocul va folosi o colecție de cuvinte predefinite, pe care le vom stoca în XML. În dosarul de resurse pentru resurse de proiect, adăugați un fișier nou și denumiți-l arrays.xml.
Treceți la XML creați o matrice și adăugați câteva cuvinte în ea.
Pentru acest tutorial, folosim o serie de cuvinte legate de calcul. Cu toate acestea, pentru a face jocul mai interesant, puteți lucra cu diferite categorii, fiecare categorie putând conține cuvinte legate de o anumită temă. Când utilizatorul face clic pe butonul de redare, îi puteți solicita să aleagă o categorie și să citească în gama relevantă de cuvinte.- ÎNCĂRCĂTOR
- CALCULATOR
- COMPRIMAT
- SISTEM
- APLICARE
- INTERNET
- STYLUS
- ANDROID
- TASTATURĂ
- SMARTPHONE
Înapoi în fișierul de aspect al activității jocului, adăugați un aspect liniar imediat după aspectul relativ pe care l-am adăugat pentru zona de spânzurare. Layout-ul liniar este rezervat zonei de răspuns.
Stocăm fiecare caracter al cuvântului țintă în propriul text, astfel încât să putem dezvălui fiecare literă separat. Vom folosi id din aspectul liniar în cod pentru a adăuga vizualizările de text de fiecare dată când este ales un cuvânt nou.
Deschide GameActivity și începeți prin adăugarea următoarelor declarații de import în partea de sus.
import android.content.res.Resources; import șiroid.graphics.Color; import șiroid.view.Gravity; import șiroid.view.ViewGroup.LayoutParams; importă android.widget.LinearLayout; import șiroid.widget.TextView;
În interiorul declarației de clasă, adăugați un onCreate așa cum se arată mai jos.
@Override protejate void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_game);
Am setat vizualizarea de conținut la fișierul de aspect creat cu un moment în urmă.
Înainte de a merge mai departe, trebuie să declarăm câteva variabile de instanță. Adăugați declarația imediat înainte de onCreate metodă.
cuvinte private String []; privat Random rand; private String currWord; linia privată LinearLayoutLayout; privat TextView [] charViews;
Colecția de cuvinte este stocată într-o matrice și aplicația utilizează Rand obiecte pentru a selecta un cuvânt din matrice de fiecare dată când utilizatorul începe un nou joc. Menținem o referință la cuvântul actual (currWord), aspectul pe care l-am creat pentru a păstra zona de răspuns (wordLayout) și o serie de vederi de text pentru litere (charViews). Înapoi în onCreate, după setarea vizualizării conținutului, solicitați resursele aplicației, citiți colecția de cuvinte și salvați-le în cuvinte variabila de instanta.
Resurse res = getResources (); cuvinte = res.getStringArray (R.array.words);
Rețineți că vom folosi numele pe care l-am dat matricea de cuvinte în XML. Inițializați Rand obiect și currWord şir.
rand = new Random (); currWord = "";
Obțineți o referință la zona de dispunere pe care am creat-o pentru literele de răspuns.
cuvântLayout = (LinearLayout) findViewById (R.id.word);
O serie de sarcini trebuie efectuate de fiecare dată când un jucător începe un nou joc. Să creăm o metodă de ajutor pentru a păstra totul organizat. După onCreate , adăugați următoarea metodă.
private void playGame () // jucați un joc nou
În interiorul joaca jocul , începeți prin alegerea unui cuvânt aleatoriu din matrice.
String newWord = cuvinte [rand.nextInt (words.length)];
Deoarece joaca jocul metoda este invocată atunci când utilizatorul alege să joace din nou după ce a câștigat sau a pierdut un joc, este important să ne asigurăm că nu alegem același cuvânt de două ori la rând.
în timp ce (newWord.equals (currWord)) newWord = cuvinte [rand.nextInt (words.length)];
Actualizați currWord instanță cu noul cuvânt țintă.
currWord = newWord;
Următorul pas este să creați o vizualizare text pentru fiecare literă a cuvântului țintă. Încă în interiorul metodei noastre de ajutor, creați o nouă matrice pentru a stoca vizualizările de text pentru literele cuvântului țintă.
charViews = TextView nou [currWord.length ()];
Apoi, eliminați orice vizualizare de text din wordLayout schemă.
wordLayout.removeAllViews ();
Utilizați un simplu pentru pentru a itera peste fiecare literă a răspunsului, a crea o vizualizare text pentru fiecare literă și a seta textul din textul textului la litera actuală.
Accentsconagua
pentru (int c = 0; < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); Șirul este stocat ca o serie de caractere. charAt ne permite să accesăm caracterele la un anumit index. Încă înăuntru pentru buclă, setați proprietățile afișajului în vizualizarea text și adăugați-o în aspect.
pentru (int c = 0; < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); charViews[c].setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); charViews[c].setGravity(Gravity.CENTER); charViews[c].setTextColor(Color.WHITE); charViews[c].setBackgroundResource(R.drawable.letter_bg); //add to layout wordLayout.addView(charViews[c]); Am setat culoarea textului în alb, astfel încât utilizatorul să nu o poată vedea în fundal alb. Dacă ghicesc litera corectă, proprietatea de culoare a textului este neagră pentru ao dezvălui jucatorului. Înapoi în onCreate metoda, apelați metoda de ajutor pe care tocmai am creat-o.
joaca jocul();
Vom extinde ambele onCreate și metoda ajutorului un pic mai târziu.
Următorul pas este să creezi o zonă pentru ca jucătorul să aleagă scrisori pentru a ghici. Reveniți la aspectul activității jocului și adăugați următoarea vizualizare a grilei pentru a ține apăsat butoanele cu litere. Introduceți vizualizarea grila imediat după aspectul liniar pe care l-am adăugat pentru cuvântul de răspuns.
Vom folosi un adaptor pentru a mapa literele alfabetului pe butoanele din vizualizarea rețelei. Am stabilit șapte butoane pe rând, după cum puteți vedea din numColumns atribut.
Fiecare literă va fi un buton adăugat la aspect folosind un adaptor. Adăugați un fișier nou în folderul de aspect al proiectului, denumiți-l letter.xml și umplându-l cu următorul fragment de cod.
Folosim una din formele trasabile pe care le-am creat ultima dată ca fundal și am setat-o onClick metoda pe care o vom implementa data viitoare. Dacă îmbunătățiți aplicația pentru a viza diferite densități ale ecranului, puteți lua în considerare adaptarea în mod corespunzător a atributului de înălțime.
Adăugați o nouă clasă în pachetul src al proiectului, numiți-l LetterAdapter, și alegeți android.widget.BaseAdapter ca superclaj.
După cum veți vedea, o clasă de adaptor include o serie de metode standard pe care le vom implementa. Adăugați următoarele declarații de import în noua clasă.
importați android.content.Context; import șiroid.view.LayoutInflater; import șiroid.widget.Button;
În interiorul declarației de clasă, adăugați două variabile de instanță după cum se arată mai jos.
private String [] litere; privat LayoutInflater letterInf;
scrisori array va stoca literele alfabetului și inflaterul de aspect va aplica aspectul butonului pe care l-am definit pentru fiecare vizualizare gestionată de adaptor. După variabilele de instanță, adăugați o metodă constructor pentru adaptor.
public Adaptor Letter (Context c) // adaptor de configurare
În interiorul constructorului, instanțiați matricea alfabetică și atribuiți literele A-Z fiecărei poziții.
litere = șir nou [26]; pentru (int a = 0; < letters.length; a++) letters[a] = "" + (char)(a+'A');
Fiecare caracter este reprezentat ca număr, astfel încât să putem seta literele A la Z într-o buclă pornind de la zero adăugând valoarea caracterului A la fiecare index al matricei. Încă în interiorul metodei constructorului, specificați contextul în care vrem să umflam aspectul, care va fi trecut din activitatea principală mai târziu.
letterInf = LayoutInflater.from (c);
Eclipse ar fi trebuit să creeze o getCount schiță de metodă. Actualizați punerea sa în aplicare după cum urmează.
@Override publice int getCount () return letters.length;
Acesta reprezintă numărul de vizionări, câte unul pentru fiecare literă. Nu numim metodele din clasa adaptoare explicit în cadrul aplicației. Este sistemul de operare care le folosește pentru a construi elementul de interfață cu care aplicăm adaptorul, care în acest caz va fi vizualizarea rețelei.
Actualizați punerea în aplicare a getView așa cum se arată în fragmentul de cod de mai jos.
@Override public Vizualizați getView (poziția int, Vizualizare convertView, ViewGroup părinte) // creați un buton pentru litera de la această poziție în alfabet Button letterBtn; dacă (convertView == null) // umfla butonul layout butonBtn = (Buton) letterInf.inflate (R.layout.letter, parent, false); altceva letterBtn = (Button) convertView; // setați textul la această literă letterBtn.setText (litere [poziție]); scrisoare de returBtn;
Ia-ți un moment să lase totul să se scufunde. În esență, această metodă construiește fiecare vizualizare mapată pe elementul interfeței utilizator prin adaptor. Umflăm aspectul butonului pe care l-am creat și stabilim litera în funcție de poziția din alfabet pe care o reprezintă. Am afirmat că vor fi cartografiate 26 de vizualizări, poziția fiecăruia reflectând poziția sa în matricea alfabetică. Puteți lăsa celelalte metode în clasa adaptoare așa cum sunt.
@Override obiect obiect getItem (int arg0) return null; @Override public long getItemId (int arg0) return 0;
Revedeți clasa de activitate a jocului și adăugați o variabilă de instanță pentru vizualizarea rețelei și adaptor.
literele private GridView; privat LetterAdapter ltrAdapt;
De asemenea, trebuie să adăugați o altă declarație de import.
import șiroid.widget.GridView;
În onCreate înainte de linia în care apelați joaca jocul metoda helper, obțineți o referință la vizualizarea rețelei.
literele = (GridView) findViewById (R.id.letters);
Adăugați joaca joculimplementarea actuală cu următorul fragment. În acest fragment, instanțiăm adaptorul și îl setăm în vizualizarea rețelei.
ltrAdapt = noul LetterAdapter (acest lucru); letters.setAdapter (ltrAdapt);
Rulați aplicația în emulator și ar trebui să vedeți interfața cu utilizatorul. Cu toate acestea, încă nu veți putea să interacționați cu butoanele. Asta ne vom concentra pe cea de-a treia și ultima tranșă a acestei serii.
Dacă rulați aplicația în acest moment, vă va prezenta interfața jocului, dar nu va răspunde încă la interacțiunea cu utilizatorul. Vom implementa funcționalitatea rămasă în partea finală a acestei serii.
Când un jucător dă clic pe butoanele cu litere, aplicația trebuie să verifice dacă litera selectată este inclusă în cuvântul destinație și să actualizeze răspunsul și să alunece în consecință. De asemenea, vom prezenta un dialog jucătorului dacă câștigă sau pierde și vom adăuga și un buton de ajutor. În final, vom adăuga navigația de bază printr-o bară de acțiune.
