目錄
樣式還沒有精心去調，發出來大家看看，歡迎指正，整理不易給個三連吧，謝謝拉！！
前兩天孩子鬧着要玩拼圖遊戲，說叫我用手機下載一個玩，後邊玩着的時候突然說了一句“他們好厲害哦，能做這麼好玩的遊戲！”，這給我氣的，看不起你爹我是吧，怎麼說俺也是IT界的精英，能給你慣着，非得爭這口氣。於是，我網上查了一下實現原理，就自己寫了一個，目前基本功能已經完成，可以在孩子面前表現一番了，就爲了那一句“爸爸好厲害！”。
效果圖
實現過程
1.切圖：用 background:url('+url+') no-repeat -60px -60px 這種語法，將圖片切成一張張小圖，添加到一個數組item裏面。
2.在上一步中同步用數組keys存取小圖的下標，9張小圖的話（keys就輸數字0-8的數組），點擊開始 用Math.random()>0.5?1:-1 對keys進行隨機排序。
3.遍歷keys，拿到下標對應找到存取小圖片的數組item取到小圖片，然後依次添加到頁面上的box裏面，就可達到隨機打亂的效果。
4.左鍵點擊小圖高亮顯示（標示被選中），左鍵再次點擊別的小圖片會交換位置，若再次點擊的不是左鍵，而是右鍵則上次的選中會被取消。
5.當拼圖完成，會提示成功！
6.頁面左邊是對應的參照圖，下面有按鈕可以切換圖片，也可以調整難係數。
7.拖動的功能還沒做，回頭把拖動交換位置的加上。
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;
padding:0;
}
.small{
top: 10px;
position: absolute;
}
.small_img{
display: block;
width: 200px;
margin-left: 10px;
}
.button{
margin-left: 30px;
font-size: 18px;
width: 60px;
letter-spacing: 5px;
}
div.box{
float:left;
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top:10px;
margin-left: -300px
}
.active{
border:2px dashed palevioletred;
z-index:9;
}
.not_active{
z-index:1;
}
.input{
width:30px;
}
</style>
</head>
<body>
<div class="small">
<img class="small_img" src='../images/j/1.jpg' />
<br>
<div style='margin-left:10px;'>
難度係數：<input type='text' id='difficulty_col' value='3' class='input'>
<input type='text' id='difficulty_row' value='3' class='input'>
<span id='msg' style='color:red;'></span>
</div>
<br>
<input type='button' value='開始' id='start' class="button"/>
<input type='button' value='換換' id='next' class="button"/>
</div>
<div class="box" id='box'></div>
</body>
<script>
function Jigsaw(col,row){
this.box=document.getElementById("box");
this.row=row;
this.col=col;
this.row=row||3;
this.col=col||3;
this.boxWidth=600;
this.boxHeight=600;
this.itemWidth = this.boxWidth/this.col;
this.itemHeight= this.boxHeight/this.row;
this.item=[];
this.orig_keys=[];
this.keys=[];
this.len=this.row*this.col;
this.init();
}
//初始化
Jigsaw.prototype.init=function(){
var fragment=document.createDocumentFragment();
var url = small_img.src;
for(var i=0;i<this.len;i++){
var div=document.createElement('div');
div.style.cssText='cursor:move;background:url('+url+') no-repeat -'+(i%this.col)*this.itemWidth+'px -'+Math.floor((i)/this.col)*this.itemHeight+'px;float:left;height:'+this.itemHeight+'px;width:'+this.itemWidth+'px;';
this.item.push(div);
this.keys.push(i);
this.orig_keys.push(i);
fragment.appendChild(div);
}
this.box.innerHTML="";
this.box.appendChild(fragment);
}
Jigsaw.prototype.start=function(){
//隨機位置
this.keys.sort(function(a,b){
return Math.random()>0.5?1:-1;
})
this.box.innerHTML="";
var keys = this.keys;
var colNum=0;
var rowNum=0;
for(var i=0;i<keys.length;i++){
if(i>0){
if(i%this.col===0){
rowNum++;
}
if(i%this.col===0){
colNum=0;
}
}
var item = this.item[keys[i]];
item.style.position='absolute';
item.style.left=colNum++*this.itemWidth+'px';
item.style.top=rowNum*this.itemHeight+'px';
item.pos=i;
item.key=keys[i];
this.drag(item);
this.box.appendChild(item);
}
}
//尋找已經選擇的目標
Jigsaw.prototype.findTarget=function(item){
//從列表中查找是否已經有選擇的目標了
for(var i=0;i<this.item.length;i++){
if(item!==this.item[i] && this.item[i].moveFlag){
return this.item[i];
}
}
}
//交換兩個div位置
Jigsaw.prototype.exchange=function(from,target){
var from_left = from.style.left;
var from_top = from.style.top;
var from_pos = from.pos;
var from_key = from.key;
var target_left = target.style.left;
var target_top = target.style.top;
var target_pos = target.pos;
var target_key = target.key;
from.style.left=target_left;
from.style.top=target_top;
//from.style.border="";
//from.style.zIndex=1;
from.className='not_active';
from.pos=target_pos;
target.style.left=from_left;
target.style.top=from_top;
//target.style.border="";
//target.style.zIndex=1
target.className='not_active';
target.pos=from_pos;
target.moveFlag=false;
//交換他們在this.keys中的位置
this.keys.splice(from_pos,1,target_key);
this.keys.splice(target_pos,1,from_key);
//如果相等表示已經找好了
if(this.diff(this.orig_keys,this.keys)){
console.log('完成了');
this.tips(5);
}
}
//完成後的倒計時提示
Jigsaw.prototype.tips=function(ts){
var me=this;
var suc=document.createElement('div');
var t=document.createElement('p');
var tn=ts||3;
var timer=null;
suc.style.cssText='position:absolute;z-index:3;top:45%;width:100%;text-align:center;font-size:60px;color:#F56200;font-family:arial,黑體;';
suc.innerHTML='來抱回家';
suc.appendChild(t);
me.box.appendChild(suc);
function updatetime(){
t.innerHTML=tn--;
if(tn<0){
clearInterval(timer);
me.box.removeChild(suc);
return;
}
timer=setTimeout(function(){
updatetime();
},1000)
}
updatetime();
}
//比較連個數組，如果一模一樣了證明順序對了
Jigsaw.prototype.diff=function(a,b){
var me=this;
var isArrayA = Array.isArray(a);
var isArrayB = Array.isArray(b);
if (isArrayA && isArrayB) {//如果都是數組
if(a.length === b.length){//如果長度相等
return a.every(function (e, i) {//用every和遞歸來比對a數組和b數組的每個元素，並返回
return me.diff(e, b[i]);
})
}
//長度都不等直接返回false
return false;
}else{
return String(a) === String(b)
}
}
//設置拖動
Jigsaw.prototype.drag=function(item){
var me=this;
item.onmousedown=function(e){
var e = e||window.event;
if(e.button===0){//左鍵
var target = me.findTarget();
if(target!=null){
//this.style.border="2px solid red";
//this.style.zIndex=9;
this.className='active';
me.exchange(this,target);
}else{
this.moveFlag=true;
this.className='active';
}
}else if(e.button===3){//右鍵
var target = me.findTarget();
if(target!=null){
target.className='not_active';
target.moveFlag=false;
}
}
e.preventDefault && e.preventDefault();
}
//右鍵取消
item.oncontextmenu = function(e) {
var e = e||window.event;
console.log('oncontextmenu')
var target = me.findTarget();
if(target!=null){
target.className='not_active';
target.moveFlag=false;
}
e.preventDefault && e.preventDefault();
}
/*var move_div=null,flag=false;
item.onmousedown=function(e){
var e = e||window.event,relX,relY;
relX = e.clientX-item.offsetLeft;
relY = e.clientY-item.offsetTop;
flag=true;
document.onmousemove=function(e){
if(!flag){return ;}
var ev=window.event||e;
var nx = e.clientX-relX;
var ny = e.clientY-relY;
console.log(nx);
console.log(ny);
console.log('---------------');
item.style.zIndex=2;
item.style.left=nx+'px';
item.style.top=ny+'px';
}
document.onmouseup=function(e){
var ev=window.event||e;
flag=false;
}
}*/
}
var msg = document.getElementById("msg");
var difficulty_col=document.getElementById("difficulty_col");
difficulty_col.onblur=function(){
var temp = parseInt(this.value);
if(isNaN(temp)){
temp=3;
}
this.value = temp;
if(this.value>10){
this.value = 10;
msg.innerText="太難了，不能超過10";
}else if(this.value<2){
this.value = 2;
msg.innerText="太容易了，不能小於2";
}else
msg.innerText="";
}
var difficulty_row=document.getElementById("difficulty_row");
difficulty_row.onblur=function(){
var temp = parseInt(this.value);
if(isNaN(temp)){
temp=3;
}
this.value = temp;
if(this.value>10){
this.value = 10;
msg.innerText="太難了，不能超過10"
}else if(this.value<2){
this.value = 2;
msg.innerText="太容易了，不能小於2";
}else{
msg.innerText="";
}
}
var small_img =document.getElementsByClassName("small_img")[0];
document.getElementById("next").onclick=function(){
var src = small_img.src;
var reg = /(\d+)\.jpg$/;
var arr = reg.exec(src);
var index=1;
if(arr.length>1){
index = ++arr[1];
if(index>=6){
index=1;
}
}
small_img.src='../images/j/'+index+'.jpg';
jigsaw = new Jigsaw(difficulty_col.value,difficulty_row.value);
//jigsaw.start();
}
var jigsaw = new Jigsaw(difficulty_col.value,difficulty_row.value);
document.getElementById("start").onclick=function(){
//開始
jigsaw = new Jigsaw(difficulty_col.value,difficulty_row.value);
jigsaw.start();
}
</script>
</html>樣式還沒有精心去調，發出來大家看看，歡迎指正，整理不易給個三連吧，謝謝拉！！