原生js实现美女拼图，把美女老婆抱回家，5个美女够不够！程序员就是可以为所欲为！
2023-09-11 14:21:46 时间
目录
样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！
前两天孩子闹着要玩拼图游戏，说叫我用手机下载一个玩，后边玩着的时候突然说了一句“他们好厉害哦，能做这么好玩的游戏！”，这给我气的，看不起你爹我是吧，怎么说俺也是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>样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！
关注下方公众号，有更多资料、实例代码、面试技巧奉上！
相关文章
- JS自己实现字符串加密和解密算法
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS框架_(Bootstrap.js)实现简单的轮播图
- [原创]茗洋AaronYang的 jquery.myselect.js 我的一次前端突破[上]
- js的序列化和反序列化
- [MEAN+ Webstrom] First API -- 2.Debug Node.js RESTful application
- nano-sql.js的基本操作
- Pycharm调用NodeJS运行js代码 的 环境配置
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- JS栈结构的简单封装
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动，已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- 华为OD机试 - 计算快递主站点（Java & JS & Python）
- 华为OD机试 - 完美走位（Java & JS & Python）
- 华为OD机试 - 工号不够用了怎么办？（Java & JS & Python）
- 华为OD机试 - 书籍叠放（Java & JS & Python）
- 如何查看jsplumb.js的API文档(YUIdoc的基本使用)#华为云·寻找黑马程序员#
- 【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上） #华为云·寻找黑马程序员#
- 【带着canvas去流浪（13）】用Three.js制作简易的MARVEL片头动画（下）#华为云·寻找黑马程序员#
- node.js JS对象和JSON字符串之间的转换
- 【人工智能 Open AI 】我们程序员真的要下岗了- 全能写Go / C / Java / C++ / Python / JS 人工智能机器人
- js使浏览器窗口最大化（适用于IE的方法）
- 【JS高级】js面向对象三大特性之多态_07
- 【JS高级】js面向对象三大特性之继承_06
- 原生js实现随机验证码HTMl-JS