原生js实现美女拼图，把美女老婆抱回家，5个美女够不够！程序员就是可以为所欲为！

不念不忘少年蓝@ 2021-07-24 13:41 300阅读 0赞

**目录**

前两天孩子闹着要玩拼图游戏，说叫我用手机下载一个玩，后边玩着的时候突然说了一句“他们好厉害哦，能做这么好玩的游戏！”，这给我气的，看不起你爹我是吧，怎么说俺也是IT界的精英，能给你惯着，非得争这口气。于是，我网上查了一下实现原理，就自己写了一个，目前基本功能已经完成，可以在孩子面前表现一番了，就为了那一句“爸爸好厉害！”。

效果图

实现过程

完整代码

样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！

--------------------

### 前两天孩子闹着要玩拼图游戏，说叫我用手机下载一个玩，后边玩着的时候突然说了一句“他们好厉害哦，能做这么好玩的游戏！”，这给我气的，看不起你爹我是吧，怎么说俺也是IT界的精英，能给你惯着，非得争这口气。于是，我网上查了一下实现原理，就自己写了一个，目前基本功能已经完成，可以在孩子面前表现一番了，就为了那一句“爸爸好厉害！”。 ###

### 效果图 ###

![2020123016170228.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 4][]

### 实现过程 ###

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>

### 样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！ ###

### **关注下方公众号，有更多资料、实例代码、面试技巧奉上！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 5][]

[2020123016170228.gif]: /images/20210724/8c683c1ac77244c8b1f76122610adac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/54d1b8ca44184329a04dad8eca1c7c6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/25dc46bb53bb4950a3c55b70b574ebf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/b3221d44e4f74f49b0f135d924306604.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3]: /images/20210724/efcf53d5fa2f46ca820c79bbca3a591f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 4]: /images/20210724/838090c65c0e401f85920229a0dbaf16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 5]: /images/20210724/f7d6a867071f42b389a5c3784f8dcd90.png