九宫格拼图
作者：互联网
写这个用到了html2canvas.js这个插件，很简单大家可以到官网看一下，秒懂的呢种：http://html2canvas.hertzen.com/
就不写demo介绍了 ，代码中注释还是非常详细的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my拼图</title>
<style>
* {
box-sizing: border-box;
}
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(./bg.jpg);
background-size: 100% auto;
overflow: hidden;
}
.btn {
margin-top: 1rem;
text-align: center;
border: 1px solid #fff;
font-size: 0.5rem;
}
.puzzleBox {
position: absolute;
top: 4.5rem;
left: 0;
right: 0;
width: 7.2rem;
height: 7.2rem;
margin: auto;
background-image: url(./bg.jpg);
background-size: 7.5rem auto;
background-position: center -4.5rem;
}
.puzzleBox .item {
position: absolute;
top: 0;
left: 0;
width: 2.4rem;
height: 2.4rem;
line-height: 2.1rem;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: aqua;
z-index: 10;
background-size: 7.2rem 7.2rem;
}
.puzzleBox .item:nth-child(1){background-position: 240px 240px;}
.puzzleBox .item:nth-child(2){background-position: 0px 0px;}
.puzzleBox .item:nth-child(3){background-position: 240px 0px;}
.puzzleBox .item:nth-child(4){background-position: 120px 0px;}
.puzzleBox .item:nth-child(5){background-position: 0px 240px;}
.puzzleBox .item:nth-child(6){background-position: 240px 240px;}
.puzzleBox .item:nth-child(7){background-position: 120px 240px;}
.puzzleBox .item:nth-child(8){background-position: 0px 120px;}
.puzzleBox .item:nth-child(9){background-position: 240px 120px;}
.puzzleBox .remove {
background-color: #000;
display: none;
}
</style>
</head>
<body base-width='750' base-height='1334'>
<div id="container">
<div class="btn">生成拼图</div>
<div class="puzzleBox">
<div class="item remove"></div>
</div>
</div>
<aside class="loadBox">
<span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
</aside>
<script src="js/jquery.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/rem.js"></script>
<script>
var puzzleBox = $('.puzzleBox');
var base64='';
// 九个方块正确位置数组
var leftTopArr = [
{"left":'240px',"top":'240px'},
{"left":'0px',"top":'0px'},
{"left":'120px',"top":'0px'},
{"left":'240px',"top":'0px'},
{"left":'0px',"top":'120px'},
{"left":'120px',"top":'120px'},
{"left":'240px',"top":'120px'},
{"left":'0px',"top":'240px'},
{"left":'120px',"top":'240px'}
];
init();
function init() {
$('.btn').off().on('click', html2Canvas);
}
// 使用html2canvas插件生成截图
function html2Canvas() {
if (!base64) {
html2canvas(document.querySelector(".puzzleBox"), { logging: false }).then(function (canvas) {
base64 = canvas.toDataURL("image/jpeg", 1);
$('.remove').show();
CreateClip();
setTimeout(()=>{
leftTopArrMath();//打乱数组
},10)
});
}
}
// 循环生成九宫格方块
function CreateClip(){
for(var i=0;i<leftTopArr.length-1;i++){
var itemi = i+1;
var itemHtml = '<div class="item" >'+itemi+'</div>';
puzzleBox.append(itemHtml);
$('.item').eq(itemi).css({"background-image":'url('+base64+')'})
}
// console.log(base64)
$('.puzzleBox .item').on('click',itemMove);
}
// 移动黑方块
function itemMove(){
// 点击方块的位置
var thisLeft = $(this).offset().left;
var thisTop = $(this).offset().top;
// 黑色方块的位置
var thisLeftBlack = $('.remove').offset().left;
var thisTopBlack = $('.remove').offset().top;
// 点击方块与黑色方块的差值用于下边判断
var topdiffer = thisTop - thisTopBlack;
var leftdiffer = thisLeft - thisLeftBlack;
// 判断是否挨着黑色方块
if((thisLeft == thisLeftBlack && (topdiffer== 120 || topdiffer== -120)) || (thisTop == thisTopBlack && (leftdiffer== 120 || leftdiffer==-120))){
var oldLeft = $(this).css('left');
var oldTop = $(this).css('top');
var newLeft = $('.remove').css('left');
var newTop = $('.remove').css('top');
$(this).css({'left':newLeft,'top':newTop});
$('.remove').css({'left':oldLeft,'top':oldTop});
setTimeout(()=>{
success();
},1)
}
}
// 拼图成功
function success(){
var alertArr = [];
var alertNum = 0;
for(var i=0;i<leftTopArr.length;i++){
// 通过循环获取到每个方块的left与top值 并将其添加到数组中
// 通过判断拼好的的数组值与正在拼的数组值相比较，判断是否拼成功
var itemLeft = puzzleBox.children('.item').eq(i).css('left');
var itemTop = puzzleBox.children('.item').eq(i).css('top');
alertArr.push({'left':itemLeft,'top':itemTop});
if(alertArr[i].left == leftTopArr[i].left && alertArr[i].top == leftTopArr[i].top){
alertNum++;
if(alertNum == 9){//当数组中九个方块位置全对 的时候 提示拼图成功
alert("拼图成功");
}
}
}
}
// 打乱数组
function leftTopArrMath(){
const leftTopArrMath = leftTopArr.concat([]);//注意，这里用了深拷贝，如果浅拷贝再打乱数组的话，原来数组也会发生改变
for (var i = leftTopArrMath.length - 1; i > 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = leftTopArrMath[j];
leftTopArrMath[j] = leftTopArrMath[i];
leftTopArrMath[i] = tmp;
}
// 并把打乱的数组值传给方块
for(var i=0;i<leftTopArrMath.length;i++){
$('.item').eq(i).css({'left':leftTopArrMath[i].left,'top':leftTopArrMath[i].top});
}
}
</script>
</body>
</html>
标签：240px,puzzleBox,拼图,top,九宫格,background,var,left 来源： https://www.cnblogs.com/think-ing/p/15235157.html