1. <html>
  2. <head>
  3. <title> Taquin </title>
  4. <script language="JavaScript">
  5. function papillon(a,b){
  6. var morceau = (a+1)+b*4;
  7. var uneImage = "papill" + morceau + ".JPG";
  8. return uneImage;
  9. }
  10. function numero_id(a,b){
  11. var nb = eval( (b+a)+a*4)
  12. return nb;
  13. }
  14. function proximite(colonne,ligne){
  15. if (vide[0] == colonne) {
  16. if ( vide[1] == eval( ligne + 1) || vide[1] == eval( ligne - 1)) {
  17. return 1; //le vide et l'image sont sur la même colonne
  18. }
  19. else {
  20. return 0;
  21. }
  22. }
  23. else {
  24. if (vide[1] == ligne) {
  25. if ( vide[0] == eval( colonne + 1) || vide[0] == eval( colonne - 1)) {
  26. return 2;//le vide et l'image sont sur la même ligne
  27. }
  28. else {
  29. return 0;
  30. }
  31. }
  32. else {
  33. return 0;
  34. }
  35. }
  36. }
  38. function echanger (colonne,ligne){
  39. var source = document.getElementById(numero_id(colonne,ligne)).src;
  40. var neant = document.getElementById(numero_id(vide[0],vide[1])).src;
  41. document.getElementById(numero_id(colonne,ligne)).src = neant;
  42. document.getElementById(numero_id(vide[0],vide[1])).src = source;
  43. vide[0] = colonne;
  44. vide[1] = ligne;
  46. function cliquer(colonne,ligne){
  47. var p = proximite(colonne,ligne) ;
  48. if ( p == 0) {
  49. window.alert("Mouvement impossible");
  50. }
  51. else {
  52. echanger(colonne,ligne);
  53. };
  54. }
  55. function onMelange( F ) { for (var i= 1 ; i<= parseInt(F) ; i++){ var Direction = '0'; var Cx ; var Cy ; while ( Direction == '0') { Direction = Hazard( vide[0] , vide[1] ); } switch (Direction) { case '1': //deplacer le vide vers le haut Cx = vide[0]; Cy =vide[1]-1; break; case '2': //deplacer le vide vers le bas Cx = vide[0]; Cy =vide[1]+1; break; case '3': //deplacer le vide vers la droite Cx = vide[0]+1; Cy =vide[1]; break; case '4': //deplacer le vide vers la gauche Cx = vide[0]-1; Cy =vide[1]; break; } ; echanger(Cx,Cy); } }
  56. //melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide
  57. function onMelange( F ) {
  58. for (var i= 1 ; i<= parseInt(F) ; i++){var Direction = '0';var Cx ;var Cy ;
  59. while ( Direction == '0') {Direction = Hazard( vide[0] , vide[1] ); }
  60. switch (Direction) {case '1': //deplacer le vide vers le haut
  61. Cx = vide[0];
  62. Cy =vide[1]-1;
  63. break;
  64. case '2': //deplacer le vide vers le bas
  65. Cx = vide[0];
  66. Cy =vide[1]+1;
  67. break;
  68. case '3': //deplacer le vide vers la droite
  69. Cx = vide[0]+1;
  70. Cy =vide[1];
  71. break;
  72. case '4': //deplacer le vide vers la gauche
  73. Cx = vide[0]-1;
  74. Cy =vide[1];
  75. break;
  76. } ;echanger(Cx,Cy); } }
  77. //melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide
  78. function onMelange( F ) {
  79. for (var i= 1 ; i<= parseInt(F) ; i++){var Direction = '0';var Cx ;var Cy ;
  80. while ( Direction == '0') {Direction = Hazard( vide[0] , vide[1] ); }
  81. switch (Direction) {case '1': //deplacer le vide vers le haut
  82. Cx = vide[0];
  83. Cy =vide[1]-1;
  84. break;
  85. case '2': //deplacer le vide vers le bas
  86. Cx = vide[0];
  87. Cy =vide[1]+1;
  88. break;
  89. case '3': //deplacer le vide vers la droite
  90. Cx = vide[0]+1;
  91. Cy =vide[1];
  92. break;
  93. case '4': //deplacer le vide vers la gauche
  94. Cx = vide[0]-1;
  95. Cy =vide[1];
  96. break;
  97. } ;echanger(Cx,Cy); } }
  101. var limiteX = 3; //colonnes 0 à limiteX
  102. var limiteY = 3; //lignes 0 à limiteY
  104. var vide = new Array(limiteX,limiteY);//position de la case vide
  106. //le reseau de cases est fixe
  107. //les images sont mobiles et attribuées temporairement à une case
  109. //parties et fonctions à rajouter ici dans l'ordre
  110. </script>
  111. </head>
  112. <body>
  113. <form>
  114. <table>
  115. <script language="JavaScript">
  116. for (var i =0 ; i<=limiteX ; i++){
  117. document.write(" <tr> ");
  118. for (var j=0 ; j<=limiteY ; j++){
  119. var LeMorceau = papillon(j,i) ;
  120. document.write("<td > <img id="+numero_id(i,j)+" src=' "+LeMorceau+" ' onClick='javascript:cliquer("+i+","+j+")' > </td>");
  121. }
  122. document.write(" </tr> </br>");
  123. }
  124. </script>
  125. </table></br>
  126. <p> Choisir la difficult&eacute </p>
  127. <select name="choix" >
  128. <option value='30'> facile </option>
  129. <option value='45'> moyen </option>
  130. <option value='60'> difficile </option>
  131. </select>
  132. <input type="button" value="Valider" onClick="javascript:onMelange(choix.value)"/>
  133. </form>
  134. </body>
  135. </html>

TAQUIN ETRE2EN1