【实例简介】

【实例截图】

【核心代码】

拼图

*{

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(https://img01.haolizi.net/2019/02/07/fd/0/8/fd0879b92c88d56b149454bb3f77086c.png);

background-size: 300px 300px;

background-repeat: no-repeat;

position: relative;

}

.start{

text-align: center;

}

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 = '

';

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 = '

';

ul.append(li);

}

ul.append('

'); //加上空白格

$("#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);

});