一、图片要自己先设置好图片的名称，本演示默认是：pintu+index+.jpeg的形式，当然你也可以自己任意设置格式，但是一定要有规律。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拼图游戏</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#main {
/*width: 608px;
height: 608px;*/
border: 1px solid #00FFFF;
margin-top: 10px;
float: left;
margin-left: 100px;
}
li {
list-style-type: none;
float: left;
border: 1px solid;
}
/*div {
width: 200px;
height: 200px;
background-image: url(img/pintu1.jpeg);
}*/
#yuantu {
width: 200px;
height: 200px;
/*background-image: url(img/pintu1.jpeg);*/
float: left;
margin: 10px;
background-size: cover;
}
</style>
</head>
<body>
<aside id="yuantu"></aside>
<section id="main"></section>
<script type="text/javascript">
var imgnum = 2;
var imgindex=1
window.onload = function() {
creatdivimg();
};
function creatdivimg() {
var main = document.getElementById("main");
var asideimg=document.getElementById("yuantu");
asideimg.style.backgroundImage="url(img/pintu"+imgindex+".jpeg)";
main.style.width=600+imgnum*2+"px";
main.style.height=600+imgnum*2+"px";
var n = 0;
for(var r = 0; r < imgnum; r++) {
for(var l = 0; l < imgnum; l++) {
var li = document.createElement("li");
main.appendChild(li);
var divimg = document.createElement("div");
li.appendChild(divimg);
divimg.id = "div" + (n++);
divimg.style.width=600/imgnum+"px";
divimg.style.height=600/imgnum+"px";
divimg.style.backgroundImage="url(img/pintu"+imgindex+".jpeg)";
var x=-(600/imgnum)*l+"px";
var y=-(600/imgnum)*r+"px";
divimg.style.backgroundPosition = x + " " + y;
divimg.draggable = "true";
divimg.setAttribute("ondragstart", "divimgondragstart(event)");
li.setAttribute("ondragover", "liondragover(event)");
li.setAttribute("ondrop", "liondrop(event)");
imgrandom();
}
}
}
function imgrandom(){
var lis=document.getElementsByTagName("li");
var listring=new Array();
for (var i = 0; i < lis.length; i++) {
listring.push(lis[i].outerHTML);//向listring数组中添加每一个li
}
listring=listring.sort(function(x1,x2){//随机li函数
return Math.random()-0.5;
});
var main=document.getElementById("main");
main.innerHTML="";
for (var j = 0; j < listring.length ;j++) {
main.innerHTML+=listring[j];
}
}
function divimgondragstart(e) {//图片开始移动时
e.dataTransfer.setData("id",e.target.id);//为被拖动的照片添加临时变量
}
function liondragover(e) {//当元素在有效拖放目标上正在被拖动时运行的脚本。
e.preventDefault(); //消除在新的页面打开图片
}
function liondrop(e) {//拖放图片函数
var li= e.target;//默认拖拽对象放在li里面且不在divimg上面
if(e.target.nodeName=="DIV"){//如果拖拽对象放在了divimg上
li=e.target.parentNode;//如果拖拽对象放在了divimg上，就把divimg的父节点给li，以保证li永远是容器
}
var divimgid =e.dataTransfer.getData("id");
var img = document.getElementById(divimgid);
var divimg=img.parentNode;
divimg.appendChild(li.children[0]);
li.appendChild(img);
e.stopPropagation(); //消除火狐浏览器中在新的页面打开图片
yanzheng();
}
function yanzheng(){
var gg=true;
var divs=document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if(divs[i].id!="div"+i){
gg=false;
break;
}
else{
gg=true;
}
}
if(gg){
alert("恭喜你进入"+(imgnum+1)+"关！");
imgnum++;
imgindex++;
var main=document.getElementById("main");
main.innerHTML="";
creatdivimg();
}
}
</script>
</body>
</html>二、效果图
