<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拼图</title>
</head>
<style type="text/css">
table {
margin: 100px auto;
border: 2px solid pink;
}
td {
border: 2px solid palegreen;
box-sizing: border-box;
background: url(./img/6.png) no-repeat;
}
</style>
<body>
<button>开始</button>
<button>下一关</button>
<p class="p1">时间:<span>1000</span>秒</p>
<p class="p2">步数:<span>0</span>步</p>
<div class="p3" style="text-align: center;"><span></span></div>
<table></table>
</body>
<script type="text/javascript">
let selectIndex = null;
let td = null;
let sj = document.querySelector(".p1 span");
let bs = document.querySelector(".p2 span");
let rs = document.querySelector(".p3 span");
let sjj = 1000;
let bss = 0;
let jsq;
let btn = document.querySelectorAll("button");
btn[1].disabled = "disabled";
btn[0].onclick = kai;
btn[1].onclick = xia;
let arr = [];
let xx = 3;
let yy = 600;
create();
function kai() {
console.log(12345);
jsq = setInterval(function() {
sjj--;
sj.innerText = sjj;
if (sjj == 0) {
console.log("失败")
}
}, 1000)
btn[0].disabled = "disabled";
randomTable();
selectTb();
}
function xia() {
rs.innerHTML = ""
btn[0].disabled = "";
btn[1].disabled = "disabled";
xx++;
if (xx == 7) {
alert("🐂,没有下一关了")
btn[0].disabled = "disabled";
// window.location.reload();//页面重新加载
}
create();
}
// 创建表格内容
function create() {
arr = [];
let tab = document.querySelector("table");
let str = "";
for (let a = 1; a <= xx; a++) {
str += "<tr>";
for (let b = 1; b <= xx; b++) {
str += `<td style="background-position: ${-(b-1)*(yy/xx)}px
${-(a-1)*(yy/xx)}px;"></td>`;
arr[arr.length] = `${-(b-1)*(yy/xx)}px ${-(a-1)*(yy/xx)}px`;
}
str += "</tr>";
}
tab.innerHTML = str;
tab.style.width = "600px";
tab.style.height = "600px";
let td = document.querySelectorAll("td");
td.forEach(i => {
i.style.backgroundSize = "600px 600px";
})
}
// 打乱表格内容
function randomTable() {
let td = document.querySelectorAll("td");
td.forEach(i => {
let sj1 = parseInt(Math.random() * td.length);
let sj2 = parseInt(Math.random() * td.length);
let huan = td[sj1].style.backgroundPosition;
td[sj1].style.backgroundPosition = td[sj2].style.backgroundPosition;
td[sj2].style.backgroundPosition = huan;
})
}
// 点击选中需要移动表格内容
function selectTb() {
td = document.querySelectorAll("td");
td.forEach((item, index) => {
item.addEventListener("click", function() {
selectIndex = index;
td.forEach(i => {
i.style.border = "2px solid pink";
})
item.style.border = "2px solid blue";
})
})
}
document.onkeydown = function(e) {
console.log(e);
if (e.keyCode == 38) {
yidong(td[selectIndex], td[selectIndex - xx]);
bss++;
bs.innerText = bss;
selectIndex -=xx;
jiance();
}
if (e.keyCode == 40) {
yidong(td[selectIndex], td[selectIndex + xx]);
bss++;
bs.innerText = bss;
selectIndex +=xx;
jiance();
}
if (e.keyCode == 37) {
yidong(td[selectIndex], td[selectIndex - 1]);
bss++;
bs.innerText = bss;
selectIndex -=1;
jiance();
}
if (e.keyCode == 39) {
yidong(td[selectIndex], td[selectIndex + 1]);
bss++;
bs.innerText = bss;
selectIndex +=1;
jiance();
}
function jiance() {
let newarr = [];
td.forEach(i => {
newarr[newarr.length] = i.style.backgroundPosition;
})
let num = 0;
td.forEach((i, xiabiao) => {
i.style.border = "2px solid pink";
if(xiabiao==selectIndex)
i.style.border = "2px solid blue";
if (arr[xiabiao] == newarr[xiabiao]) {
num++;
if (num == td.length) {
rs.innerHTML = "目前关卡已通过！"
btn[1].disabled = "";
sjj = 1000;
sj.innerText = sjj;
bss = 0;
bs.innerText = bss;
clearInterval(jsq);
}
}
})
}
};
function yidong(aa, bb) {
let weizhi = aa.style.backgroundPosition;
aa.style.backgroundPosition = bb.style.backgroundPosition;
bb.style.backgroundPosition = weizhi;
}
</script>
</html>
pingtu.zip （2个子文件） 
pingtu img 
6.png 1.14MB
index.html 4KB资源评论
疯兔叽丶
- 粉丝: 0
- 资源: 3
最新资源
- 《电路》大作业：基于matlab实现的节点电压法计算.zip
- 基于SpringBoot和Vue构建的文件分享系统，包括文件的上传与下载，文件的权限管理，远程文件管理等.zip
- 基于springboot+thymeleaf构建的保险出单系统(含后台管理系统).zip
- 毕业设计：基于Springboot+vue的校园社团管理系统的设计与实现.zip
- 小波包分解重构计算信号各频段能量
- Python QR Code 图像生成器.zip
- 003 硝烟的泯灭.mp3
- Html初学练习代码.zip学习资料程序资源
- Python for .NET 是一个软件包，它为 Python 程序员提供了与 .NET 公共语言运行时 (CLR) 几乎无缝的集成，并为 .NET 开发人员提供了强大的应用程序脚本工具 .zip
- 基于QT的DSA课程设计低风险出行系统，记忆化搜索算法为用户制定最低风险或者是限时最低风险策略的出行方案.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
