{"id":35,"date":"2012-05-09T21:33:00","date_gmt":"2012-05-09T20:33:00","guid":{"rendered":"http:\/\/cyol.fr\/blogwp\/?p=35"},"modified":"2013-11-14T16:23:45","modified_gmt":"2013-11-14T15:23:45","slug":"cache-cache-jeu-pour-enfant-sur-android","status":"publish","type":"post","link":"https:\/\/cyol.fr\/blog\/post\/cache-cache-jeu-pour-enfant-sur-android\/","title":{"rendered":"Cache-cache : jeu pour enfant sur Android"},"content":{"rendered":"<p>J&rsquo;ai deux enfants qui me prennent sans arr\u00eat mon Android \u00ab\u00a0pour jouer\u00a0\u00bb. Et mon plus grand (4ans) qui me demande ce que je fais comme travail. Je lui montr\u00e9 SRDice mais sans qu&rsquo;il con\u00e7oive trop l&rsquo;int\u00e9r\u00eat de la chose&#8230;<\/p>\n<p>Du coup, je me suis dis que j&rsquo;allais leur cr\u00e9er un petit jeu \u00ab\u00a0Fait par Papa\u00a0\u00bb. (Bon, je ne fais pas de jeux dans le cadre de mon travail, mais vu que je fais du d\u00e9veloppement, \u00e7a couvre en partie et \u00e7a a l&rsquo;avantage de rendre plus concret \u00ab\u00a0le travail de Papa\u00a0\u00bb)<\/p>\n<p>L&rsquo;id\u00e9e du jeu \u00ab\u00a0Cache-Cache\u00a0\u00bb est simple : Petit Lapin se cache dans la for\u00eat (une carte divis\u00e9e en cases), il faut le retrouver (en cliquant sur la bonne case). Si on dit \u00ab\u00a0Tu es l\u00e0\u00a0\u00bb (on clique sur une case) et que Petit Lapin n&rsquo;y est pas, Petit Lapin va dire \u00ab\u00a0T&rsquo;es Froid\u00a0\u00bb, \u00ab\u00a0Tu chauffes\u00a0\u00bb ou \u00ab\u00a0Tu Br\u00fbles\u00a0\u00bb en fonction de s&rsquo;il se cache loin ou pr\u00e8s de la case s\u00e9lectionn\u00e9e (principe de \u00ab\u00a0La main chaude\u00a0\u00bb).<\/p>\n<p><!--more--><\/p>\n<h3>Dessiner la carte<\/h3>\n<p>Pour commencer on d\u00e9finit donc une carte. Je suis parti sur un <a title=\"Android Developers : Tutorial Table Layout\" href=\"http:\/\/developer.android.com\/resources\/tutorials\/views\/hello-tablelayout.html\" hreflang=\"en\">TableLayout<\/a>, contenant des TableRow contenant eux m\u00eame des TextView (Hi\u00e9rarchie qu&rsquo;on retrouve en HTML avec &lt;table&gt; &lt;tr&gt; &lt;td&gt; ). Afin que mes cases aient toutes la m\u00eame dimension, je pr\u00e9cise pour chaque android:layout_weight=\u00a0\u00bb1&Prime;. Enfin afin de mieux visualiser les cases (dans un premier temps)\u00a0 je leur met un fond blanc : android:background=\u00a0\u00bb#FFFFFF\u00a0\u00bb et une l\u00e9g\u00e8re marge : android:layout_margin=\u00a0\u00bb1dp\u00a0\u00bb<\/p>\n<p>Il s&rsquo;agit maintenant de rendre cliquable ces cases, de r\u00e9agir \u00e0 ce clic et de pouvoir identifier laquelle a \u00e9t\u00e9 cliqu\u00e9. Pour ce faire on leur donne respectivement les attributs :<\/p>\n<ul>\n<li>android:clickable=\u00a0\u00bbtrue\u00a0\u00bb<\/li>\n<li>android:onClick=\u00a0\u00bbclickCellHandler\u00a0\u00bb<\/li>\n<li>android:tag=\u00a0\u00bbA1&Prime;<\/li>\n<\/ul>\n<p>Le premier indique simplement que l&rsquo;\u00e9l\u00e9ment est cliquable. Le second donne le nom de la fonction \u00ab\u00a0d&rsquo;\u00e9coute\u00a0\u00bb du clic (fonction qu&rsquo;il faudra cr\u00e9er dans son Activity). Enfin le dernier permettra d&rsquo;identifier la case lors de l&rsquo;appel \u00e0 la fonction clickCellHandler(View v) gr\u00e2ce \u00e0 \u00ab\u00a0v.getTag()\u00a0\u00bb.<\/p>\n<p>Maintenant que le terrain est pr\u00eat et r\u00e9agit au clic, initialisons le jeu.<\/p>\n<h3>Initialiser la partie<\/h3>\n<p>D&rsquo;abord le syst\u00e8me de coordonn\u00e9es :<\/p>\n<p>String[] xCarte et String[] yCarte vont nous permettre de transformer les A1, &#8230; en 0,0 plus facile pour la suite :<\/p>\n<pre class=\"brush:java\">String[] xCarte = {\"A\", \"B\", \"C\", \"D\", \"E\"};\r\nString[] yCarte = {\"1\", \"2\", \"3\", \"4\", \"5\"};<\/pre>\n<p>On d\u00e9fini aussi les \u00ab\u00a0temp\u00e9ratures\u00a0\u00bb :<\/p>\n<pre class=\"brush:java\">public static final String[] TEMPERATURES = {\"Bravo, tu m'as trouv\u00e9\", \"Tu es Br\u00fblant\", \"Tu chauffes\", \"Brr, tu refroidis\", \"Aglagla, tu es glac\u00e9\"};<\/pre>\n<p>On va enfin d\u00e9finir xLapin et yLapin en les tirant au hasard :\u00a0 (int) (Math.random() * 5);<\/p>\n<p>Ce qui fait que petit lapin est en :<\/p>\n<pre class=\"brush:java\">\/\/Test o\u00f9 est Petit Lapin ? \r\nToast.makeText(getApplicationContext(), \"Petit Lapin est en \" + xCarte[xLapin] + yCarte[yLapin]+ \" !\",\r\n\tToast.LENGTH_SHORT).show();<\/pre>\n<p>Et voil\u00e0 qui va nous afficher \u00ab\u00a0Petit Lapin est en C4 !\u00a0\u00bb si xLapin = 2 et yLapin = 3.<\/p>\n<h3>Regarder si Petit Lapin est sur un case<\/h3>\n<p>Au clic sur une case, on r\u00e9cup\u00e8re le tag de cette case et on le transforme en coordonn\u00e9es informatique simplement en cherchant la correspondance :<\/p>\n<pre class=\"brush:java\">String tag = v.getTag().toString();\r\n\/\/On d\u00e9coupe le Tag\r\nString xString = tag.substring(0,1);\r\nString yString = tag.substring(1,2);\r\n\/\/On r\u00e9cup\u00e8re la coordonn\u00e9e informatique\r\nint xCherche = Arrays.binarySearch(xCarte, xString);\r\nint yCherche = Arrays.binarySearch(yCarte, yString);\r\n\/\/On prend la distance Max en X ou Y entre la case s\u00e9lectionn\u00e9e et Petit Lapin\r\nint distance = Math.max(Math.abs(xLapin-xCherche), Math.abs(yLapin-yCherche));<\/pre>\n<p>Il reste \u00e0 calculer la distance : on utilise abs pour r\u00e9cup\u00e9rer la valeur absolue (on ne pr\u00e9cise pas s&rsquo;il est 2 cases \u00e0 droite ou \u00e0 gauche, mais juste qu&rsquo;il est \u00e0 2 cases)<\/p>\n<pre class=\"brush:java\">\/\/On prend la distance Max en X ou Y entre la case s\u00e9lectionn\u00e9e et Petit Lapin\r\nint distance = Math.max(Math.abs(xLapin-xCherche), Math.abs(yLapin-yCherche));<\/pre>\n<p>Et avec le tableau simple TEMPERATURE cr\u00e9\u00e9 on affiche :<\/p>\n<pre class=\"brush:java\">Toast.makeText(getApplicationContext(), \"Petit Lapin est en \" + xCarte[xLapin] + yCarte[yLapin]+ \" !\\n\" +\r\n\t\t\t\t\"Tu viens de le chercher en \"+xCarte[xCherche] + yCarte[yCherche]+ \" !\\n\" +\r\n\t\t\t\t\"Il est \u00e0 \" + distance + \" de toi !\\n\" +\r\n\t\t\t\tTEMPERATURES[distance] + \" !\",\r\n\t\t\t\tToast.LENGTH_LONG).show();<\/pre>\n<p>Et dernier point : pour rappel on affiche la distance dans la case cliqu\u00e9e :<\/p>\n<pre class=\"brush:java\">TextView tagCherche = (TextView) v;\r\n\/\/On passe la case en noir et on affiche la distance\r\ntagCherche.setBackgroundColor(0xff000000);\r\ntagCherche.setText(String.valueOf(distance));<\/pre>\n<p>Fin. Pour la m\u00e9canique en tous cas. Maintenant il va falloir habiller tout \u00e7a&#8230;<\/p>\n<p>Id\u00e9es en vrac : nombre de coups, alerte sur une case d\u00e9j\u00e0 cliqu\u00e9e, param\u00e9trage de la taille de la carte, et du dessin, beaucoup de dessins pour embellir tout \u00e7a.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>J&rsquo;ai deux enfants qui me prennent sans arr\u00eat mon Android \u00ab\u00a0pour jouer\u00a0\u00bb. Et mon plus grand (4ans) qui me demande ce que je fais comme travail. Je lui montr\u00e9 SRDice mais sans qu&rsquo;il con\u00e7oive trop l&rsquo;int\u00e9r\u00eat de la chose&#8230; [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,12,2,4],"tags":[26,114,62,23,112],"class_list":["post-35","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-cache-cache","category-developpement","category-srdice","tag-activity","tag-android","tag-developpement-2","tag-jeu","tag-srdice","odd"],"_links":{"self":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":6,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":1085,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions\/1085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media\/124"}],"wp:attachment":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}