用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的隨機數

迴圈 遍歷 陣列 

如果陣列中有了新生成的隨機數

跳出繼續生成隨機數遍歷陣列比較

如果陣列中還沒有這個數

將這個數放進陣列中

可以先放入一個生成的隨機數

這樣迴圈次數要少一次。