页面
<meta charset="UTF-8">
<div id="game"></div>
<h1>欢迎来玩</h1>
<script src="my.js"></script>
这样写的页面是符合html最新规范的,没错,什么head,body标签统统不要,留下唯一有用的
my.js
(() => {
const eleContainer = document.querySelector('#game');
eleContainer.style = "width:500px;height:500px;border:1px solid rgb(204,204,204);position:relative;"
const row = 3;
const col = 3;
const widthOfContainer = +getComputedStyle(eleContainer).width.slice(0, -2);
const heightOfContainer = +getComputedStyle(eleContainer).height.slice(0, -2);
/* 随机打乱一个数组 */
function shuffle(arr) {
arr.sort(() => Math.random() - 0.5);
}
/* 获取偏移位置 */
function getLeft(ele){
return getComputedStyle(ele).left.slice(0, -2);
}
function getTop(ele){
return getComputedStyle(ele).top.slice(0, -2);
}
let axiosArr = new Array(0); // 初始化位置坐标数组
let indexArr = new Array(0); // 随机下标数组
let pointArr = new Array(0); // 正确点位坐标数组
let index = 0;
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
if (!(i === row - 1 && j === col - 1)) {
axiosArr.push([i, j]);
indexArr.push(index);
index++;
}
}
}
// 生成随机打乱的位置小块
shuffle(indexArr);
index = 0;
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
if (!(i === row - 1 && j === col - 1)) {
const elePart = document.createElement('div');
elePart.style.border = '0.5px solid #fff';
elePart.style.width = (widthOfContainer - 0.5 * row * 2) / 3 + 'px';
elePart.style.height = (heightOfContainer - 0.5 * col * 2) / 3 + 'px';
elePart.style.position = 'absolute';
elePart.style.top = axiosArr[indexArr[index]][0] * (heightOfContainer / 3 - 0.5) + 'px';
elePart.style.left = axiosArr[indexArr[index]][1] * (widthOfContainer / 3 - 0.5) + 'px';
pointArr.push({
standard_x: parseFloat(j * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
standard_y: parseFloat(i * (heightOfContainer / 3 - 0.5) + '').toFixed(3),
surrounding: [
/*上*/[parseFloat(j * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat((i - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
/*下*/[parseFloat(j * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat((i + 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
/*左*/[parseFloat((j - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat(i * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
/*右*/[parseFloat((j + 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat(i * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
]
});
index++;
elePart.style.backgroundImage = 'url(img/lol.png)';
elePart.style.backgroundPositionX = -(j * (widthOfContainer / 3) + 0.5) + 'px';
elePart.style.backgroundPositionY = -(i * (heightOfContainer / 3) + 0.5) + 'px';
elePart.style.cursor = 'pointer';
eleContainer.appendChild(elePart);
} else {
pointArr.push({
standard_x: parseFloat((col - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
standard_y: parseFloat((row - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),
surrounding: [
/*上*/[parseFloat((col - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat((row - 2) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
/*下*/[parseFloat((col - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat(row * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
/*左*/[parseFloat((col - 2) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat((row - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
/*右*/[parseFloat(col * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
parseFloat((row - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
]
});
}
}
}
// 如何判断空白格子的位置,简单的方法是给每一个格子做一个标记
// 但这样难度就大大降低,玩家只需要按F12键,然后按规律修改标记即可
// 所以用每个小块的left和top值作为评判标准
function getBlankPoint() {
const allPart = document.querySelectorAll('#game div');
for (let i = 0; i < pointArr.length; i++) {
let flag = false;
for (let j = 0; j < allPart.length; j++) {
let pic_x = +getLeft(allPart[j]);
let pic_y = +getTop(allPart[j]);
if ((+pointArr[i].standard_x === pic_x && +pointArr[i].standard_y === pic_y)) {
flag = true;
break;
}
}
if (!flag) {
return pointArr[i];
}
}
}
const allPart = document.querySelectorAll('#game div');
allPart.forEach(function (item) {
item.onclick = function () {
let currentBlankPoint = getBlankPoint();
// console.log(currentBlankPoint);
let current_x = +getLeft(this);
let current_y = +getTop(this);
let current_pos = undefined;
pointArr.forEach(function (item) {
if (current_x === +item.standard_x && current_y === +item.standard_y) {
current_pos = item;
}
});
for (let j = 0; j < current_pos.surrounding.length; j++) {
if (+current_pos.surrounding[j][0] === +currentBlankPoint.standard_x && +current_pos.surrounding[j][1] === +currentBlankPoint.standard_y) {
// console.log(this)
this.style.left = currentBlankPoint.standard_x + 'px';
this.style.top = currentBlankPoint.standard_y + 'px';
}
}
// 判断是否成功
let flag = true;
for (let i = 0; i < allPart.length; i++) {
if (+getLeft(allPart[i]) !== +pointArr[i].standard_x || +getTop(allPart[i]) !== +pointArr[i].standard_y) {
flag = false
break;
}
}
if (flag) {
document.querySelector('h1').innerHTML = '恭喜挑战成功'
}
}
});
})();
当然,前提是你最好自己准备一张500x500绝对尺寸的图片放在img文件夹下