标签：240px puzzleBox 拼图 top 九宫格 background var left
写这个用到了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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。