Maak een galgje gebruikersinteractie

In deze serie maken we een Galgje-spel voor het Android-platform. Tot dusverre hebben we de gebruikersinterface van de toepassing gebouwd, inclusief afbeeldingen, tekeningen en lay-outs. In dit derde en laatste deel gaan we ons richten op gebruikersinteractie.


Invoering

Het toevoegen van gebruikersinteractie aan het spel omvat verschillende aspecten, waaronder het detecteren of de gebruiker een spel wint of verliest en ook reageert op elke gebeurtenis. We voegen ook een hulpknop toe aan de actiebalk en voegen de mogelijkheid toe om door het spel te navigeren.

Om je geheugen op te frissen, is dit hoe het uiteindelijke spel eruit zal zien.



1. Bereid de gebruikersinterface voor

Stap 1

Zoals we in de vorige tutorial hebben gezien, presenteert de spelactiviteit het galggebied met de zes lichaamsdelen die op het scherm zijn getekend. Wanneer een nieuw spel start, moeten de lichaamsdelen worden verborgen en alleen worden weergegeven wanneer de gebruiker een verkeerde schatting maakt. Open de activiteitsklasse van de game en begin met het toevoegen van de volgende importinstructies.

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

Formuleer vervolgens vijf instantievariabelen in de interface van de klasse.

// lichaamsdeelafbeeldingen privé ImageView [] bodyParts; // aantal lichaamsdelen private int numParts = 6; // current part - zal toenemen wanneer foute antwoorden worden gekozen private int currPart; // aantal tekens in huidig ​​woord private int numChars; // nummer correct geraden private int numCorr;

Je zou het aantal lichaamsdelen kunnen veranderen als je bijvoorbeeld verschillende moeilijkheidsniveaus aan het spel zou willen toevoegen. Door het huidige lichaamsdeel op te slaan (currPart), kunnen we één lichaamsdeel tegelijk toevoegen voor het geval de speler een verkeerde schatting maakt. We gebruiken de lettertelling van het doelwoord en het aantal juiste gissingen om de voortgang van de speler in het huidige spel bij te houden. We controleren periodiek of de speler het spel heeft gewonnen of verloren.

In de onCreate methode van de activiteitsklasse van het spel, vlak voordat we aanroepen spel spelen, we instantiëren de beeldweergavearray en halen de lichaamsdeelafbeeldingen op die we in de lay-out hebben geplaatst. Dit codefragment bepaalt ook de volgorde waarin de lichaamsdelen worden weergegeven als de speler een verkeerde schatting maakt. We beginnen met het hoofd en eindigen met de benen.

bodyParts = nieuwe 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);

Stap 2

In de spel spelen methode, voeg het volgende codefragment toe. We gaan zitten currPart naar 0, reeks NUMCHARS tot de lengte van het doelwoord en stel in numCorr naar 0.

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

Voordat we het spel beginnen, moeten de lichaamsdelen worden verborgen.

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

Het volgende screenshot laat zien hoe het spel eruit zou moeten zien wanneer een nieuw spel op het punt staat te beginnen.



2. Reageren op gebruikersklikken

Stap 1

Toen we de lay-out voor de letterknoppen maakten, verklaarden we een bij klikken methode. Laten we dit toevoegen aan de activiteit van het spel.

openbare void letterPressed (bekijk weergave) // gebruiker heeft op een te raden letter gedrukt

Wanneer de speler op een lettertoets tikt om een ​​schatting te maken, letterpressed ontvangt een verwijzing naar de weergave. Op deze manier kunnen we uitvinden welke letter de speler heeft gekozen. Om erachter te komen welke letter de speler heeft aangeboord, gebruiken we het volgende codefragment.

String ltr = ((tekstweergave) weergave) .getText (). ToString ();

Vervolgens krijgen we het personage uit de reeks.

char letterChar = ltr.charAt (0);

We schakelen ook de letterknop uit en werken de achtergrond die kan worden getekend bij om de speler te laten zien dat de brief al is gespeeld.

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

In de volgende stap doorlopen we de tekens van het doelwoord om te controleren of de gok van de speler erin zit. Elke letter van het doelwoord wordt vergeleken met de gok van de speler. Als de schatting van de speler overeenkomt met een letter in het doelwoord, nemen we toe numCorr, reeks correct naar waar om aan te geven dat de speler een goede gok heeft gemaakt en de tekstkleur van de letter van wit naar zwart bijwerkt om deze zichtbaar te maken. De voor de lus gaat door totdat elke letter van het doelwoord is gecontroleerd. Dit is belangrijk omdat een letter meer dan één keer in het doelwoord kan voorkomen.

