基本信息
源码名称：jquery 九宫格拼图游戏源码
源码大小：8.03KB
文件格式：.html
开发语言：js
更新时间：2019-02-07
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!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(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;
}
</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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></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>