Catégories

Twitter @CyolFalcon

Je les lis (et ils le valent bien!)

Cache-cache : jeu pour enfant sur Android

J’ai deux enfants qui me prennent sans arrêt mon Android « pour jouer ». Et mon plus grand (4ans) qui me demande ce que je fais comme travail. Je lui montré SRDice mais sans qu’il conçoive trop l’intérêt de la chose…

Du coup, je me suis dis que j’allais leur créer un petit jeu « Fait par Papa ». (Bon, je ne fais pas de jeux dans le cadre de mon travail, mais vu que je fais du développement, ça couvre en partie et ça a l’avantage de rendre plus concret « le travail de Papa »)

L’idée du jeu « Cache-Cache » est simple : Petit Lapin se cache dans la forêt (une carte divisée en cases), il faut le retrouver (en cliquant sur la bonne case). Si on dit « Tu es là » (on clique sur une case) et que Petit Lapin n’y est pas, Petit Lapin va dire « T’es Froid », « Tu chauffes » ou « Tu Brûles » en fonction de s’il se cache loin ou près de la case sélectionnée (principe de « La main chaude »).

Dessiner la carte

Pour commencer on définit donc une carte. Je suis parti sur un TableLayout, contenant des TableRow contenant eux même des TextView (Hiérarchie qu’on retrouve en HTML avec <table> <tr> <td> ). Afin que mes cases aient toutes la même dimension, je précise pour chaque android:layout_weight= »1″. Enfin afin de mieux visualiser les cases (dans un premier temps)  je leur met un fond blanc : android:background= »#FFFFFF » et une légère marge : android:layout_margin= »1dp »

Il s’agit maintenant de rendre cliquable ces cases, de réagir à ce clic et de pouvoir identifier laquelle a été cliqué. Pour ce faire on leur donne respectivement les attributs :

  • android:clickable= »true »
  • android:onClick= »clickCellHandler »
  • android:tag= »A1″

Le premier indique simplement que l’élément est cliquable. Le second donne le nom de la fonction « d’écoute » du clic (fonction qu’il faudra créer dans son Activity). Enfin le dernier permettra d’identifier la case lors de l’appel à la fonction clickCellHandler(View v) grâce à « v.getTag() ».

Maintenant que le terrain est prêt et réagit au clic, initialisons le jeu.

Initialiser la partie

D’abord le système de coordonnées :

String[] xCarte et String[] yCarte vont nous permettre de transformer les A1, … en 0,0 plus facile pour la suite :

String[] xCarte = {"A", "B", "C", "D", "E"};
String[] yCarte = {"1", "2", "3", "4", "5"};

On défini aussi les « températures » :

public static final String[] TEMPERATURES = {"Bravo, tu m'as trouvé", "Tu es Brûlant", "Tu chauffes", "Brr, tu refroidis", "Aglagla, tu es glacé"};

On va enfin définir xLapin et yLapin en les tirant au hasard :  (int) (Math.random() * 5);

Ce qui fait que petit lapin est en :

//Test où est Petit Lapin ? 
Toast.makeText(getApplicationContext(), "Petit Lapin est en " + xCarte[xLapin] + yCarte[yLapin]+ " !",
	Toast.LENGTH_SHORT).show();

Et voilà qui va nous afficher « Petit Lapin est en C4 ! » si xLapin = 2 et yLapin = 3.

Regarder si Petit Lapin est sur un case

Au clic sur une case, on récupère le tag de cette case et on le transforme en coordonnées informatique simplement en cherchant la correspondance :

String tag = v.getTag().toString();
//On découpe le Tag
String xString = tag.substring(0,1);
String yString = tag.substring(1,2);
//On récupère la coordonnée informatique
int xCherche = Arrays.binarySearch(xCarte, xString);
int yCherche = Arrays.binarySearch(yCarte, yString);
//On prend la distance Max en X ou Y entre la case sélectionnée et Petit Lapin
int distance = Math.max(Math.abs(xLapin-xCherche), Math.abs(yLapin-yCherche));

Il reste à calculer la distance : on utilise abs pour récupérer la valeur absolue (on ne précise pas s’il est 2 cases à droite ou à gauche, mais juste qu’il est à 2 cases)

//On prend la distance Max en X ou Y entre la case sélectionnée et Petit Lapin
int distance = Math.max(Math.abs(xLapin-xCherche), Math.abs(yLapin-yCherche));

Et avec le tableau simple TEMPERATURE créé on affiche :

Toast.makeText(getApplicationContext(), "Petit Lapin est en " + xCarte[xLapin] + yCarte[yLapin]+ " !\n" +
				"Tu viens de le chercher en "+xCarte[xCherche] + yCarte[yCherche]+ " !\n" +
				"Il est à " + distance + " de toi !\n" +
				TEMPERATURES[distance] + " !",
				Toast.LENGTH_LONG).show();

Et dernier point : pour rappel on affiche la distance dans la case cliquée :

TextView tagCherche = (TextView) v;
//On passe la case en noir et on affiche la distance
tagCherche.setBackgroundColor(0xff000000);
tagCherche.setText(String.valueOf(distance));

Fin. Pour la mécanique en tous cas. Maintenant il va falloir habiller tout ça…

Idées en vrac : nombre de coups, alerte sur une case déjà cliquée, paramétrage de la taille de la carte, et du dessin, beaucoup de dessins pour embellir tout ça.

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.