Maison > interface Web > js tutoriel > Explication détaillée de la méthode d'implémentation consistant à mélanger aléatoirement la position de l'image de la grille à neuf carrés en JavaScript

Explication détaillée de la méthode d'implémentation consistant à mélanger aléatoirement la position de l'image de la grille à neuf carrés en JavaScript

黄舟
Libérer: 2018-01-09 14:50:27
original
3520 Les gens l'ont consulté

Cet article présente principalement en détail la méthode de mise en œuvre de javascriptNine-GonggePicture Le brassage aléatoire des positions

Aujourd'hui, je vais créer un simple puzzle en forme de grille de neuf carrés. La chose la plus gênante pour moi est de cliquer pour commencer à mélanger la position des images. Au début, j'ai consulté les blogs connexes sur Baidu et j'ai fait de nombreux détours. Finalement, après avoir lu de nombreux exemples, j'ai écrit ma propre méthode.

<script>
//打乱图片方法
  function fun(){
   var x = [];
   var y ;
   for(var i=1;i<10;i++){
    var p = document.getElementById("d"+i+"");
    p.removeChild(document.getElementById("img"+i+""));
   }
   for(var i=1;i<10;i++){
   var img = document.createElement(&#39;img&#39;); //动态创建img标签
    var p1 = document.getElementById("d"+i+"");
    var p = [1,2,3,4,5,6,7,8,9];    //用p[]数组保存图片的代号
    var j = Math.round(Math.random()*8);  //通过随机数j产生随机图片代号p[j]
    for ( var u=0 ; u < x.length ; u++ ) //遍历x[]数组防止后面出现与前面一样的图片代号
     { 
      if ( x[u] == p[j] ) 
      { 
       y = x[u];
      break;
      } 
     }
    if(p[j]==y){
     i-=1;
     continue; 
    }else{
     img.setAttribute("src","images/tiger_0"+p[j]+".gif");
     img.id = "img"+i+"";
    }
    p1.appendChild(img);
    x.push(p[j]); //添加已经出现的图片号数进入x[]数组
   }
  dragdrop();//拖动图片方法
  }
</script>
Copier après la connexion
Cliquez sur Démarrer pour obtenir l'effet de mélanger aléatoirement la position de l'image, comme suit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal