实例介绍
【实例简介】
【实例截图】
【核心代码】
<!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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论