【软院网技术交流】拼图 In JQuery --- 小圆特别版 - 技术| 编程·课件·Linux - 软院网 RuanYuan.Net

      有人说javascript是玩具一样的语言，在我看来，这门语言确实是很好玩的，至少可以折腾出一些好玩的东东。所以，今天又推出了一个比较好玩的小游戏--拼图，相信大家小时候都玩过，之所以叫做小圆特别版，是因为这是我和小圆@vo_ 小童鞋一起做成的，在此特别为小圆童鞋献上一首歌，我很喜欢的电影《千与千寻》的主题曲《いつも何度でも》（永远同在）。社会如此复杂，生活如此无奈，但我们终究要面对、坚强、独立---这就是《千与千寻》告诉我们的道理。


拼图游戏网址： 拼图 In jQuery -- 小圆特别版大家先感受一下。(http://www.ruanyuan.net/tech_demo/wjf/pintu/index.html)


   拼图的初始情形如上图所示，随机打乱的小方格，通过空白块的上下移动使拼图还原。
   在网页上实现，自然会考虑一下几个问题：
               1、使用什么样的数据结构来存储？
               2、怎么构成一个有效的随机初始情形？
               3、怎样判断小方格是否可以移动？
   这些问题解决了，拼图也就自然做出来了。当然这只是一个初步的框架，这个问题最关键的部分是：对于任意的初始条件，设计一种算法，使拼图还原，制作的时候自己想出了两种方法，但是都太过拙劣，过二、三天再补充。    后来查阅了一些资料，发现这在人工智能中还是个比较经典的问题，所以发这个帖子算作是抛砖引玉，希望大家能参与进来一起，提出自己的想法和思路。比较经典的方法是采用A*算法，这个网址有比较详细的介绍：http://www.gamedev.net/page/resources/_/technical/artificial-intelligence/a-pathfinding-for-beginners-r2003，我比较疑惑的是对于这个问题怎样构造h函数和g函数。望各位指点一二。
   另外上一个连连看的帖子中林师兄@jose 提出来新的思路，多谢师兄指点，恕我愚钝，至今未能想出来，等实现了再更新。

   1、采用什么样的数据结构
   直观上看，有3行3列，自然会想到使用二维数组，但进一步思考就好发现，一维数组就可以了，用除数和余数，例如 7,7/3=2,7/3=1, 对应的就是第三行第二列（行列都是从0开始）
   2、怎样构成一个有效的随机初始情形？
   js有生成的随机数的函数，生成一个随机的一位数组是很容易的事，但是，我实现好以后，有时候生成的拼图无论如何也拼不成，我查了下资料，跟数列的奇偶性有关，哈哈，奇偶性，线性代数中大家的老朋友了。我是这样理解这个问题的，我们可以把这个数组看成一个数列，最终的结果是1,2,3,4,5,6,7,8,0，这是个偶数列，每次移动方格不会改变数列的奇偶性，所以如果初始成一个奇数列，那么永远都不会拼出来了。所以必须加一步检测生成数列的奇偶性，用逆序数就可以。
   我最近在读一本书，吴军博士的《数学之美》，收获极大，许许多多的问题归根到底就是数学问题，强烈建议大家读一读。
   具体源码如下：
   var get_arr = function(){
            var get_random = function(){
                     var arr = [];
                     for(i=0; i<8; i++){
                              ran_num = Math.floor(Math.random()*10);
                              while(che_same_num(arr, ran_num)){
                                    ran_num = Math.floor(Math.random()*10);
                              }
                              arr.push(ran_num);
                     }
                     arr.push(0);
                     arr.push(9);
                     return arr;
            }


            var che_same_num = function(arr, num){
                     if(num == 0)
                              return true;
                     if(num == 9)
                              return true;
                     for(i=0; i<arr.length; i++){
                              if(arr == num)
                                    return true;
                     }
                     return false;
            }

            var che_odd_arr = function(arr){
                     var inverse_number = 0;
                     for(i=0; i<arr.length-2; i++){
                              for(j=0; j<=i; j++){
                                    if(arr[j] > arr)
                                             inverse_number++;
                              }
                     }
                     return inverse_number%2 ? true:false;
            }

            var arr = get_random();
            while(che_odd_arr(arr)){
                     arr = get_random();
            }
            return arr;
      }
      3、怎样判断小方格是否可以移动？
      这个比较简单，只要检测被点击的图片上下左右有没有空格即可，逻辑判断。我写得有点复杂，哪位大神能帮我改改？
      if(((td_row==blankbox_row) && (td_col>blankbox_col?td_col==blankbox_col+1:td_col==blankbox_col-1)) || ((td_col==blankbox_col) && (td_row>blankbox_row?td_row==blankbox_row+1:td_row==blankbox_row-1))){
                     pic_arr[blank_num] = pic_arr[td_num];
                     pic_arr[td_num] = 0;
                     set_pics();
         }
         谢谢各位！