Creare un gioco dell'impiccato interazione dell'utente

In questa serie, stiamo creando un gioco Hangman per la piattaforma Android. Finora, abbiamo creato l'interfaccia utente dell'applicazione, incluse immagini, disegni e layout. In questa terza ed ultima puntata, ci concentreremo sull'interazione dell'utente.


introduzione

L'aggiunta dell'interazione dell'utente al gioco implica diversi aspetti, tra cui la rilevazione se l'utente vince o perde un gioco e risponde a ciascun evento. Aggiungiamo anche un pulsante di aiuto alla barra delle azioni e aggiungiamo la possibilità di navigare nel gioco.

Per rinfrescare la tua memoria, questo è l'aspetto del gioco finale.



1. Preparare l'interfaccia utente

Passo 1

Come abbiamo visto nel tutorial precedente, l'attività del gioco presenta l'area dei patiboli con le sei parti del corpo disegnate sullo schermo. Quando inizia un nuovo gioco, le parti del corpo devono essere nascoste, mostrandole solo quando l'utente fa un'ipotesi sbagliata. Apri la classe di attività del gioco e inizia aggiungendo le seguenti istruzioni di importazione.

importare android.app.AlertDialog; import android.content.DialogInterface; importare android.support.v4.app.NavUtils; importare android.view.Menu; importa android.view.MenuItem; importa android.view.View; import android.widget.ImageView;

Quindi, dichiarare cinque variabili di istanza nell'interfaccia della classe.

// body part images private ImageView [] bodyParts; // numero di parti del corpo private int numParts = 6; // current part - aumenterà quando vengono scelte risposte errate private int currPart; // numero di caratteri nella parola corrente private int numChars; // numero corretto indovinato int int numCorr;

È possibile modificare il numero di parti del corpo se, ad esempio, si desidera aggiungere diversi livelli di difficoltà al gioco. Memorizzando la parte corrente del corpo (currPart), possiamo aggiungere una parte del corpo alla volta nel caso in cui il giocatore faccia un'ipotesi sbagliata. Usiamo il conteggio delle lettere della parola target e il numero di ipotesi giuste per tenere traccia dei progressi del giocatore nel gioco corrente. Periodicamente controlliamo se il giocatore ha vinto o perso la partita.

Nel onCreate metodo della classe di attività del gioco, proprio prima di invocare gioca, istanziamo l'array della vista immagine e recuperiamo le immagini della parte del corpo che abbiamo inserito nel layout. Questo snippet di codice determina anche l'ordine in cui le parti del corpo vengono mostrate quando il giocatore fa un'ipotesi sbagliata. Iniziamo con la testa e finiamo con le gambe.

bodyParts = new ImageView [numParts]; bodyParts [0] = (ImageView) findViewById (R.id.head); bodyParts [1] = (ImageView) findViewById (R.id.body); bodyParts [2] = (ImageView) findViewById (R.id.arm1); bodyParts [3] = (ImageView) findViewById (R.id.arm2); bodyParts [4] = (ImageView) findViewById (R.id.leg1); bodyParts [5] = (ImageView) findViewById (R.id.leg2);

Passo 2

Nel gioca metodo, aggiungere il seguente snippet di codice. Prepariamo currPart a 0, impostato numchars alla lunghezza della parola target, e impostare numCorr a 0.

currPart = 0; NumChars = currWord.length (); numCorr = 0;

Prima di iniziare il gioco, le parti del corpo devono essere nascoste.

per (int p = 0; p < numParts; p++)  bodyParts[p].setVisibility(View.INVISIBLE); 

La prossima schermata mostra come dovrebbe apparire il gioco quando sta per iniziare un nuovo gioco.



2. Rispondi ai clic degli utenti

Passo 1

Quando abbiamo creato il layout per i pulsanti delle lettere, abbiamo dichiarato un al clic metodo. Aggiungiamo questo all'attività del gioco.

public void letterPressed (Visualizza vista) // l'utente ha premuto una lettera per indovinare

Quando il giocatore tocca un pulsante lettera per fare un'ipotesi, letterPressed riceve un riferimento alla vista. Questo ci permette di capire quale lettera il giocatore ha scelto. Per scoprire quale lettera il giocatore ha intercettato, utilizziamo il seguente frammento di codice.

String ltr = ((TextView) view) .getText (). ToString ();

Successivamente, otteniamo il carattere dalla stringa.

char letterChar = ltr.charAt (0);

Disattiviamo anche il pulsante lettera e aggiorniamo lo sfondo disegnabile per mostrare al giocatore che la lettera è già stata giocata.

