概要
用js实现简单九宫格拼图
代码如下
结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<style></style>
<body>
<div class="map">
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
</div>
//深拷贝
<script src="./js/deepCopy.js"></script>
<script src="./js/index.js"></script>
<script></script>
</body>
</html>
css代码,图片路径记得改
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.map {
width: 600px;
height: 600px;
background-color: #ccc;
}
.map ul {
width: 600px;
height: 600px;
/* 相对定位 */
position: relative;
}
/*
3行 每一行多高? 200
3列 每一列多宽? 200
*/
.map ul li {
//图片路径
background-image: url(../img/600_600.jpeg);
background-repeat: no-repeat;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.map ul li.empty::after {
content: "";
position: absolute;
top: 0;
top: 0;
z-index: 10;
width: 200px;
height: 200px;
background-color: deepskyblue;
}
/* 设置点击的li标签半透明 */
.map ul li.active {
opacity: .5;
}
/* 设置提示 */
.map ul li span {
width: 200px;
height: 100px;
display: block;
text-align: center;
line-height: 200px;
font-size: 70px;
color: #fff;
}
js代码
深拷贝代码
// 深拷贝的思路
function deepCopy(data) {
// 创建新地址
var newData = Array.isArray(data) === true ? [] : {};
// 循环data
for (var key in data) {
// 判断拷贝的数据是否为引用类型
if (typeof data[key] === "object") {
//执行递归,直到复制的数据为基本类型为止
newData[key] = deepCopy(data[key]);
}
else {
//是基本数据类型,就直接复制
newData[key] = data[key]
}
}
//返回新数据
return newData;
}
var map = document.querySelector('.map');
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
var data = [];
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var point = {};
point.x = j * 200;
point.y = i * 200;
data.push(point)
}
}
for (var index = 0; index < lis.length; index++) {
lis[index].style["left"] = data[index].x + 'px';
lis[index].style["top"] = data[index].y + 'px';
lis[index].style["backgroundPosition"] = `-${data[index].x}px -${data[index].y}px`;
}
var arr = deepCopy(data);
arr.sort(function () {
return Math.random() - .5;
})
lis[data.length - 1].className = `empty`;
for (var index = 0; index < lis.length; index++) {
lis[index].style["left"] = arr[index].x + 'px';
lis[index].style["top"] = arr[index].y + 'px';
}
var arr2 = [];
for (var z = 0; z < lis.length; z++) {
for (var c = 0; c < lis.length; c++) {
lis[c].classList.remove('active')
}
(function (z) {
lis[z].onclick = function () {
if (arr2.length == 0 && lis[z].className != 'empty') {
var p1 = {}
p1.ele = lis[z];
p1.x = parseInt(p1.ele.style['left'])
p1.y = parseInt(p1.ele.style['top'])
console.log('p1=>', p1);
// p1.ele = lis[z];
arr2.push(p1);
lis[z].className = `active`;
// console.log('p1=>', p1);
} else if (arr2.length == 1 && lis[z].className == 'empty') {
var empty = document.querySelector('.empty');
var p2 = {};
p2.x = parseInt(empty.style['left'])
p2.y = parseInt(empty.style['top'])
arr2.push(p2);
// var p1 = arr2[0];
// console.log(arr2);
// console.log('p1_2=>',p1);
console.log('p2=>', p2);
if (arr2[0].x == p2.x && (arr2[0].y - 200) == p2.y) {
arr2[0].ele.style['left'] = p2.x + 'px';
arr2[0].ele.style['top'] = p2.y + 'px';
empty.style['left'] = arr2[0].x + 'px';
empty.style['top'] = arr2[0].y + 'px';
}
if (arr2[0].x == p2.x && (arr2[0].y + 200) == p2.y) {
arr2[0].ele.style['left'] = p2.x + 'px';
arr2[0].ele.style['top'] = p2.y + 'px';
empty.style['left'] = arr2[0].x + 'px';
empty.style['top'] = arr2[0].y + 'px';
}
if ((arr2[0].x - 200) == p2.x && arr2[0].y == p2.y) {
arr2[0].ele.style['left'] = p2.x + 'px';
arr2[0].ele.style['top'] = p2.y + 'px';
empty.style['left'] = arr2[0].x + 'px';
empty.style['top'] = arr2[0].y + 'px';
}
if ((arr2[0].x + 200) == p2.x && arr2[0].y == p2.y) {
arr2[0].ele.style['left'] = p2.x + 'px';
arr2[0].ele.style['top'] = p2.y + 'px';
empty.style['left'] = arr2[0].x + 'px';
empty.style['top'] = arr2[0].y + 'px';
}
arr2 = [];
for (var d = 0; d < lis.length; d++) {
lis[d].classList.remove('active')
}
console.log(arr2);
} else {
arr2 = [];
for (var e = 0; e < lis.length; e++) {
lis[e].classList.remove('active')
}
}
}
})(z)
}
小结
基础功能都实现了,但是通关条件没有做