Share
In questa serie, stiamo creando un gioco Hangman per la piattaforma Android. Nel primo tutorial, abbiamo impostato l'applicazione in modo da presentare due schermate all'utente e abbiamo anche iniziato con gli elementi dell'interfaccia utente, le immagini e le figure disegnabili per essere precisi. Nel secondo tutorial, ingrandiremo il layout del gioco.
La creazione del layout del gioco prevede l'utilizzo di un adattatore per creare pulsanti di lettere e il posizionamento delle parti del corpo che verranno visualizzate quando gli utenti selezionano lettere errate. Conserveremo anche le risposte del giocatore in XML, recuperarle e scegliere una parola a caso usando Java.
Per rinfrescare la tua memoria, questo è l'aspetto del gioco finale.
Nel precedente tutorial, abbiamo creato immagini per la forca e per le sei parti del corpo. Inseriremo questi all'interno del layout del gioco in questo tutorial. Le posizioni che hai impostato per questi elementi devono essere determinate dagli elementi dell'immagine che stai utilizzando. Un approccio è quello di importare le immagini in un editor di immagini, come Adobe Photoshop, posizionarle manualmente e quindi utilizzarle X e y posizioni relative all'immagine della forca per definire le posizioni corrette da applicare a ciascuna immagine nel layout XML. Se stai iniziando con le immagini demo che abbiamo incluso nel tutorial precedente, puoi utilizzare i valori elencati in questo tutorial.
Inizia aprendo activity_game.xml. All'interno del layout lineare che abbiamo aggiunto nel tutorial precedente, inserisci un layout relativo per contenere le sette immagini che costituiranno l'area dei patiboli.
All'interno del layout relativo appena creato, inizia aggiungendo l'immagine di forca come mostrato di seguito.
Ricordarsi di modificare il nome drawable se l'immagine che si sta utilizzando è denominata in modo diverso. Impostiamo il lato sinistro e il riempimento superiore dell'immagine su 0 in modo che possiamo posizionare le altre immagini rispetto alla sua posizione. Aggiungeremo le risorse di stringa per le descrizioni del contenuto un po 'più avanti in questo tutorial. Il prossimo è la testa.
Se stai usando le tue immagini, dovrai modificare di conseguenza il pad sinistro e superiore. Usiamo un id attributo in modo da poter fare riferimento all'immagine nel codice. Questo è necessario per farlo apparire e scomparire a seconda dell'input dell'utente. L'immagine successiva che aggiungiamo è il corpo.
Questo sembra molto simile a quello che abbiamo fatto per la testa e, come potete vedere sotto, le braccia e le gambe sono piuttosto simili.
Apri il file XML delle stringhe di res / values del progetto e aggiungi le stringhe di descrizione del contenuto che abbiamo utilizzato negli snippet di codice sopra riportati.
Il patibolo La testa Il corpo Un braccio Una gamba
Torna al file di layout e passa a Layout grafico scheda per vedere il risultato del nostro lavoro. Regola il riempimento superiore e sinistro di ciascuna immagine per regolarne la posizione, se necessario.
Ogni volta che viene avviato un nuovo gioco, le parti del corpo devono essere nascoste. Ogni parte del corpo viene rivelata se il giocatore sceglie una lettera che non è presente nella parola bersaglio.
Il gioco utilizzerà una raccolta di parole predefinite, che verranno archiviate in XML. Nella cartella dei valori delle risorse del progetto, aggiungere un nuovo file e denominarlo arrays.xml.
Passare al XML scheda, creare un array e aggiungere alcune parole ad esso.
Per questo tutorial, utilizziamo un array di parole correlate al computing. Tuttavia, per rendere il gioco più interessante, puoi lavorare con varie categorie con ogni categoria contenente parole correlate a un tema specifico. Quando l'utente fa clic sul pulsante di riproduzione, è possibile chiedergli di scegliere una categoria e leggere l'array di parole pertinente.- CARICABATTERIE
- COMPUTER
- TAVOLETTA
- SISTEMA
- APPLICAZIONE
- INTERNET
- STILO
- ANDROID
- TASTIERA
- SMARTPHONE
Tornando al file di layout delle attività del gioco, aggiungi un layout lineare subito dopo il layout relativo che abbiamo aggiunto per l'area dei patiboli. Il layout lineare è riservato all'area di risposta.
Memorizziamo ogni carattere della parola target all'interno della propria visualizzazione di testo in modo da poter rivelare ogni lettera separatamente. Useremo il id del layout lineare nel codice per aggiungere le viste del testo ogni volta che viene scelta una nuova parola.
Apri il GameActivity classe e iniziare aggiungendo le seguenti istruzioni di importazione nella parte superiore.
importare android.content.res.Resources; import android.graphics.Color; importare android.view.Gravity; importare android.view.ViewGroup.LayoutParams; import android.widget.LinearLayout; import android.widget.TextView;
All'interno della dichiarazione della classe, aggiungere un onCreate metodo come mostrato di seguito.
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_game);
Impostiamo la vista del contenuto sul file di layout che abbiamo creato un momento fa.
Prima di andare avanti, dobbiamo dichiarare alcune variabili di istanza. Aggiungi la dichiarazione immediatamente prima del onCreate metodo.
private String [] words; rand privato a caso; stringa privata currword; LinearLayout privatoLayout; TextView privato [] charview;
La raccolta di parole viene memorizzata in un array e l'applicazione utilizza il rand oggetto di selezionare una parola dall'array ogni volta che l'utente inizia una nuova partita. Manteniamo un riferimento alla parola corrente (currWord), il layout che abbiamo creato per contenere l'area di risposta (wordLayout) e una serie di viste di testo per le lettere (charViews). Di nuovo dentro onCreate, dopo aver impostato la vista del contenuto, richiedere le risorse dell'applicazione, leggere la raccolta di parole e memorizzarle nel file parole variabile di istanza.
Risorse res = getResources (); words = res.getStringArray (R.array.words);
Nota che usiamo il nome che abbiamo dato alla parola array in XML. Inizializza il rand oggetto e currWord stringa.
rand = new Random (); currWord = "";
Ottieni un riferimento all'area di layout che abbiamo creato per le lettere di risposta.
wordLayout = (LinearLayout) findViewById (R.id.word);
Un certo numero di compiti devono essere eseguiti ogni volta che un nuovo gioco viene avviato dal giocatore. Creiamo un metodo di supporto per mantenere tutto organizzato. Dopo il onCreate metodo, aggiungere il seguente schema del metodo.
private void playGame () // gioca una nuova partita
Dentro il gioca metodo, inizia scegliendo una parola a caso dall'array.
String newWord = words [rand.nextInt (words.length)];
Perché il gioca il metodo viene invocato quando l'utente sceglie di giocare di nuovo dopo aver vinto o perso una partita, è importante assicurarsi che non prendiamo la stessa parola due volte di fila.
while (newWord.equals (currWord)) newWord = words [rand.nextInt (words.length)];
Aggiorna il currWord variabile di istanza con la nuova parola di destinazione.
currWord = newWord;
Il prossimo passo è creare una vista testuale per ogni lettera della parola target. Sempre all'interno del nostro metodo di supporto, crea una nuova matrice per memorizzare le viste del testo per le lettere della parola di destinazione.
charViews = new TextView [currWord.length ()];
Quindi, rimuovere eventuali visualizzazioni di testo dal wordLayout disposizione.
wordLayout.removeAllViews ();
Usa un semplice per loop per scorrere su ogni lettera della risposta, creare una vista testuale per ogni lettera e impostare il testo della vista del testo sulla lettera corrente.
Accentsconagua
per (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); La stringa è memorizzata come una matrice di caratteri. Il charAt metodo ci consente di accedere ai caratteri in un indice specifico. Ancora dentro il per loop, imposta le proprietà di visualizzazione sulla vista testo e aggiungila al layout.
per (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]); Impostiamo il colore del testo in bianco in modo che l'utente non possa vederlo sullo sfondo bianco. Se indovinano la lettera correttamente, la proprietà del colore del testo diventa nera per rivelarla al giocatore. Indietro nel onCreate metodo, chiama il metodo helper che abbiamo appena creato.
gioca();
Espanderemo entrambi onCreate e il metodo di supporto un po 'più tardi.
Il prossimo passo è creare un'area in cui il giocatore possa scegliere le lettere da indovinare. Rivisita il layout delle attività del gioco e aggiungi la seguente vista griglia per contenere i pulsanti delle lettere. Inserisci la griglia subito dopo il layout lineare che abbiamo aggiunto per la parola di risposta.
Utilizzeremo un adattatore per mappare le lettere dell'alfabeto ai pulsanti nella vista griglia. Disporremo sette pulsanti per riga come potete vedere dal numColonne attributo.
Ogni lettera sarà un pulsante aggiunto al layout utilizzando un adattatore. Aggiungi un nuovo file nella cartella del layout del progetto, chiamalo letter.xml e compilalo con il seguente frammento di codice.
Usiamo una delle forme disegnabili che abbiamo creato l'ultima volta come sfondo e impostiamo un al clic metodo che implementeremo la prossima volta. Se si sta migliorando l'applicazione per il targeting di densità di schermo diverse, è possibile considerare di adattare l'attributo height di conseguenza.
Aggiungi una nuova classe al pacchetto src del tuo progetto, nominalo LetterAdapter, e scegliere android.widget.BaseAdapter come sua superclasse.
Come vedrai, una classe dell'adattatore include una serie di metodi standard che implementeremo. Aggiungi le seguenti istruzioni di importazione alla nuova classe.
importare android.content.Context; import android.view.LayoutInflater; importa android.widget.Button;
All'interno della dichiarazione della classe, aggiungi due variabili di istanza come mostrato di seguito.
lettere private String []; Layout privatoIndicatore di lettereInf;
Il lettere array memorizzerà le lettere dell'alfabeto e l'inflater di layout applicherà la disposizione dei pulsanti che abbiamo definito per ciascuna vista gestita dall'adattatore. Dopo le variabili di istanza, aggiungere un metodo di costruzione per l'adattatore.
Public LetterAdapter (Context c) // setup adapter
All'interno del costruttore, creare un'istanza dell'array alfabetico e assegnare le lettere A-Z a ciascuna posizione.
letters = new String [26]; per (int a = 0; a < letters.length; a++) letters[a] = "" + (char)(a+'A');
Ogni carattere è rappresentato come un numero in modo che possiamo impostare le lettere dalla A alla Z in un ciclo che inizia da zero aggiungendo il valore del carattere A a ciascun indice di matrice. Sempre all'interno del metodo del costruttore, specificare il contesto in cui vogliamo gonfiare il layout, che verrà passato dall'attività principale in seguito.
letterInf = LayoutInflater.from (c);
Eclipse avrebbe dovuto creare a getCount schema del metodo. Aggiorna la sua implementazione come segue.
@Override public int getCount () return letters.length;
Questo rappresenta il numero di visualizzazioni, una per ogni lettera. Noi non chiamiamo i metodi nella classe dell'adattatore esplicitamente all'interno dell'applicazione. È il sistema operativo che li utilizza per creare l'elemento dell'interfaccia utente a cui applichiamo l'adattatore, che in questo caso sarà la vista griglia.
Aggiorna l'implementazione di GetView come mostrato nello snippet di codice seguente.
@Override public Visualizza getView (int position, Visualizza convertView, ViewGroup parent) // crea un pulsante per la lettera in questa posizione nell'alfabeto Button letterBtn; if (convertView == null) // gonfia il layout del pulsante letterBtn = (Button) letterInf.inflate (R.layout.letter, parent, false); else letterBtn = (Button) convertView; // imposta il testo su questa lettera letterBtn.setText (letters [position]); return letterBtn;
Prenditi un momento per far affondare tutto. In sostanza, questo metodo costruisce ogni vista mappata sull'elemento dell'interfaccia utente tramite l'adattatore. Gonfiamo il layout dei pulsanti che abbiamo creato e impostiamo la lettera in base alla posizione nell'alfabeto rappresentato dalla vista. Abbiamo affermato che ci saranno 26 viste mappate, con la posizione di ciascuna che riflette la sua posizione nella matrice alfabetica. È possibile lasciare gli altri metodi nella classe dell'adattatore così come sono.
@Override oggetto pubblico getItem (int arg0) return null; @Override public long getItemId (int arg0) return 0;
Rivisitare la classe di attività del gioco e aggiungere una variabile di istanza per la vista griglia e l'adattatore.
lettere GridView private; LetterAdapter privato ltrAdapt;
È inoltre necessario aggiungere un'altra dichiarazione di importazione.
import android.widget.GridView;
Nel onCreate metodo, prima della linea in cui si chiama il gioca metodo di supporto, ottenere un riferimento alla vista griglia.
letters = (GridView) findViewById (R.id.letters);
Aggiungi il giocaL'attuale implementazione con il seguente frammento. In questo frammento, istanziamo l'adattatore e lo impostiamo nella vista griglia.
ltrAdapt = new LetterAdapter (this); letters.setAdapter (ltrAdapt);
Esegui l'applicazione nell'emulatore e dovresti vedere l'interfaccia utente. Tuttavia, non sarai ancora in grado di interagire con i pulsanti. Questo è ciò su cui ci concentreremo nella terza e ultima puntata di questa serie.
Se esegui la tua applicazione a questo punto, ti presenterà l'interfaccia del gioco, ma non risponderà ancora all'interazione dell'utente. Implementeremo le restanti funzionalità nella parte finale di questa serie.
Quando un giocatore fa clic sui pulsanti delle lettere, l'applicazione deve verificare se la lettera selezionata è inclusa nella parola target e aggiornare la risposta e la forca di conseguenza. Presenteremo anche una finestra di dialogo al giocatore in caso di vincita o sconfitta e aggiungeremo anche un pulsante di aiuto. Infine, aggiungeremo la navigazione di base attraverso una barra delle azioni.
