js实现拼图小游戏

用js实现拼图小游戏

将一张图片切片成36块

在通过鼠标拖拽事件将打散顺序后的小图片拖拽到另一边组成原图

实现过程

1.基本样式

<div id="div1"></div>
<div id="div2"></div>  //在body中写上一个div用来当做拼图的框，一个用来放拖拽的框

<style type="text/css">     //在style中加上样式 
　 　#div1,#div2{
　　　　 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的随机数

循环 遍历 数组 

如果数组中有了新生成的随机数

跳出继续生成随机数遍历数组比较

如果数组中还没有这个数

将这个数放进数组中

可以先放入一个生成的随机数

这样循环次数要少一次。