重置
当前步数：0步
↑
↓
←
→
<script type="text/javascript">
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var oPuzzle = document.querySelector('.puzzle');
var oBtns = document.querySelector('.btns');
var oReset = document.querySelector('#reset');
var oNum = document.querySelector('#num');
var currentArr = arr.sort(() => Math.random() - 0.5);
var num = 0;
render(currentArr)
//创建九宫格
function render(currentArr) {
oPuzzle.innerHTML = "";
currentArr.forEach(item => {
var oDiv = document.createElement('div');
item = item ? item : ""
oDiv.innerHTML = item
oPuzzle.appendChild(oDiv)
})
if (currentArr.join('') === '123456780') {
alert("好厉害，拼成功了")
}
}
//重置：
oReset.onclick = function () {
currentArr = arr.sort(() => Math.random() - 0.5);
render(currentArr)
}
// 控制键
oBtns.addEventListener('click', (e) => {
var type = e.target.getAttribute('data-type');
var zero = currentArr.indexOf(0);
var target;
if (type) {
if (type === "1") {
if (zero > 5) {
return false
}
target = zero + 3
}
if (type === "2") {
if (zero < 3) {
return false;
}
target = zero - 3
}
if (type === "3") {
if ([2, 5, 8].includes(zero)) {
return false
}
target = zero + 1
}
if (type === "4") {
if ([0, 3, 6].includes(zero)) {
return false
}
target = zero - 1
}
num++;
oNum.innerHTML = num;
var temp = currentArr[target]
currentArr[target] = 0;
currentArr[zero] = temp;
render(currentArr)
}
}, false)
</script>