1. <html>
  2. <head>
  3. <title> Taquin </title>
  4. <script language="JavaScript">
  5. /*
  6. - fonction papillon(a,b)
  7. attribution d'une image à une case du tableau
  8. - fonction numero_id(a,b)
  9. attribution d'un id à une case du tableau
  10. - fonction proximite(colonne,ligne)
  11. verification si la case cliquée est à proximité de la case vide
  12. renvoi 1 si le vide et l'image sont sur la même colonne ou
  13. 2 si le vide et l'image sont sur la même ligne , sinon 0
  14. - fonction echanger (colonne,ligne)
  15. echange de l'image de la case cliquée et de la case vide
  16. - fonction cliquer(colonne,ligne)
  17. evenement click sur une image
  18. - fonction onMelange( F )
  19. melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide
  20. - fonction Hazard (colonne,ligne)
  21. randomization de onMelange()
  22. sortie 0 pas de deplacement, haut 1 ,bas 2 , droite 3 , gauche 4
  23. */
  25. var limiteX = 3; //colonnes 0 à limiteX
  26. var limiteY = 3; //lignes 0 à limiteY
  28. var vide = new Array(limiteX,limiteY);//position de la case vide
  30. //le reseau de cases est fixe
  31. //les images sont mobiles et attribuées temporairement à une case
  33. //attribution d'une image à une case du tableau
  34. function papillon(a,b){
  35. var morceau = (a+1)+b*4;
  36. var uneImage = "papill" + morceau + ".JPG";
  37. return uneImage;
  38. }
  40. //attribution d'un id à une case du tableau
  41. function numero_id(a,b){
  42. var nb = eval( (b+a)+a*4)
  43. return nb;
  44. }
  46. //verification si la case cliquée est à proximité de la case vide renvoi 1 ou 2 si oui, 0 si non
  47. function proximite(colonne,ligne){
  48. if (vide[0] == colonne) {
  49. if ( vide[1] == eval( ligne + 1) || vide[1] == eval( ligne - 1)) {
  50. return 1; //le vide et l'image sont sur la même colonne
  51. }
  52. else {
  53. return 0;
  54. }
  55. }
  56. else {
  57. if (vide[1] == ligne) {
  58. if ( vide[0] == eval( colonne + 1) || vide[0] == eval( colonne - 1)) {
  59. return 2;//le vide et l'image sont sur la même ligne
  60. }
  61. else {
  62. return 0;
  63. }
  64. }
  65. else {
  66. return 0;
  67. }
  68. }
  69. }
  71. //echange de l'image de la case cliquée et de la case vide
  72. function echanger (colonne,ligne){
  73. var source = document.getElementById(numero_id(colonne,ligne)).src;
  74. var neant = document.getElementById(numero_id(vide[0],vide[1])).src;
  75. document.getElementById(numero_id(colonne,ligne)).src = neant;
  76. document.getElementById(numero_id(vide[0],vide[1])).src = source;
  77. vide[0] = colonne;
  78. vide[1] = ligne;
  79. }
  81. //evenement click sur une image
  82. function cliquer(colonne,ligne){
  83. var p = proximite(colonne,ligne) ;
  84. if ( p == 0) {
  85. window.alert("Mouvement impossible");
  86. }
  87. else {
  88. echanger(colonne,ligne);
  89. };
  90. }
  92. //melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide
  93. function onMelange( F ) {
  94. for (var i= 1 ; i<= parseInt(F) ; i++){
  95. var Direction = '0';
  96. var Cx ;
  97. var Cy ;
  98. while ( Direction == '0') {
  99. Direction = Hazard( vide[0] , vide[1] );
  100. }
  101. switch (Direction) {
  102. case '1': //deplacer le vide vers le haut
  103. Cx = vide[0];
  104. Cy =vide[1]-1;
  105. break;
  106. case '2': //deplacer le vide vers le bas
  107. Cx = vide[0];
  108. Cy =vide[1]+1;
  109. break;
  110. case '3': //deplacer le vide vers la droite
  111. Cx = vide[0]+1;
  112. Cy =vide[1];
  113. break;
  114. case '4': //deplacer le vide vers la gauche
  115. Cx = vide[0]-1;
  116. Cy =vide[1];
  117. break;
  118. } ;
  119. echanger(Cx,Cy);
  120. }
  121. }
  123. //randomization de onMelange
  124. //valeurs colonne et ligne incluses dans 0,1,2,3
  125. function Hazard (colonne,ligne) {
  126. var Decision = '0'; // 0 pas de deplacement, haut 1 ,bas 2 , droite 3 , gauche 4
  127. var R = Math.floor(Math.random() * 4 ) +1 ;
  128. if ( R ==1 ){ Decision = '1';}
  129. else {
  130. if ( R ==2 ){ Decision = '2';}
  131. else {
  132. if ( R ==3 ){ Decision = '3';}
  133. else {
  134. Decision = '4';
  135. }
  136. } }
  137. switch (Decision){ //verification de la possibilite de deplacement selon position
  138. case '1' :
  139. if (ligne == 0){Decision = '0';};//deplacement vers le haut impossible
  140. break;
  141. case '2' :
  142. if (ligne == limiteY){Decision = '0';};//deplacement vers le bas impossible
  143. break;
  144. case '3' :
  145. if (colonne == limiteX){Decision = '0';};//deplacement vers la droite impossible
  146. break;
  147. case '4' :
  148. if (colonne == 0){Decision = '0';};//deplacement vers la gauche impossible
  149. break;
  150. }
  151. return Decision;
  152. }
  153. </script>
  154. </head>
  155. <body>
  156. <form>
  157. <table>
  158. <script language="JavaScript">
  159. for (var i =0 ; i<=limiteX ; i++){
  160. document.write(" <tr> ");
  161. for (var j=0 ; j<=limiteY ; j++){
  162. var LeMorceau = papillon(j,i) ;
  163. document.write("<td > <img id="+numero_id(i,j)+" src=' "+LeMorceau+" ' onClick='javascript:cliquer("+i+","+j+")' > </td>");
  164. }
  165. document.write(" </tr> </br>");
  166. }
  167. </script>
  168. </table></br>
  169. <p> Choisir la difficult&eacute </p>
  170. <select name="choix" >
  171. <option value='30'> facile </option>
  172. <option value='45'> moyen </option>
  173. <option value='60'> difficile </option>
  174. </select>
  175. <input type="button" value="Valider" onClick="javascript:onMelange(choix.value)"/>
  176. </form>
  177. </body>
  178. </html>

Taquin Game html javascript