view.setEnabled (false); view.setBackgroundResource (R.drawable.letter_down);

Nel passaggio successivo, passiamo in rassegna i caratteri della parola target per verificare se l'ipotesi del giocatore è in essa. Ogni lettera della parola bersaglio viene confrontata con l'ipotesi del giocatore. Se l'ipotesi del giocatore corrisponde a una lettera nella parola target, incrementiamo numCorr, impostato corretta a vero per indicare che il giocatore ha fatto una buona ipotesi e aggiornare il colore del testo della lettera dal bianco al nero per renderlo visibile. Il per il loop continua fino a quando tutte le lettere della parola target sono state controllate. Questo è importante in quanto una lettera può verificarsi più di una volta nella parola target.

booleano corretto = falso; per (int k = 0; k < currWord.length(); k++)  if(currWord.charAt(k)==letterChar) correct = true; numCorr++; charViews[k].setTextColor(Color.BLACK);  

Passo 2

Successivamente, dobbiamo verificare se il giocatore ha vinto o perso la partita dopo averlo indovinato, o ha fatto un'ipotesi sbagliata ma può ancora continuare. Ancora dentro letterPressed, inizia controllando se il giocatore ha fatto una buona ipotesi.

se (corretto) // correggere l'ipotesi

Se ha fatto una buona ipotesi, controlla se ha indovinato tutte le lettere della parola target.

if (numCorr == numChars) // utente ha vinto

Se questo è vero, notifichiamo al giocatore che ha vinto la partita. La prima cosa che facciamo è disabilitare i pulsanti delle lettere. Lo facciamo implementando un altro metodo di supporto, disableBtns. Implementa questo metodo dopo letterPressed.

public void disableBtns () int numLetters = letters.getChildCount (); per (int l = 0; l < numLetters; l++)  letters.getChildAt(l).setEnabled(false);  

Nel disableBtns, passiamo in rassegna le viste tramite l'adattatore e disabilitiamo ogni pulsante. Se l'utente ha vinto il gioco, invochiamo disableBtns e mostra una finestra di avviso all'utente. Nella finestra di avviso, chiediamo anche al giocatore se vuole giocare un'altra partita.

Prenditi un momento per esaminare questo aspetto se non hai familiarità con le finestre di dialogo su Android. Impostiamo le proprietà incluso il titolo e un messaggio inclusa la conferma della risposta corretta. Aggiungiamo un pulsante per giocare di nuovo alla finestra di avviso, che chiama il gioca metodo. Aggiungiamo anche un pulsante per uscire, che riporta il giocatore all'attività principale.

if (numCorr == numChars) // Disable Buttons disableBtns (); // Mostra Alert Dialog AlertDialog.Builder winBuild = new AlertDialog.Builder (this); winBuild.setTitle ( "YAY"); winBuild.setMessage ("Hai vinto! \ n \ nLa risposta era: \ n \ n" + currWord); winBuild.setPositiveButton ("Riproduci nuovamente", nuovo DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int id) GameActivity.this.playGame ();); winBuild.setNegativeButton ("Exit", new DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int id) GameActivity.this.finish ();); winBuild.show (); 

Passaggio 3

Se l'utente non ha vinto il gioco, è necessario verificare se ha risposto in modo errato, ma ha ancora alcune ipotesi rimaste. Dentro il altrimenti se blocco, mostriamo la prossima parte del corpo e incrementiamo il numero di tentativi errati con 1.

if (correct) // correct guess else if (currPart < numParts)  //some guesses left bodyParts[currPart].setVisibility(View.VISIBLE); currPart++; 

Passaggio 4

Dopo il altrimenti se, possiamo tranquillamente supporre che il giocatore abbia perso la partita. Iniziamo disattivando i pulsanti come facevamo prima e mostriamo una finestra di avviso che indica che il giocatore ha perso la partita. Includiamo anche la risposta corretta e offriamo l'opzione di giocare un'altra partita.

else // l'utente ha perso disableBtns (); // Mostra Alert Dialog AlertDialog.Builder loseBuild = new AlertDialog.Builder (this); loseBuild.setTitle ( "OOPS"); loseBuild.setMessage ("Si perde! \ n \ nLa risposta era: \ n \ n" + currWord); loseBuild.setPositiveButton ("Riproduci nuovamente", nuovo DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int id) GameActivity.this.playGame ();); loseBuild.setNegativeButton ("Exit", new DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int id) GameActivity.this.finish ();); loseBuild.show (); 

