<!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>Document</title>
<style>
body {
text-align: center;
}
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 600px;
margin: 0 auto;
position: relative;
}
.box div {
width: 200px;
height: 200px;
background-image: url("./img/bg.jpg");
background-size: 600px 600px;
outline: 2px solid rgb(38, 180, 190);
position: absolute;
}
button {
width: 80px;
height: 50px;
}
/* .box .hou {
background-image: none;
background-color: #000;
} */
</style>
</head>
<body>
<div class="box clearfix"></div>
<button id="kai">开始</button>
<button id="rest">重置</button>
</body>
<script>
var box = document.querySelector(".box");
var kai = document.querySelector("#kai");
var rest = document.querySelector("#rest");
var arr = [];
function bian() {
var index = 0;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var obj = {};
div = document.createElement("div");
div.style.left = j * 200 + "px";
div.style.top = i * 200 + "px";
div.style.backgroundPosition = `-${j*100}% -${i*100}%`;
box.appendChild(div);
obj.left = div.style.left;
obj.top = div.style.top;
obj.index = index;
div.setAttribute("draggable", "true");
index++;
arr.push(obj);
// if (i == 2 && j == 2) {
// div.classList.add("hou")
// }
}
}
}
bian()
kai.onclick = function(e) {
if (arr.length <= 0) {
return;
}
for (var i = 0; i < box.children.length; i++) {
var math = Math.floor(Math.random() * arr.length)
box.children[i].style.left = arr[math].left;
box.children[i].style.top = arr[math].top;
box.children[i].id = arr[math].index;
arr.splice(math, 1)
}
}
// for (let j = 0; j < box.children.length; j++) {
// box.children[j].ondragend = function(e) {
// console.log(j);
// for (let i = 0; i < box.children.length; i++) {
// box.children[i].ondragenter = function(e) {
// var left = box.children[j].style.left
// var top = box.children[j].style.top
// console.log(left, top);
// box.children[j].style.left = box.children[i].style.left
// box.children[i].style.left = left;
// box.children[j].style.top = box.children[i].style.top
// box.children[i].style.top = top;
// // hou.id = box.children[i].id;
// // box.children[i].id = index;
// }
// }
// }
// }
// for (let j = 0; j < box.children.length; j++) {
// box.children[j].onmousedown = function(e) {
// for (let i = 0; i < box.children.length; i++) {
// box.children[i].onmouseup = function(e) {
// console.log(j);
// box.children[i].ondragdrop = function(e) {
// // console.log(j);
// console.log(i);
// var left = box.children[j].style.left
// var top = box.children[j].style.top
// console.log(left, top);
// box.children[j].style.left = box.children[i].style.left
// box.children[i].style.left = left;
// box.children[j].style.top = box.children[i].style.top
// box.children[i].style.top = top;
// // hou.id = box.children[i].id;
// // box.children[i].id = index;
// }
// }
// }
// }
// }
for (let j = 0; j < box.children.length; j++) {
var di = 0;
box.children[j].addEventListener("dragstart", function(event) {
di = j;
puzzleSuccess();
});
for (let i = 0; i < box.children.length; i++) {
box.children[i].addEventListener("drop", function(event) {
var left = box.children[di].style.left;
var top = box.children[di].style.top;
// console.log(left, top, box.children[i].style.left, box.children[i].style.top);
box.children[di].style.left = box.children[i].style.left
box.children[i].style.left = left;
box.children[di].style.top = box.children[i].style.top
box.children[i].style.top = top;
var indexId = box.children[i].id;
box.children[i].id = box.children[di].id;
box.children[di].id = indexId;
// console.log(box.children[di].style.left, box.children[di].style.top, box.children[i].style.left, box.children[i].style.top);
return;
});
}
}
// 重置
rest.addEventListener('click', function() {
location.reload(true);
});
box.addEventListener("dragover", function(e) {
e.preventDefault();
})
function puzzleSuccess() {
// div 中自定义的index和 div在box中属于第几个元素 一致说明位置正确
var count = 0;
for (var z = 0; z < box.children.length; z++) {
if (box.children[z].id == z) {
count++;
// console.log(count);
}
}
if (count == 7) {
setTimeout(function() {
alert("恭喜你拼图成功了")
}, 1000)
return;
}
}
</script>
</html>