boolean correct = onwaar; voor (int k = 0; k < currWord.length(); k++)  if(currWord.charAt(k)==letterChar) correct = true; numCorr++; charViews[k].setTextColor(Color.BLACK);  

Stap 2

Vervolgens moeten we verifiëren of de speler het spel heeft gewonnen of verloren na hun gok, of een verkeerde gok heeft gemaakt, maar het kan nog steeds doorgaan. Nog steeds binnen letterpressed, begin met het controleren of de speler een goede gok heeft gemaakt.

if (correct) // juiste schatting

Als ze een goede inschatting heeft gemaakt, controleer dan of ze alle letters van het doelwoord heeft geraden.

if (numCorr == numChars) // gebruiker heeft gewonnen

Als dit waar is, laten we de speler weten dat ze de game heeft gewonnen. Het eerste wat we doen is het uitschakelen van de lettertoetsen. We doen dit door een andere hulpmethode te implementeren, disableBtns. Implementeer deze methode na letterpressed.

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

In disableBtns, we doorlopen de views via de adapter en schakelen elke knop uit. Als de gebruiker het spel heeft gewonnen, roepen we aan disableBtns en een waarschuwingsdialoogvenster voor de gebruiker weergeven. In het waarschuwingsvenster vragen we de speler ook of ze een ander spel willen spelen.

Neem even de tijd om hiernaar te kijken als u niet bekend bent met dialogen op Android. We hebben de eigenschappen inclusief titel en een bericht inclusief bevestiging van het juiste antwoord. We voegen een knop toe om opnieuw te spelen naar het waarschuwingsvenster, dat het spel spelen methode. We voegen ook een knop toe om af te sluiten, waardoor de speler teruggaat naar de hoofdactiviteit.

if (numCorr == numChars) // Deactiveer knoppen disableBtns (); // Weergavewaarschuwingsvenster AlertDialog.Builder winBuild = nieuwe AlertDialog.Builder (this); winBuild.setTitle ( "YAY"); winBuild.setMessage ("U wint! \ n \ nHet antwoord was: \ n \ n" + currWord); winBuild.setPositiveButton ("Play Again", nieuwe DialogInterface.OnClickListener () public void onClick (DialogInterface-dialoogvenster, int id) GameActivity.this.playGame ();); winBuild.setNegativeButton ("Exit", nieuwe DialogInterface.OnClickListener () openbare ongeldige onClick (dialoog DialogInterface, int id) GameActivity.this.finish ();); winBuild.show (); 

Stap 3

Als de gebruiker het spel niet heeft gewonnen, moeten we controleren of ze niet goed heeft geantwoord, maar er zijn nog wat schattingen over. Binnen in de anders als blok, we tonen het volgende lichaamsdeel en verhogen het aantal verkeerde gissingen met 1.

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

Stap 4

Na de anders als, we kunnen er veilig van uitgaan dat de speler het spel verloren heeft. We beginnen met het uitschakelen van de knoppen zoals we eerder deden en we tonen een waarschuwingsdialoogvenster waarin staat dat de speler het spel verloren heeft. We nemen ook het juiste antwoord op en bieden de mogelijkheid om een ​​ander spel te spelen.

else // gebruiker is disableBtns () kwijtgeraakt; // Weergavewaarschuwingsvenster AlertDialog.Builder loseBuild = nieuwe AlertDialog.Builder (this); loseBuild.setTitle ( "OOPS"); loseBuild.setMessage ("Je verliest! \ n \ nHet antwoord was: \ n \ n" + currWord); loseBuild.setPositiveButton ("Play Again", nieuwe DialogInterface.OnClickListener () public void onClick (DialogInterface-dialoogvenster, int id) GameActivity.this.playGame ();); loseBuild.setNegativeButton ("Exit", nieuwe DialogInterface.OnClickListener () openbare ongeldige onClick (dialoog DialogInterface, int id) GameActivity.this.finish ();); loseBuild.show (); 

Geloof het of niet, we zijn klaar met de implementatie van het gebruikersinteractie-aspect van het spel. Het enige wat u hoeft te doen, is een paar verbeteringen aan de interface toevoegen.



3. Voltooi de actiebalk

Stap 1

Laten we deze tutorial beëindigen door een hulpknop toe te voegen aan de actiebalk. Ik zal niet te gedetailleerd ingaan, maar voel je vrij om hiermee te experimenteren in je eigen applicaties. Afhankelijk van de API-niveaus die u target, wordt ondersteuning voor navigeren door middel van de actiebalk voorzien van weinig of geen codering. Om ervoor te zorgen dat de actiebalk het navigeren naar de hoofdactiviteit mogelijk maakt, voegt u het volgende toe binnen de onCreate methode in de activiteit van de game.

getActionBar () setDisplayHomeAsUpEnabled (true).;

Houd er in het manifest rekening mee dat we de hoofdactiviteit als ouder hebben opgegeven voor de activiteit van de game. Dit vertelt het besturingssysteem dat het teruggaan / omhooggaan van de activiteit van de game de gebruiker terug moet brengen naar de hoofdactiviteit. Uw project zou een hoofdmenaderesource moeten hebben. Open het en bekijk de inhoud ervan. Standaard heeft deze een instellingsactie die we niet nodig hebben voor onze game. Voeg het volgende codefragment toe om een ​​helpknop toe te voegen.

Vergeet niet dat we het Help-pictogram hebben vermeld in de eerste zelfstudie van deze serie. U kunt later nog meer knoppen toevoegen aan uw actiebalk als u dat wilt. Als u dit doet, moet u de activiteitscode die hieronder wordt vermeld, uitbreiden.

We hebben de actiestaaffuncties niet nodig in de hoofdactiviteit, dus als Eclipse de onCreateOptionsMenu methode voor uw hoofdactiviteitsklasse, voel je vrij om het te verwijderen.

Stap 2

Terug in de activiteit van het spel, stel het scherm in om het hoofdmenu te gebruiken door de volgende methode toe te voegen.

@Override public boolean onCreateOptionsMenu (Menu menu) getMenuInflater (). Inflate (R.menu.main, menu); geef waar terug; 

Voeg een andere methode toe om op te geven wat er moet gebeuren wanneer de gebruiker probeert terug / omhoog te navigeren of druk op de helpknop in de actiebalk.

@Override public boolean onOptionsItemSelected (MenuItem-item) switch (item.getItemId ()) case android.R.id.home: NavUtils.navigateUpFromSameTask (this); geef waar terug; case R.id.action_help: showHelp (); geef waar terug;  retourneer super.onOptionsItemSelected (item); 

Navigeren naar boven brengt de gebruiker terug naar de hoofdactiviteit. De android.R.id.home actie komt overeen met de oproep naar setDisplayHomeAsUpEnabled we hebben toegevoegd onCreate.

Stap 3

Voeg een andere exemplaarvariabele toe aan de bovenkant van de klas voor de Help-informatie.

privé AlertDialog helpAlert;

We gebruiken een andere hulpmethode om de Help-informatie weer te geven.

public void showHelp () AlertDialog.Builder helpBuild = nieuwe AlertDialog.Builder (this); helpBuild.setTitle ( "Help"); helpBuild.setMessage ("Raad het woord door de letters te selecteren. \ n \ n" + "Je hebt maar 6 verkeerde selecties en dan is het game over!"); helpBuild.setPositiveButton ("OK", nieuwe DialogInterface.OnClickListener () openbare ongeldige onClick (dialoog DialogInterface, int id) helpAlert.dismiss ();); helpAlert = helpBuild.create (); helpBuild.show (); 

De actiebalkondersteuning die we hebben opgenomen, werkt alleen voor API-niveaus van 11 en hoger, en ondersteuning voor navigatie werkt alleen voor API-niveaus van 16 en hoger. Om oudere versies te ondersteunen, moet u de ondersteuningsbibliotheken voor de actiebalk en navigatie gebruiken.

Conclusie

Ons Hangman-spel zou nu compleet moeten zijn. Voer het uit en geef het een draai. De applicatie in zijn huidige vorm werkt alleen op recente versies van Android en de gebruikersinterface is alleen geschikt voor een beperkt aantal apparaten. Zoals je ziet, is er ruimte voor verbetering. Naast het ondersteunen van een bredere bos van apparaten, kunt u het spel verbeteren door moeilijkheidsniveaus of woordcategorieën toe te voegen. Je zou zelfs een scorebord kunnen maken om scores bij te houden.

Als u deze reeks met succes hebt voltooid, zou u over verschillende aspecten van het Android-platform moeten hebben geïnformeerd, inclusief gebruikersinteractie, adapters, XML-bronnen en het gebruik van de actiebalk..