<!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,
ul {
margin: 0;
padding: 0;
}
#ul {
margin: 20px auto;
width: 306px;
height: 304px;
background-color: blanchedalmond;
border: 1px solid black;
}
#ul li {
list-style: none;
width: 100px;
height: 100px;
background-color: rgb(64, 226, 226);
margin: 0 2px 2px 0px;
float: left;
background-image: url("../img/2.png");
transition: 300ms;
/* 4阶 之后有数字提示 */
text-align: center;
line-height: 100px;
font-size: 20px;
color: aliceblue;
/* text-shadow Xoffset Yoffset 模糊半径 颜色 */
/* text-shadow: 5px 5px 30px rgb(40, 3, 3); */
}
#ul li.active {
background-color: bisque;
background-image: url();
}
</style>
<script>
// 文档内容加载完成后调用
window.onload = function () {
let p = new Pin()
// 构造函数，并初始化 3阶段
p.init("ul", 3)
// p.dw()
// p.click()
// this.keyMove()
}
function Pin() {
this.oUl = null
// 所有的li
this.ali = null
this.len = 0
// 空缺的一块
this.oli = null
//
this.num = 0
// this.zIndex = 2
// 原始li的位置 索引信息
this.arr4 = []
}
// 初始化拼图 id num阶层
Pin.prototype.init = function (id, num) {
// 选中ul
this.oUl = document.querySelector(id)
// 填充li
this.oUl.innerHTML = this.set(num)
// 所有li
this.ali = this.oUl.querySelectorAll('li')
// li的数量
this.len = this.ali.length
// 空缺的一块
this.oli = this.ali[this.len - 1]
// console.log(this.oli)
this.oli.className = "active"
this.num = num
// 步数
this.steps = 0
//
document.getElementById('num').innerText = `第${(this.num-2).toString()}关`
this.btn1 = document.getElementById('btn1')
this.btn2 = document.getElementById('btn2')
this.dw()
this.keyMove()
this.click()
this.btn()
}
// 定位元素
Pin.prototype.dw = function () {
// 存放各个li 位置信息的数组 以及最初的索引值
let arr = []
// 原始li的位置信息
let arrA = []
for (let i = 0; i < this.len; i++) {
// offset xx 偏移量
arr.push([this.ali[i].offsetLeft, this.ali[i].offsetTop, i])
arrA.push([this.ali[i].offsetLeft, this.ali[i].offsetTop, i])
}
this.arr4 = arrA
// 随机
let arr2 = []
for (let i = 0; i < this.len - 1; i++) {
arr2.push(arr[i])
}
// 默认sort排序升序 return结果
arr2.sort(function (a, b) {
// Math.random()随机生成0.0-1.0的随机数 随机判断是否交换顺序
return Math.random() - 0.5
})
arr2.push(arr[this.len - 1])
// 逆序数 防止出现死局 同数字华容道死局
let arr3 = []
let a = 0
for (let i = 0; i < this.len; i++) {
arr3.push(arr2[i][2])
}
for (let i = 0; i < this.len; i++) {
let b = arr3[i]
for (let j = i; j < this.len; j++) {
let c = arr3[j]
if (b > c) {
a += 1
}
}
}
// a奇数偶数 奇数死局
if (a % 2 == 0) {
console.log("开始")
} else {
console.log('嗨嗨嗨')
this.dw()
return false
}
arr = arr2
// 定位 定位每个li的绝对位置
for (let i = 0; i < this.len; i++) {
if (this.num > 4) {
this.ali[i].innerHTML = i + 1
}
// 给li元素添加绝对定位
this.ali[i].style.position = "absolute"
this.ali[i].style.left = arr[i][0] + "px"
this.ali[i].style.top = arr[i][1] + "px"
// li 的索引
this.ali[i].index = arr[i][2]
// 缩放图片
this.ali[i].style.backgroundSize = this.num * 100 + "px"
this.ali[i].style.backgroundPosition = (i % this.num) * -100 + "px " + ((i - (i % this.num)) / this.num) * -100 + "px"
}
}
// 生成 num阶 所需的li
Pin.prototype.set = function (num) {
// ul框架的初始宽度高度
this.oUl.style.width = num * 100 + num * 2 + "px"
this.oUl.style.height = num * 100 + num * 2 + "px"
let n = num * num;
let str = ""
for (let i = 0; i < n; i++) {
str += "<li></li>"
}
return str;
}
// 点击事件
Pin.prototype.click = function () {
let This = this
for (let i = 0; i < this.len; i++) {
this.ali[i].onclick = function () {
// console.log(this)
console.log(this.index)
// this.style.zIndex = This.zIndex++
This.move(this)
}
}
}
// 移动
Pin.prototype.move = function (li) {
if (this.pdMove(li)) {
li.style.left = this.arr4[this.oli.index][0] + "px"
li.style.top = this.arr4[this.oli.index][1] + "px"
this.oli.style.left = this.arr4[li.index][0] + "px"
this.oli.style.top = this.arr4[li.index][1] + "px";
[this.oli.index, li.index] = [li.index, this.oli.index]
}
this.steps += 1
this.Success()
}
// 判断是否可以移动
Pin.prototype.pdMove = function (li) {
let index = li.index
let num = this.oli.index
console.log(index)
console.log(num)
// 判断空白块位置 以及是否可以移动
if (num % this.num == 0) { //三阶左侧
if (index - 1 == num || index + this.num == num || index - this.num == num) {
return true
}
} else if (num % this.num == this.num - 1) { //三阶右侧
if (index + this.num == num || index + 1 == num || index - this.num == num) {
return true
}
} else {
if (index + this.num == num || index + 1 == num || index - 1 == num || index - this.num == num) {
return true
}
}
return false
}
// 获取键盘控制移动的li块
Pin.prototype.MoveKeyLi = function (index) {
// console.log(index)
for (let i = 0; i < this.len; i++) {
if (this.ali[i].index == index) {
// console.log("*****",i)
// console.log("#####",this.ali[i])
return this.ali[i]
}
}
}
// 键盘控制移动
Pin.prototype.keyMove = function () {
let This = this //Pin构造函数
// document.getElementById('ul').addEventListener('keydown',function(ev){
document.addEventListener('keydown', function (e) {
e = e || event
// ArrowUp
// ArrowDown
// ArrowLeft
// ArrowRight
if (e.key == 'ArrowUp') {
console.log('上')
if (This.oli.index - This.num < 0) {
This.move(This.MoveKeyLi(This.oli.index))
} else {
This.move(This.MoveKeyLi(This.oli.index - This.num))
}
} else if (e.key == 'ArrowDown') {
console.log('下')
if (This.oli.index + This.num > This.len) {
This.move(This.MoveKeyLi(This.oli.index))
} else {
This.move(This.MoveKeyLi(This.oli.index + This.num))
}
} else if (e.key == 'ArrowLeft') {
// console.log('左')
if (This.oli.index - 1 < 0) {
This.move(This.MoveKeyLi(This.oli.index))
} else {
This.move(This.MoveKeyLi(This.oli.index - 1))
}
} else if (e.key == 'ArrowRight') {
console.log('右')
if (This.oli.index + 1 > This.len) {
This.move(This.MoveKeyLi(This.oli.index))
} else {
This.move(This.MoveKeyLi(This.oli.index + 1))
}
}
})
// document.onkeydown = function(e){
// e= e||event
// console.log(e.key)
// if(e.key == 'Up'){
// console.log("上")
// }else if(e.key == 'Down'){
// console.log('下')
// }else if(e.key == 'Left'){
// console.log('左')
// }else if(e.key == 'Right'){
// console.log('右')
// }
// }
}
// 判断成功
Pin.prototype.Success = function () {
let This = this
let arr1 = []
let arr2 = []
let n = 0
for (let i = 0; i < this.len; i++) {
arr1.push(this.ali[i].index)
arr2.push(this.arr4[i][2])
}
console.log(arr1)
console.log(arr2)
for (let i = 0; i < this.len; i++) {
if (arr1[i] == arr2[i]) {
n = n + 1
}
}
console.log(n, this.len)
console.log(this.num)
if (n == this.len) {
this.num++
alert(`你用了${this.steps}步成功过关`)
console.log(This.num, this.num)
this.init('ul', this.num)
console.log(this.num)
}
}
Pin.prototype.btn = function () {
let that = this
this.btn1.onclick = function () {
// console.log(123)
that.init('ul', that.num)
}
this.btn2.onclick = function () {
// console.log(123)
that.init('ul', 3)
}
}
</script>
</head>
<body>
<p id="num" style="font-size:20px ; width: 80px;background-color: rgb(152, 197, 251);margin: 0; margin-left: 40%;"></p>
<ul id="ul">
</ul>
<div style="margin-left:50% ;">
<button id="btn1">重新开始</button>
<button id="btn2">重头开始</button>
<div style="width: 200px;height: 200px;background-image:url(../img/2.png) ; background-size: 200px;"></div>
</div>
</body>
</html>
08-16
3103
3103
11-15
902
902
09-15
1万+
1万+
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
