用js实现拼图小游戏
将一张图片切片成36块
在通过鼠标拖拽事件将打散顺序后的小图片拖拽到另一边组成原图
实现过程
1.基本样式
<div id="div1"></div>
<div id="div2"></div> //在body中写上一个div用来当做拼图的框，一个用来放拖拽的框
<style type="text/css"> //在style中加上样式
#div1,#div2{
width: 600px;
height: 600px;
border: 1px solid red;
margin: 20px 40px;
float: left;
}
</style>
这里基本样式就完成了
2.js部分
需要在框的div中循环生成36个小div用来放每个小图片
需要生成0-35的不重复的随机数
var div1 = document.querySelector("div"); //获取div
循环生成不重复的随机数
var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36];
定义一个数组
for(var i = 0; i < 36; i++){
var xiaoge = document.createElement("div"); //每次循环都创建一个小框用来放随机的那个小图片
div1.appendChild(xiaoge); //将小框放到div1中
xiaoge.style.width = "100px";
xiaoge.style.height = "100px";
xiaoge.style.float = "left"; //给上样式
xiaoge.draggable = true; //将默认不允许拖拽改为允许拖拽
var j = Math.floor(Math.random()*arr.length); //随机生成一个0-35的随机数
xiaoge.style.background = "url(img/timg_"+arr[j]+".png)"; //给这个小框给上背景图片，背景图片地址用字符串链接方式连接上
arr.splice(j,1); //调用splice函数 将arr数组的第j个移除
var xiaoge2 = document.createElement("div"); // 在第二个框中同样生成一个小框并给上样式，也将默认不可拖拽改为可拖拽
div2.appendChild(xiaoge2);
xiaoge2.style.width = "100px";
xiaoge2.style.height = "100px";
xiaoge2.style.float = "left";
xiaoge2.draggable = true;
}
var obj; //定义一个对象用来接收
document.ondragstart = function(event){ //给上开始拖拽的函数 并传入参数event event指的是正在拖拽的对象，将其赋给obj
obj = event.target;
}
document.ondragover = function(event){ //定义ongragover函数，元素悬停在魔表元素上方时触发，阻止浏览器对元素的默认行为
event.preventDefault();
}
document.ondrop = function(event){ //定义鼠标在目标元素上松开鼠标时触发
if(event.target.style.background == ""){ //如果此时目标元素的背景图片为空
event.target.style.background = obj.style.background; //目标元素的背景图片变为拖拽元素的背景图片，然后托转元素的背景图片变为空
obj.style.background = "";
}
else{ //如果此时目标元素的背景图片不为空
var bg = event.target.style.background; //将目标元素的背景图片和拖拽元素的背景图片互换
event.target.style.background = obj.style.background;
obj.style.background = bg;
}
}
整个效果就实现啦。不会发生拖拽后覆盖图片导致图片变少的问题。
获取不重复的随机数的方法也有更简单的，如下思路：
定义一个空数组
定义一个可生成0-35的随机数
循环 遍历 数组
如果数组中有了新生成的随机数
跳出继续生成随机数遍历数组比较
如果数组中还没有这个数
将这个数放进数组中
可以先放入一个生成的随机数
这样循环次数要少一次。