js拖拽拼图

最新推荐文章于 2022-07-24 17:33:07 发布

冲天遁地

最新推荐文章于 2022-07-24 17:33:07 发布

阅读量542

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_44895516/article/details/118691805

版权

本文介绍如何使用HTML5和CSS3实现一个基础的拖拽拼图游戏，通过JavaScript控制图片块的拖放和位置交换，当所有图片正确排列时显示恭喜信息。涉及关键技术包括HTML布局、CSS样式和事件监听。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

text-align: center;

}

* {

margin: 0;

padding: 0;

}

.box {

width: 600px;

height: 600px;

margin: 0 auto;

position: relative;

}

.box div {

width: 200px;

height: 200px;

background-image: url("./img/bg.jpg");

background-size: 600px 600px;

outline: 2px solid rgb(38, 180, 190);

position: absolute;

}

button {

width: 80px;

height: 50px;

}

/* .box .hou {

background-image: none;

background-color: #000;

} */

</style>

</head>

<body>

</body>

var box = document.querySelector(".box");

var kai = document.querySelector("#kai");

var rest = document.querySelector("#rest");

var arr = [];

function bian() {

var index = 0;

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

var obj = {};

div = document.createElement("div");

div.style.left = j * 200 + "px";

div.style.top = i * 200 + "px";

div.style.backgroundPosition = `-${j*100}% -${i*100}%`;

box.appendChild(div);

obj.left = div.style.left;

obj.top = div.style.top;

obj.index = index;

div.setAttribute("draggable", "true");

index++;

arr.push(obj);

// if (i == 2 && j == 2) {

// div.classList.add("hou")

// }

}

bian()

kai.onclick = function(e) {

if (arr.length <= 0) {

return;

}

for (var i = 0; i < box.children.length; i++) {

var math = Math.floor(Math.random() * arr.length)

box.children[i].style.left = arr[math].left;

box.children[i].style.top = arr[math].top;

box.children[i].id = arr[math].index;

arr.splice(math, 1)

}

// for (let j = 0; j < box.children.length; j++) {

// box.children[j].ondragend = function(e) {

// console.log(j);

// for (let i = 0; i < box.children.length; i++) {

// box.children[i].ondragenter = function(e) {

// var left = box.children[j].style.left

// var top = box.children[j].style.top

// console.log(left, top);

// box.children[j].style.left = box.children[i].style.left

// box.children[i].style.left = left;

// box.children[j].style.top = box.children[i].style.top

// box.children[i].style.top = top;

// // hou.id = box.children[i].id;

// // box.children[i].id = index;

// }

// for (let j = 0; j < box.children.length; j++) {

// box.children[j].onmousedown = function(e) {

// for (let i = 0; i < box.children.length; i++) {

// box.children[i].onmouseup = function(e) {

// console.log(j);

// box.children[i].ondragdrop = function(e) {

// // console.log(j);

// console.log(i);

// var left = box.children[j].style.left

// var top = box.children[j].style.top

// console.log(left, top);

// box.children[j].style.left = box.children[i].style.left

// box.children[i].style.left = left;

// box.children[j].style.top = box.children[i].style.top

// box.children[i].style.top = top;

// // hou.id = box.children[i].id;

// // box.children[i].id = index;

// }

for (let j = 0; j < box.children.length; j++) {

var di = 0;

box.children[j].addEventListener("dragstart", function(event) {

di = j;

puzzleSuccess();

});

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

box.children[i].addEventListener("drop", function(event) {

var left = box.children[di].style.left;

var top = box.children[di].style.top;

// console.log(left, top, box.children[i].style.left, box.children[i].style.top);

box.children[di].style.left = box.children[i].style.left

box.children[i].style.left = left;

box.children[di].style.top = box.children[i].style.top

box.children[i].style.top = top;

var indexId = box.children[i].id;

box.children[i].id = box.children[di].id;

box.children[di].id = indexId;

// console.log(box.children[di].style.left, box.children[di].style.top, box.children[i].style.left, box.children[i].style.top);

return;

});

}

// 重置

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

location.reload(true);

});

box.addEventListener("dragover", function(e) {

e.preventDefault();

})

function puzzleSuccess() {

// div 中自定义的index和 div在box中属于第几个元素一致说明位置正确

var count = 0;

for (var z = 0; z < box.children.length; z++) {

if (box.children[z].id == z) {

count++;

// console.log(count);

}

if (count == 7) {

setTimeout(function() {

alert("恭喜你拼图成功了")

}, 1000)

return;

}

</script>

</html>

冲天遁地

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js拖拽拼图

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl...
复制链接

扫一扫