js實現拖拽拼圖遊戲
阿新 • • 發佈:2021-09-23
本文例項為大家分享了實現拖拽拼圖遊戲的具體程式碼,供大家參考,具體內容如下
該遊戲主要使用了一些拖拽事件,以及對資料傳遞的應用,直接上程式碼,感興趣的可以參考
html:程式碼
<div class="box"> <div id="d1" class=www.cppcns.com"d1"></div> <div id="d2" class="d1"></div> <div id="d3" class="d1"></div> <div id="d4" class="d1"></div> <div id="d5" class="d1"></div> <div id="d6" class="d1"></div> <div id="d7" class="d1"></div> <div id="d8" class="d1"></div> <div id="d9" class="d1"></div> </div> <div id="but"> <button id="but1">一鍵完成</button> <button id="but2">開始遊戲</button> <button id="but3">看一眼原圖</button> <div> <img id="yan" src="../../圖片/2222.jpg" alt="js實現拖拽拼圖遊戲"> </div> </div>
程式碼:
* { margin: 0; padding: 0; } .box { width: 312px; height: 312px; border: 3px solid #000; margin: 50px auto 5px; font-size: 0; } .box div { width: 100px; height: 100px; http://www.cppcns.comdisplay: inline-block; border: 2px solid #000; } .d1 { background-image: url(../../圖片/2222.jpg); background-size: 300px 300px; background-position: 0px 0px; } #but { border: 1px solid #000 transparent; width: 300px; height: 30px; margin: 0 auto; } #but img {width: 100px; height: 100px; float: right; display: none; } button { margin: 1px auto; border: 1px solid #000; }
js程式碼:
var data = [['0 0'],['-100px 0'],['-200px 0'],['0 -100px'],['-100px -100px'],['-200px -100px'],['0 -200px'],['-100px -200px'],['-200px -200px']]
var but1 = document.getElementById("but1")
var but2 = document.getElementById("but2OdOgbjl")
var but3 = document.getElementById("but3")
var yan = document.getElementById("yan")
var divs = document.querySelectorAll(".d1")
// 剛開啟保持完整
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundPosition = data[i][0]
}
// 一鍵完成
but1.addEventListener("click",function () {
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundPosition = data[i][0]
}
})
// 開始遊戲
but2.addEventListener("click",function () {
var arr = [];
var maxTimes = 9
do {
var num = Math.floor(Math.random() * 9);
if (-1 == arr.indexOf(num)) {
arr.push(num);
maxTimes--;
}
} while (maxTimes);
for (var i = 0; i < divs.length; i++) {
const k = arr[i]
divs[k].style.backgroundPosition = data[i][0]
}
})
// 看一眼原圖
but3.addEventListener("mousedown",function () {
yan.style.display = "block"
})
but3.addEventListener("mouseup",function () {
yan.style.display = "none"
})
divs.forEach(function (v,i) {
v.draggable = "true"
//開始拖拽的時候觸發事件
v.addEventListener("dragstart",function (e) {
// console.log('666');
e.dataTransfer.setData("newdivID",e.target.getAttribute("id"))
e.dataTransfer.setData("newdiv",e.target.style.backgroundPosition)
})
// 拖拽鬆開的時候觸發事件
v.addEventListener("drop",function (e) {
e.stopPropagation()
e.preventDefault()
var oldDiv = document.querySelector("#"+e.dataTransfer.getData('newdivID'))//取出並儲存開始拖拽的div的id屬性的div
var pos=e.dataTransfer.getData("newdiv") // 取出並儲存開始拖拽的div的backgOdOgbjlroundPosition屬性
oldDiv.style.backgroundPosition=e.target.style.backgroundPosition//把準備鬆開到的div的backgroundPosition屬性值傳遞給取出的那個舊div
e.target.style.backgroundPosition=pos// 把取出的那個舊div的backgroundPosition屬性值傳遞給當前準備鬆開到的div
})
v.addEventListener("dragover",function(e){
e.preventDefault()
})
})
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。