【实例简介】
【实例截图】
【核心代码】
拼图
*{
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(//02/07/fd/0/8/fd0879b92c88d56b149454bb3f77086c.png);
background-size: 300px 300px;
background-repeat: no-repeat;
position: relative;
}
.start{
text-align: center;
}
3*3
4*4
开始
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);
});