Che ci crediate o no, abbiamo finito di implementare l'aspetto dell'interazione dell'utente del gioco. Tutto ciò che resta da fare è aggiungere alcuni miglioramenti all'interfaccia.



3. Completa la barra delle azioni

Passo 1

Completiamo questo tutorial aggiungendo un pulsante di aiuto alla barra delle azioni. Non entrerò troppo nel dettaglio, ma sentitevi liberi di sperimentare con questo nelle vostre applicazioni. A seconda dei livelli API scelti come target, il supporto per la navigazione tramite la barra delle azioni viene fornito con una codifica minima o nulla. Per garantire che la barra delle azioni consenta di tornare all'attività principale, aggiungi quanto segue all'interno onCreate metodo nell'attività del gioco.

getActionBar () setDisplayHomeAsUpEnabled (true).;

Nel manifest, ricorda che abbiamo specificato l'attività principale come genitore dell'attività del gioco. Questo indica al sistema operativo che la navigazione indietro / indietro dall'attività del gioco dovrebbe riportare l'utente all'attività principale. Il tuo progetto dovrebbe avere una risorsa nel menu principale. Aprilo e dai un'occhiata ai suoi contenuti. Per impostazione predefinita, avrà un'azione sulle impostazioni, di cui non abbiamo bisogno per il nostro gioco. Inserisci il seguente frammento di codice per aggiungere un pulsante di aiuto.

Ricorda che abbiamo elencato l'icona della guida nel primo tutorial di questa serie. Puoi aggiungere altri pulsanti alla barra delle azioni in seguito, se lo desideri. Se lo fai, dovrai estendere il codice attività che copriamo di seguito.

Non abbiamo bisogno delle funzioni della barra delle azioni nell'attività principale, quindi se Eclipse ha aggiunto il onCreateOptionsMenu metodo per la tua classe di attività principale, sentiti libero di rimuoverlo.

Passo 2

Tornando all'attività del gioco, imposta lo schermo per utilizzare il menu principale aggiungendo il seguente metodo.

@Override public boolean onCreateOptionsMenu (Menu menu) getMenuInflater (). Gonfia (R.menu.main, menu); ritorna vero; 

Aggiungi un altro metodo per specificare cosa dovrebbe accadere quando l'utente tenta di tornare indietro / su o premere il pulsante di aiuto nella barra delle azioni.

@Override public booleano onOptionsItemSelected (MenuItem item) switch (item.getItemId ()) case android.R.id.home: NavUtils.navigateUpFromSameTask (this); ritorna vero; caso R.id.action_help: showHelp (); ritorna vero;  return super.onOptionsItemSelected (item); 

La navigazione verso l'alto riporta l'utente all'attività principale. Il android.R.id.home l'azione corrisponde alla chiamata a setDisplayHomeAsUpEnabled abbiamo aggiunto onCreate.

Passaggio 3

Aggiungi un'altra variabile di istanza nella parte superiore della classe per le informazioni della guida.

AlertDialog privato helpAlert;

Useremo un altro metodo di supporto per mostrare le informazioni della guida.

public void showHelp () AlertDialog.Builder helpBuild = new AlertDialog.Builder (this); helpBuild.setTitle ( "Aiuto"); helpBuild.setMessage ("Indovina la parola selezionando le lettere. \ n \ n" + "Hai solo 6 selezioni sbagliate, quindi è game over!"); helpBuild.setPositiveButton ("OK", nuovo DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int id) helpAlert.dismiss ();); helpAlert = helpBuild.create (); helpBuild.show (); 

Il supporto della barra delle azioni che abbiamo incluso funzionerà solo con livelli API di 11 e versioni successive e il supporto per la navigazione funzionerà solo con livelli API di 16 e versioni successive. Per supportare versioni precedenti, è necessario utilizzare le librerie di supporto per la barra delle azioni e la navigazione.

Conclusione

Il nostro gioco dell'impiccato dovrebbe essere completato. Eseguilo e dargli un giro. L'applicazione nella sua forma attuale funzionerà solo su versioni recenti di Android e l'interfaccia utente è adatta solo per una gamma limitata di dispositivi. Come puoi vedere, c'è spazio per miglioramenti. Oltre a supportare un ranger di dispositivi più ampio, è possibile migliorare il gioco aggiungendo livelli di difficoltà o categorie di parole. Potresti anche creare una classifica per tenere traccia dei punteggi.

Se hai completato questa serie con successo, dovresti conoscere diversi aspetti della piattaforma Android, tra cui l'interazione dell'utente, gli adattatori, le risorse XML e sfruttare la barra delle azioni.