mysql拼图游戏代码,今天中午空闲之余写了个拖动拼图!感觉还不错!(拼图游戏)

开始游戏 重新游戏

// 被拖拽的元素

let tds = document.querySelectorAll('td');

// 被拖拽的元素所放的容器

let tr1 = document.querySelector('#tr1');

let tr2 = document.querySelector('#tr2');

let tr3 = document.querySelector('#tr3');

// 开始游戏和重新游戏按钮

let btnStart = document.querySelector('#btnStart');

let btnReset = document.querySelector('#btnReset');

// 拖拽元素放到容器时，让容器能接收

tr1.ondragover = tr2.ondragover = tr3.ondragover = function (ev) {

ev.preventDefault();

}

tr1.ondrop = tr2.ondrop = tr3.ondrop = function (ev) {

ev.preventDefault();

// 获取拖动元素的类名，目的通过类名得到拖动的元素。

let className = ev.dataTransfer.getData("class");

// 获取到拖动的元素

let dragImg = document.getElementsByClassName(className)[0];

// 获取到拖动元素下一个元素。 作一个参照物。

let dragImgNextElement = dragImg.nextElementSibling;

// 获取到拖动元素所在的父元素。 tr

let dragImgParent = dragImg.parentElement;

// 获取到目标元素的父元素 tr

let targetParent = ev.target.parentElement;

// dragImgParent.id === targetParent.id 判断是否是同一行元素之间进行拖动

// dragImgNextElement判断拖动的是否是最后一列的图片

// dragImgNextElement.className === ev.target.className判断拖动元素和目标元素是否是同一行紧临的两个元素。

if (dragImgParent.id === targetParent.id && dragImgNextElement && dragImgNextElement.className === ev.target.className) {

// 把目标元素插入到拖动元素之前。

this.insertBefore(ev.target, dragImg);

} else { // 拖动元素是第三列是没有下一个元素

// 把拖动元素插入到目标元素之前。

this.insertBefore(dragImg, ev.target);

}

// 把目标元素插入到拖动元素的下一个元素之前。

dragImgParent.insertBefore(ev.target, dragImgNextElement);

// 判断是否成功。

if (success()) {

alert("你完成了游戏");

}

}

// 定义一个数组，用来存储td所需要的类名。这些类名用来控制背景图。

let arrImg = ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8'];

function randomImg() {

// 把arrImg打乱。

arrImg.sort(function () {

return Math.random() > 0.5 ? -1 : 1;

})

for (let i = 0; i < tds.length; i++) {

const td = tds[i];

// 先把td原来的类名去除

td.removeAttribute('class');

// td.className = "";

// td.classList.remove(`img${i}`)

// 再添加随机的类名，这样就可以把“图片”打乱。

td.setAttribute('class', arrImg[i]);

// 给td绑定拖动事件。

td.ondragstart = function (ev) {

// 把拖拽之前的类名先保存，目的后面使用。

ev.dataTransfer.setData('class', ev.target.className)

}

}

}

// 第一次渲染时，先执行一次，随机给td添加相应的类名，如:img0...img8

randomImg();

btnStart.addEventListener('click', function () {

randomImg();

})

btnReset.addEventListener('click', function () {

randomImg();

})

function success() {

let result = false;

// 原来的类名顺序

let oldArr = ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8'];

// 取出所有的td的class属性值，组成一个新数组。

let tds = document.querySelectorAll('td');

let newArr = Array.from(tds).map(function (td) {

return td.className;

})

// 判断两个数组值是否相等。如果值相等表示拼图成功。

result = equal(newArr, oldArr);

return result;

}

function equal(arr1, arr2) {

for (let i = 0; i < arr1.length; i++) {

if (arr1[i] !== arr2[i]) {

return false;

}

}

return true;

}

//CSS样式!(不要把事情想的很复杂 其实很简单!) *{ margin: 0; padding: 0; box-sizing: border-box; }

.box{

width: 550px;

margin: 0 auto;

}

.box table{

width: 540px;

margin: 0 auto;

}

.box table td{

width: 168px;

height: 168px;

background-image: url(…/img/all.jpg);

background-repeat: no-repeat;

}

.box table td.img0{

background-position: 0 0;

}

.box table td.img1{

background-position: -168px 0;

}

.box table td.img2{

background-position: -336px 0;

}

.box table td.img3{

background-position: 0 -168px;

}

.box table td.img4{

background-position: -168px -168px;

}

.box table td.img5{

background-position: -336px -168px;

}

.box table td.img6{

background-position: 0 -336px;

}

.box table td.img7{

background-position: -168px -336px;

}

.box table td.img8{

background-position: -336px -336px;

}

原文链接:https://blog.csdn.net/weixin_55973231/article/details/114678592