一、思路
1、正常顺序的图片显示
2、点击开始游戏，随机打乱图片
3、图片移动操作
4、判断游戏是否结束
二、思考点
1、如何判断随机的图片是否可解？
怎么证明它的可解性，请参考/archives/323.html ，我理解的大神们的意思就是，原数组和随机出来的数组的 逆序数的 奇偶性 一致，那么就是可解的。
如果原数组是[0,1,2,3,4,5,6,7,8], 算出来的逆序数 为 0， 那么只要保证随机出来的数组的 逆序数 为偶数 ，那么拼图就是可解的。
2、如果随机出来的图片不可解，是不是要重新随机，直到它可解？
不用，因为又有大神发现， 只用调换该数组 倒数第二第三个数值， 就可以改变 该数组逆序数的 奇偶性。
再调换6和7的位置
三、附源码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>拼图</title><style type="text/css">*{margin: 0;padding: 0;box-sizing: content-box;}.wrap{width: 1000px;height: 800px;background: #EDEDED;}#Img{width: 320px;height: 320px;margin: 0 auto; }#Img li{list-style: none;width: 100px;height: 100px;float: left;border: 1px solid #F6F6F6;margin: 1px; cursor: pointer;background-image: url(img/Penguins.jpg); background-size: 300px 300px;background-repeat: no-repeat;position: relative;}.start{text-align: center;}</style></head><body><div class="wrap"><div id="Img"><ul></ul></div><div class="start"><select name="" id="select"><option value="3">3*3</option><option value="4">4*4</option></select><button type="button" id="begin">开始</button></div></div><script src="jquery/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var group = 3, //分为几组进行排列ul = $("#Img ul"),sequence = [],ImgList = [],imgLens,steps;var Puzzle = {initImgOrder : function(){ //正常顺序的图片imgLens = Math.pow(group,2);sequence = [];ul.empty();var size = group * 100 +"px";for (var i = 0; i < imgLens; i++) { var y = -((i / group) >>> 0), x = -i % group;ImgList[i+1] = [x,y];var li = '<li style="background-position: '+x*100+'px '+y*100+'px;"></li>';ul.append(li); sequence.push(i+1);}$("#Img li").css({"backgroundSize":size+" "+size});},showRandomImg: function(newArr){ul.empty();var size = group * 100 +"px";for (var i in newArr) { var item = newArr[i],x = ImgList[item][0],y = ImgList[item][1];var li = '<li data-index="'+item+'" style="background-position: '+x*100+'px '+y*100+'px;" ></li>';ul.append(li);}ul.append('<li id="block" data-index="'+imgLens+'" style="background-image: none;background-color: #fff;"></li>'); //加上空白格$("#Img li").css({"backgroundSize":size+" "+size});},imgMove: function(e){var allLi = ul.find("li"),x = allLi.index($(e)) + 1,z = allLi.index($("#block")) + 1;if(x - 1 == z && (x-1) % group != 0){ //如果空白格在左边 $(e).after($("#block")); steps++;}if(x + 1 == z && (x+1) % group != 1){ //如果空白格在右边 $("#block").after($(e));steps++;}if(x + group == z && (x+group) < imgLens+1){ //如果空白格在下边 var p = $("#block").prev();$(e).next().before($("#block"));p.after($(e));steps++;}if(x - group == z && (x-group) > 0){ //如果空白格在上边var p = $("#block").next();$(e).prev().after($("#block"));p.before($(e)); steps++;}Puzzle.isGameOver();},isGameOver: function(){ //游戏是否结束var allLi = ul.find("li"),count = 0;for (var i = 0; i < imgLens; i++) {var idx = allLi.eq(i).data().index;if (idx == (i + 1)) {count++;}}if(count == imgLens){alert('u are win! '+steps+' steps in use');Puzzle.initImgOrder();$(".start").show();}},randomImgOrder: function(arr){ //随机打乱图片arr.sort(function () {return 0.5 - Math.random();});var num = Puzzle.reverseCount(arr);/** 检测打乱后是否可解 */if (num % 2 != 0) {/** 不可解，通过调换倒数第二个第三个数值，改变逆序数的奇偶性 */var len = arr.length,t = arr[len-2];arr[len-2] = arr[len-3];arr[len-3] = t;}console.log(arr)return arr;},reverseCount: function(arr){ //计算逆序数var reverseAmount = 0;for (var i = 0; i < imgLens-1; i++) {var current = arr[i];for (var j = i + 1; j < imgLens-1; j++) {var compared = arr[j];if (compared < current) {reverseAmount++;}}}return reverseAmount;}}Puzzle.initImgOrder();$("#select").on('change',function(){var val = $(this).val();if(val == "3"){group = 3;$("#Img").css({"width":"320px","height":"320px"});Puzzle.initImgOrder();}else{group = 4;$("#Img").css({"width":"440px","height":"440px"});Puzzle.initImgOrder();}});$("#begin").on('click',function(){$(".start").hide();sequence.splice(imgLens-1, 1); //除开一个空白格var randArr = Puzzle.randomImgOrder(sequence);Puzzle.showRandomImg(randArr);steps = 0;});ul.on('click','li',function(){Puzzle.imgMove(this);});</script></body></html>
