js做拼图游戏存在随机生成的图形，有时不可还原的问题

本文链接：https://blog.csdn.net/ma1986/article/details/6577238

本人最近忽然心血来潮，想做个个简单的游戏，做什么游戏比较简单易实现呢，偶然想起小时候玩的拼图游戏，索性做一个玩玩，结果很快就做出来的一个，思想是控制每个小图的id，通过交换id来来实现图片移动，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zcolor-comevc</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function confuseArray1(array){//生成随机图片
   var arrlength=array.length;//获取数组长度
   var tmparr;
   var tmparray= new Array;
   for(var i=0;i<arrlength;i++){
     var tid1 = parseInt(array.length*Math.random());//获取从0到数组长度的随机值
      tmparr = array[tid];
     array[tid] = array[arrlength-1];
     array[arrlength-1] = tmparr;
    array.pop();//数组将最后一个值也就是选中的值消掉，防止重复
     tmparray.push(tmparr);
    }
   return  tmparray;
};
</script>
<script type="text/javascript">

$(document).ready(function(){

 var id;
 var value1=9;
 var value2;
 id="item9";//默认第九个图片为空白
 var flag=false;
 var array=new Array("item1","item2","item3","item4","item5","item6","item7","item8")//把前8个小图的id装进数组
 array=confuseArray1(array);//产生随机id 
 var i=0;
 $('li').each(function(){
  if(i<8)  
 $(this).find('a').attr('id',array[i]);
 i++;
  });
  $("li").click(function(){
   //判断当前对象是否临近空白图片，因为是每3个图片为一行，总共9个小图区域，所以相对位置差是1、3才可以移动（假如换行了位置差还是1的还要做判断） value2=$('li').index($(this))+1;
 switch(value2)
 {
  case value1-1: 
  if (value2%3!=0)
  {flag=true;}
  else{flag=false;}
  break;
  case value1+1: 
  if (value1%3!=0)
  {flag=true;}
  else{flag=false;}
  break;
  case value1+3: 
  flag=true;
  break;
  case value1-3: 
  flag=true;
  break;
  default : 
  flag=false;
  break;
 }
 if(flag)//根据上面的判断，如果可以移动则交换位置（交换id而已）
 { 
  var a=$(this).find('a').attr('id');
  id1="#"+id;
  $(id1).attr('id',a);
  $(this).find('a').attr('id',id);
     value1=value2;
 }
  });
})
</script>
<style>
ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(image/menu_color.jpg); border:1px solid #F0F;}
li {list-style-type:none; width:100px; height:100px; float:left}
li  a{ display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(image/menu_color.jpg) no-repeat 500px 500px; cursor:pointer;}
a#item1{background-position: 0 0; }
a#item2 {background-position: -100px 0;}
a#item3 {background-position: -200px 0;}
a#item4{background-position: 0 -100px;}
a#item5 {background-position: -100px -100px;}
a#item6 {background-position: -200px -100px;}
a#item7 {background-position: 0 -200px;}
a#item8 {background-position: -100px -200px;}
a#item9 {background-color:#fff;}
</style> 
</head>

</head>

<body>


<div id="main">

<ul>
<li><a id="item1"  title="Item 1"> </a></li>
<li><a id="item2"  title="Item 2"> </a></li>
<li><a id="item3"  title="Item 3"> </a></li>
<li><a id="item4"  title="Item 4"> </a></li>
<li><a id="item5"  title="Item 5"> </a></li>
<li><a id="item6" title="Item 6"> </a></li>
<li><a id="item7"  title="Item 7"> </a></li>
<li><a id="item8" title="Item 8"> </a></li>
<li><a id="item9"  title="Item 9" > </a></li>

</ul> 

</div>

</html>

效果是出来了，可以拼图游戏了，但是还没结束，发现通过随机生成的图形，并不能每次都能拼图成功，有时候拼到最后，发现始终剩下两张相邻的小图是错位的，怎么移动也不能还原，这就引发了问题！——假如随机导致的最后结果是一对相邻图片错位，是不能拼图成功的，如果是两对图片错位就可以，所以必须是偶数对才能拼成功！

所以接下来修改了哈js随机数组：