Share
Dans cette série, nous créons un jeu du pendu pour la plate-forme Android. Dans le premier tutoriel, nous avons configuré l'application pour présenter deux écrans à l'utilisateur et nous avons également commencé avec les éléments de l'interface utilisateur, les images et les formes pouvant être dessinées pour être précis. Dans le deuxième tutoriel, nous allons zoomer sur la disposition du jeu..
Pour créer la disposition du jeu, vous devrez utiliser un adaptateur pour créer des boutons de lettre et positionner les parties du corps que nous afficherons lorsque les utilisateurs sélectionnent des lettres incorrectes. Nous allons également stocker les réponses du joueur au format XML, les récupérer et choisir un mot au hasard en utilisant Java..
Pour vous rafraîchir la mémoire, voici à quoi ressemblera le dernier jeu..
Dans le tutoriel précédent, nous avons créé des images pour la potence et les six parties du corps. Nous allons les placer dans la structure du jeu dans ce tutoriel. Les positions que vous définissez pour ces éléments doivent être déterminées par les éléments d'image que vous utilisez. Une approche consiste à importer les images dans un éditeur d’image, tel que Adobe Photoshop, à les positionner manuellement, puis à les utiliser. X et y positions par rapport à l’image de potence pour déterminer les positions correctes à appliquer à chaque image de la présentation XML. Si vous commencez avec les images de démonstration que nous avons incluses dans le précédent tutoriel, vous pouvez utiliser les valeurs répertoriées dans ce tutoriel..
Commencez par ouvrir activity_game.xml. Dans la disposition linéaire que nous avons ajoutée au didacticiel précédent, entrez une disposition relative pour contenir les sept images qui constitueront la potence..
Dans la mise en page relative que vous venez de créer, commencez par ajouter l'image de la potence comme indiqué ci-dessous..
N'oubliez pas de modifier le nom pouvant être dessiné si l'image que vous utilisez est nommée différemment. Nous réglons le remplissage gauche et supérieur de l'image sur 0 afin que nous puissions positionner les autres images par rapport à sa position. Nous allons ajouter des ressources de chaîne pour les descriptions de contenu un peu plus tard dans ce tutoriel. La prochaine est la tête.
Si vous utilisez vos propres images, vous devez modifier le remplissage gauche et supérieur en conséquence. Nous utilisons un identifiant attribut afin que nous puissions faire référence à l'image en code. Cela est nécessaire pour le faire apparaître et disparaître en fonction de la saisie de l'utilisateur. L'image suivante que nous ajoutons est le corps.
Cela ressemble beaucoup à ce que nous avons fait pour la tête et, comme vous pouvez le voir ci-dessous, les bras et les jambes sont assez similaires..
Ouvrez le fichier XML de chaînes res / values du projet et ajoutez les chaînes de description de contenu que nous avons utilisées dans les extraits de code ci-dessus..
La potence La tête Le corps Un bras Une jambe
Retournez au fichier de mise en page et passez au Mise en page graphique onglet pour voir le résultat de notre travail. Ajustez le rembourrage supérieur et gauche de chaque image pour ajuster leur position si nécessaire.
Chaque fois qu'une nouvelle partie est lancée, les parties du corps doivent être cachées. Chaque partie du corps est révélée si le joueur choisit une lettre qui n'est pas présente dans le mot cible.
Le jeu utilisera une collection de mots prédéfinis, que nous allons stocker en XML. Dans le dossier des valeurs des ressources de votre projet, ajoutez un nouveau fichier et nommez-le arrays.xml..
Basculer vers le XML onglet, créer un tableau et ajouter quelques mots.
Pour ce tutoriel, nous utilisons un tableau de mots liés à l'informatique. Cependant, pour rendre le jeu plus intéressant, vous pouvez travailler avec différentes catégories, chaque catégorie contenant des mots liés à un thème spécifique. Lorsque l'utilisateur clique sur le bouton de lecture, vous pouvez lui demander de choisir une catégorie et de lire le tableau de mots correspondant..- CHARGEUR
- ORDINATEUR
- TABLETTE
- SYSTÈME
- APPLICATION
- L'INTERNET
- STYLE
- ANDROID
- CLAVIER
- TÉLÉPHONE INTELLIGENT
De retour dans le fichier de disposition d'activité de votre jeu, ajoutez une disposition linéaire immédiatement après la disposition relative que nous avons ajoutée pour la zone de potence. La disposition linéaire est réservée à la zone de réponse..
Nous stockons chaque caractère du mot cible dans sa propre vue de texte afin de pouvoir révéler chaque lettre séparément. Nous allons utiliser le identifiant de la mise en page linéaire dans le code pour ajouter les vues de texte chaque fois qu'un nouveau mot est choisi.
Ouvrez le GameActivity classe et commencez par ajouter les instructions d'importation suivantes en haut.
importer android.content.res.Resources; importer android.graphics.Color; importer android.view.Gravity; importer android.view.ViewGroup.LayoutParams; importer android.widget.LinearLayout; importer android.widget.TextView;
Dans la déclaration de classe, ajoutez un onCreate méthode comme indiqué ci-dessous.
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_game);
Nous définissons la vue du contenu sur le fichier de présentation créé il y a un instant..
Avant de poursuivre, nous devons déclarer quelques variables d'instance. Ajoutez la déclaration immédiatement avant la onCreate méthode.
private String [] mots; Random Rand privé; private String currWord; private LinearLayout wordLayout; private TextView [] charViews;
La collection de mots est stockée dans un tableau et l’application utilise le rand objet pour sélectionner un mot du tableau chaque fois que l'utilisateur commence une nouvelle partie. Nous gardons une référence au mot actuel (CurrWord), la mise en page que nous avons créée pour contenir la zone de réponse (wordLayout) et un tableau de vues de texte pour les lettres (charViews). Retour dans onCreate, après avoir défini la vue du contenu, demandez les ressources de l'application, lisez la collection de mots et stockez-les dans la mots variable d'instance.
Ressources res = getResources (); mots = res.getStringArray (R.array.words);
Notez que nous utilisons le nom que nous avons donné le mot tableau en XML. Initialiser le rand objet et CurrWord chaîne.
rand = new Random (); currWord = "";
Obtenez une référence à la zone de mise en page que nous avons créée pour les lettres de réponse.
wordLayout = (LinearLayout) findViewById (R.id.word);
Un certain nombre de tâches doivent être effectuées chaque fois qu'une nouvelle partie est lancée par le joueur. Créons une méthode d'assistance pour tout organiser. Après le onCreate méthode, ajoutez le schéma de méthode suivant.
private void playGame () // joue à un nouveau jeu
À l'intérieur de playGame méthode, commencez par choisir un mot aléatoire dans le tableau.
String newWord = words [rand.nextInt (words.length)];
Parce que le playGame la méthode est invoquée lorsque l'utilisateur choisit de rejouer après avoir gagné ou perdu un jeu, il est donc important de s'assurer de ne pas choisir le même mot deux fois de suite.
while (newWord.equals (currWord)) newWord = words [rand.nextInt (words.length)];
Mettre à jour le CurrWord variable d'instance avec le nouveau mot cible.
currWord = newWord;
L'étape suivante consiste à créer une vue de texte pour chaque lettre du mot cible. Toujours dans notre méthode d'assistance, créez un nouveau tableau pour stocker les vues de texte pour les lettres du mot cible.
charViews = new TextView [currWord.length ()];
Ensuite, supprimez toutes les vues de texte du wordLayout disposition.
wordLayout.removeAllViews ();
Utilisez un simple pour boucle pour parcourir chaque lettre de la réponse, créer une vue texte pour chaque lettre et définir le texte de la vue texte sur la lettre actuelle.
Accentsconagua
pour (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); La chaîne est stockée sous forme de tableau de caractères. le caractère Cette méthode nous permet d’accéder aux caractères d’un index spécifique. Toujours dans le pour boucle, définissez les propriétés d'affichage de la vue de texte et ajoutez-les à la présentation.
pour (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]); Nous avons défini la couleur du texte sur blanc afin que l'utilisateur ne puisse pas le voir sur le fond blanc. S'ils devinent correctement la lettre, la propriété de couleur du texte est noir pour la révéler au lecteur. Retour dans le onCreate méthode, appelez la méthode d'assistance que nous venons de créer.
playGame ();
Nous élargirons les deux onCreate et la méthode d'assistance un peu plus tard.
L'étape suivante consiste à créer une zone dans laquelle le joueur choisit les lettres à deviner. Revenez sur la structure d'activité du jeu et ajoutez la vue de grille suivante pour contenir les boutons de lettre. Insérer la vue grille immédiatement après la disposition linéaire que nous avons ajoutée pour le mot de réponse.
Nous allons utiliser un adaptateur pour mapper les lettres de l'alphabet sur les boutons de la vue en grille. Nous mettons en place sept boutons par rangée, comme vous pouvez le voir sur le numColumns attribut.
Chaque lettre sera un bouton ajouté à la mise en page à l'aide d'un adaptateur. Ajoutez un nouveau fichier dans le dossier de présentation de votre projet, nommez-le letter.xml et remplissez-le avec l'extrait de code suivant..
Nous utilisons l’une des formes dessinables que nous avons créées la dernière fois comme arrière-plan et définissons un sur clic méthode que nous mettrons en œuvre la prochaine fois. Si vous améliorez l'application pour cibler différentes densités d'écran, vous pouvez envisager de personnaliser l'attribut height en conséquence..
Ajoutez une nouvelle classe au paquet src de votre projet, nommez-la LetterAdapter, et choisir android.widget.BaseAdapter comme sa super-classe.
Comme vous le verrez, une classe d'adaptateur inclut une série de méthodes standard que nous allons implémenter. Ajouter les instructions d'importation suivantes à la nouvelle classe.
importer android.content.Context; importer android.view.LayoutInflater; importer android.widget.Button;
Dans la déclaration de classe, ajoutez deux variables d'instance, comme indiqué ci-dessous..
private String [] lettres; private LayoutInflater letterInf;
le des lettres array stockera les lettres de l’alphabet et inflaterera la disposition des boutons que nous avons définie à chaque vue gérée par l’adaptateur. Après les variables d'instance, ajoutez une méthode de constructeur pour l'adaptateur..
public LetterAdapter (Context c) // adaptateur d'installation
À l'intérieur du constructeur, instanciez le tableau alphabet et affectez les lettres A à Z à chaque position..
lettres = nouvelle chaîne [26]; pour (int a = 0; a < letters.length; a++) letters[a] = "" + (char)(a+'A');
Chaque caractère est représenté par un nombre afin que nous puissions définir les lettres A à Z dans une boucle commençant à zéro en ajoutant la valeur du caractère A à chaque index du tableau. Toujours dans la méthode du constructeur, spécifiez le contexte dans lequel nous voulons gonfler la présentation, qui sera transmise à partir de l'activité principale ultérieurement.
letterInf = LayoutInflater.from (c);
Eclipse aurait dû créer un getCount aperçu de la méthode. Mettre à jour sa mise en œuvre comme suit.
@Override public int getCount () return letters.length;
Cela représente le nombre de vues, une pour chaque lettre. Nous n'appelons pas les méthodes de la classe adaptateur explicitement dans l'application. C'est le système d'exploitation qui les utilise pour créer l'élément d'interface utilisateur auquel nous appliquons l'adaptateur, qui dans ce cas sera la vue de grille..
Mettre à jour la mise en œuvre de getView comme indiqué dans l'extrait de code ci-dessous.
@Override public View getView (position int, View convertView, parent ViewGroup) // crée un bouton pour la lettre se trouvant à cette position dans l'alphabet Button letterBtn; if (convertView == null) // gonfle la disposition des boutons letterBtn = (Button) letterInf.inflate (R.layout.letter, parent, false); else letterBtn = (Button) convertView; // définit le texte sur cette lettre letterBtn.setText (letters [position]); return letterBtn;
Prenez un moment pour tout laisser pénétrer. Pour l'essentiel, cette méthode génère chaque vue mappée sur l'élément d'interface utilisateur via l'adaptateur. Nous gonflons la disposition des boutons que nous avons créée et définissons la lettre en fonction de la position de l'alphabet dans la vue. Nous avons indiqué que 26 vues seront cartographiées, la position de chacune reflétant sa position dans le tableau alphabet. Vous pouvez laisser les autres méthodes de la classe adaptateur telles quelles..
@Override public Object getItem (int arg0) return null; @Override public long getItemId (int arg0) return 0;
Revisitez la classe d'activité du jeu et ajoutez une variable d'instance pour la vue en grille et l'adaptateur..
lettres GridView privées; private LetterAdapter ltrAdapt;
Vous devez également ajouter une autre déclaration d'importation..
importer android.widget.GridView;
dans le onCreate méthode, avant la ligne dans laquelle vous appelez le playGame méthode d'assistance, obtenir une référence à la vue de grille.
lettres = (GridView) findViewById (R.id.letters);
Ajouter le playGameL'implémentation actuelle de avec l'extrait suivant. Dans cet extrait, nous instancions l'adaptateur et le définissons dans la vue de grille..
ltrAdapt = new LetterAdapter (this); lettres.setAdapter (ltrAdapt);
Exécutez l'application dans l'émulateur et vous devriez voir l'interface utilisateur. Cependant, vous ne pourrez pas encore interagir avec les boutons. C'est ce sur quoi nous allons nous concentrer dans la troisième et dernière tranche de cette série..
Si vous exécutez votre application à ce stade, elle vous présentera l'interface du jeu, mais ne répondra pas encore à l'interaction de l'utilisateur. Nous allons implémenter les fonctionnalités restantes dans la dernière partie de cette série.
Lorsqu'un joueur clique sur les boutons des lettres, l'application doit vérifier si la lettre sélectionnée est incluse dans le mot cible et mettre à jour la réponse et le potence en conséquence. Nous allons également présenter un dialogue au joueur s'il gagne ou perd, et nous ajouterons également un bouton d'aide. Enfin, nous allons ajouter une navigation de base à travers une barre d'action.
