I denne serien lager vi et Hangman-spill for Android-plattformen. I den første opplæringen satte vi applikasjonen opp for å presentere to skjermer til brukeren, og vi gjorde også en start med brukergrensesnittelementene, bildene og formtrekkene skal være nøyaktige. I den andre opplæringen vil vi zoome inn på spillets layout.
Å lage spillets layout vil innebære å bruke en adapter for å lage brevknapper og plassere kroppsdelene vi vil vise når brukerne velger feil bokstaver. Vi lagrer også spillernes svar i XML, henter dem og velger et tilfeldig ord ved hjelp av Java.
For å oppdatere minnet ditt, er dette det siste spillet vil se ut.
I den forrige opplæringen skapte vi bilder for galgen og de seks kroppsdelene. Vi vil plassere disse inne i spillets layout i denne opplæringen. Stillingene du angir for disse elementene må bestemmes av bildelementene du bruker. En tilnærming er å importere bildene til et bilderedigeringsprogram, for eksempel Adobe Photoshop, plassere dem manuelt, og bruk deretter deres x
og y
stillinger i forhold til galgenbildet for å finne ut de riktige stillingene som skal gjelde for hvert bilde i XML-oppsettet. Hvis du starter med demobildene vi inkluderte i den forrige opplæringen, kan du bruke verdiene som er oppført i denne opplæringen.
Start med å åpne activity_game.xml. Inne i den lineære oppsettet som vi la til i den forrige opplæringen, skriv inn et relativ layout for å holde de syv bildene som vil gjøre opp i galgenområdet.
Innenfor det relative oppsettet du nettopp har opprettet, begynner du med å legge til galgbildet som vist nedenfor.
Husk å endre det trekkbare navnet hvis bildet du bruker, heter annerledes. Vi setter bildets venstre og topppolstring til 0
slik at vi kan plassere de andre bildene i forhold til stillingen. Vi legger til strengressurser for innholdsbeskrivelsene litt senere i denne opplæringen. Neste opp er hodet.
Hvis du bruker dine egne bilder, må du endre venstre og topppolstring tilsvarende. Vi bruker en id
Tilordne slik at vi kan referere til bildet i koden. Dette er nødvendig for at det skal vises og forsvinne avhengig av brukerens innspill. Det neste bildet vi legger til er kroppen.
Dette ser veldig ut som det vi gjorde for hodet og, som du ser nedenfor, er armer og ben ganske liknende.
Åpne prosjektets res / values strings XML-fil og legg til strengene for innholdsbeskrivelse som vi har brukt i de ovennevnte kodesnittene.
The Gallows Hodet Kroppen En arm Et bein
Gå tilbake til layoutfilen og bytt til Grafisk layout fanen for å se resultatet av vårt arbeid. Juster topp og venstre polstring av hvert bilde for å justere posisjonen om nødvendig.
Når et nytt spill er startet, må kroppsdelene være skjult. Hver kroppsdel avsløres hvis spilleren velger et brev som ikke er tilstede i målordet.
Spillet vil bruke en samling av forhåndsdefinerte ord, som vi vil lagre i XML. I mappen for prosjektressursverdier legger du til en ny fil og heter den arrays.xml.
Bytt til XML fanen, opprett en matrise, og legg til noen ord til det.
For denne opplæringen bruker vi en rekke ord relatert til databehandling. Men for å gjøre spillet mer interessant, kan du jobbe med ulike kategorier med hver kategori som inneholder ord relatert til et bestemt tema. Når brukeren klikker på avspillingsknappen, kan du be dem om å velge en kategori og lese i den aktuelle rekke ord.- LADER
- DATAMASKIN
- TABLETT
- SYSTEM
- APPLIKASJON
- INTERNETT
- STYLUS
- ANDROID
- TASTATUR
- SMART
Tilbake i spillets aktivitetslayoutfil, legg til en lineær oppsett umiddelbart etter det relative oppsettet vi la til for galgenområdet. Den lineære oppsettet er reservert for svarområdet.
Vi lagrer hver karakter av målordet i sin egen tekstvisning, slik at vi kan avsløre hvert brev separat. Vi vil bruke id
av den lineære oppsettet i koden for å legge til tekstvisninger hver gang et nytt ord er valgt.
Åpne GameActivity
klasse og begynn med å legge til følgende importerklæringer øverst.
importere android.content.res.Resources; importere android.graphics.Color; importere android.view.Gravity; importer android.view.ViewGroup.LayoutParams; importer android.widget.LinearLayout; importer android.widget.TextView;
I klassedeklarasjonen legger du til en onCreate
metode som vist nedenfor.
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_game);
Vi stiller innholdsvisningen til layoutfilen vi opprettet for øyeblikket.
Før vi går videre, må vi deklarere noen instansvariabler. Legg til erklæringen umiddelbart før onCreate
metode.
private strenger [] ord; privat tilfeldig rand; private strenger currWord; privat LinearLayout wordLayout; privat tekstvisning [] charViews;
Samlingen av ord lagres i en matrise og applikasjonen bruker rand
motsette seg å velge et ord fra arrayet hver gang brukeren starter et nytt spill. Vi holder en referanse til det nåværende ordet (currWord
), oppsettet vi opprettet for å holde svarområdet (wordLayout
), og en rekke tekstvisninger for bokstavene (charViews
). Tilbake i onCreate
, Etter å ha sett innholdsvisningen, be om programmets ressurser, les samlingen av ord og lagre dem i ord
instansvariabel.
Ressurser res = getResources (); ord = res.getStringArray (R.array.words);
Merk at vi bruker navnet vi ga ordet array i XML. Initialiser rand
objekt og currWord
string.
rand = ny tilfeldig (); currWord = "";
Få en referanse til layoutområdet vi opprettet for svarbrevene.
wordLayout = (LinearLayout) findViewById (R.id.word);
En rekke oppgaver må utføres hver gang et nytt spill startes av spilleren. La oss lage en hjelpemetode for å holde alt organisert. Etter onCreate
metode, legg til følgende metode disposisjon.
privat void playGame () // spill et nytt spill
Inne i spill
metode, start ved å velge et tilfeldig ord fra gruppen.
String newWord = ord [rand.nextInt (words.length)];
Fordi det spill
Metoden påberopes når brukeren velger å spille igjen etter å ha vunnet eller miste et spill, er det viktig at vi sørger for at vi ikke velger det samme ordet to ganger på rad.
mens (newWord.equals (currWord)) newWord = ord [rand.nextInt (words.length)];
Oppdater currWord
instansvariabel med det nye målordet.
currWord = newWord;
Det neste trinnet er å lage en tekstvisning for hvert bokstav i målordet. Fortsett inni vår hjelpemetode, opprett et nytt utvalg for å lagre tekstvisningen for bokstavene i målordet.
charViews = ny TextView [currWord.length ()];
Deretter fjerner du eventuelle tekstvisninger fra wordLayout
oppsett.
wordLayout.removeAllViews ();
Bruk en enkel til
sløyfe for å lukte over hver bokstav i svaret, opprett en tekstvisning for hvert brev, og sett tekstvisningen til den aktuelle bokstaven.
for (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c));
Strengen lagres som en rekke tegn. De charAt
Metoden tillater oss å få tilgang til tegnene på en bestemt indeks. Fortsatt inne i til
sløyfe, sett visningsegenskapene i tekstvisningen og legg den til i oppsettet.
for (int c = 0; c < 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]);
Vi setter tekstfargen til hvit slik at brukeren ikke kan se den mot den hvite bakgrunnen. Hvis de gjetter bokstaven riktig, er tekstfargeegenskapen svart for å vise den til spilleren. Tilbake i onCreate
metode, ring hjelpemetoden vi nettopp har opprettet.
spill();
Vi vil utvide både onCreate
og hjelpemetoden litt senere.
Det neste trinnet er å skape et område for spilleren å velge bokstaver å gjette. Endre spillets aktivitetslayout og legg til følgende rutenett for å holde bokstavknappene. Sett inn nettvisningen umiddelbart etter den lineære oppsettet vi la til for svaret.
Vi skal bruke en adapter for å kartlegge bokstavene i alfabetet til knapper i rutenettet. Vi legger ut syv knapper per rad som du kan se fra numColumns
Egenskap.
Hvert brev kommer til å være en knapp lagt til layoutet ved hjelp av en adapter. Legg til en ny fil i prosjektlayoutmappen, navnet den letter.xml, og fyll den med følgende kodestykke.
Vi bruker en av de trekkbare figurene vi opprettet sist gang som bakgrunn og satt en ved trykk
Metode vi vil gjennomføre neste gang. Hvis du forbedrer programmet til å målrette mot forskjellige skjermdensiteter, kan du vurdere å skreddersy høydeattributtet tilsvarende.
Legg til en ny klasse i prosjektets src-pakke, navn den LetterAdapter
, og velg android.widget.BaseAdapter
som sin superklasse.
Som du ser, inneholder en adapterklasse en rekke standardmetoder vi skal implementere. Legg til følgende importerklæringer i den nye klassen.
importer android.content.Context; importer android.view.LayoutInflater; importer android.widget.Button;
I klassedeklarasjonen legger du til to instansvariabler som vist nedenfor.
Private String [] bokstaver; privat layoutInflater letterInf;
De bokstaver
array vil lagre bokstavene i alfabetet og layoutoppblåseren vil bruke knappoppsettet vi definerte til hver visning som håndteres av adapteren. Etter instansvariablene, legg til en konstruktormetode for adapteren.
offentlig brevadapter (kontekst c) // oppsettadapter
Inne i konstruktøren, ordne alfabetisk array og tilordne bokstavene A-Z til hver posisjon.
bokstaver = ny streng [26]; for (int a = 0; a < letters.length; a++) letters[a] = "" + (char)(a+'A');
Hver karakter er representert som et tall slik at vi kan sette bokstavene A til Z i en loop som starter ved null ved å legge verdien av karakteren A til hver arrayindeks. Fortsett inne i konstruktormetoden, spesifiser konteksten der vi vil oppblåse oppsettet, som vil bli overført fra hovedaktiviteten senere.
letterInf = LayoutInflater.from (c);
Eclipse burde ha opprettet en getCount
metode skissering. Oppdater implementeringen som følger.
@Override public int getCount () return letters.length;
Dette representerer antall visninger, ett for hvert brev. Vi kaller ikke metodene i adapterklassen eksplisitt i applikasjonen. Det er operativsystemet som bruker dem til å bygge brukergrensesnittelementet vi bruker adapteren til, som i dette tilfellet vil være rutenettvisning.
Oppdater implementeringen av getView
som vist i kodestykket nedenfor.
@Override public Vis getView (int posisjon, View convertView, ViewGroup forelder) // lag en bokstav for brevet i denne posisjonen i alfabetet Knapp letterBtn; hvis (convertView == null) // oppblås knappoppsettet letterBtn = (Button) letterInf.inflate (R.layout.letter, foreldre, false); ellers letterBtn = (Button) convertView; // angi teksten til dette bokstaven letterBtn.setText (bokstaver [posisjon]); returbrevBtn;
Ta et øyeblikk for å la alt synke inn. I hovedsak bygger denne metoden hver visning som er kartlagt til brukergrensesnittelementet via adapteren. Vi oppblåser knappoppsettet vi opprettet og setter bokstaven i henhold til posisjonen i alfabetet som visningen representerer. Vi har uttalt at det vil være 26 visninger som blir kartlagt, med posisjonen til hver som reflekterer sin posisjon i alfabetisk rekkefølge. Du kan legge de andre metodene i adapterklassen som de er.
@Override public Object getItem (int arg0) return null; @Override public long getItemId (int arg0) return 0;
Revisér spillets aktivitetsklasse og legg til en instansvariabel for rutenettet og adapteren.
private GridView bokstaver; privat brevadapter ltrAdapt;
Du må også legge til en annen importoppgave.
importer android.widget.GridView;
I onCreate
metode, før linjen der du ringer til spill
hjelpemetode, få en referanse til rutevisningen.
bokstaver = (GridView) findViewById (R.id.letters);
Legg til spill
Nåværende implementering med følgende utdrag. I denne brikken legger vi opp adapteren og setter den på rutenettet.
ltrAdapt = ny LetterAdapter (dette); letters.setAdapter (ltrAdapt);
Kjør programmet i emulatoren, og du bør se brukergrensesnittet. Du vil imidlertid ikke kunne kommunisere med knappene ennå. Det er det vi vil fokusere på i tredje og siste avdrag av denne serien.
Hvis du kjører programmet på dette tidspunktet, vil det presentere deg med spillets grensesnitt, men det vil ikke svare på brukerinteraksjonen ennå. Vi vil implementere gjenværende funksjonalitet i den siste delen av denne serien.
Når en spiller klikker på bokstavknappene, må programmet verifisere om det valgte bokstaven er inkludert i målordet og oppdater svaret og galgerer tilsvarende. Vi vil også presentere en dialog til spilleren hvis de vinner eller mister, og vi vil også legge til en hjelpeknapp. Til slutt legger vi til grunnleggende navigering gjennom en handlingslinje.