闲暇时光，有人会用拼图、扫雷等等小游戏来打发时间，今天我就做了一下拼图小游戏，下面分享一下写js的过程和一点心得。
首先，做一个拼图需要一个完整图片，然后将其分成几块，为了方便，以下我就将我所找来的图片用ps分成了6部分。
以下是我的html部分。首先设定一个大容器，然后分别放入6张图片的碎片，每张图片高宽都为100px。
<html>
<head>
<title>拼图</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="width:800px;height:600px;background:#555"></div>
<//img src="./images/李光洙_01.jpg" id="L1" class="l">
<//img src="./images/李光洙_02.jpg" id="L2" class="l">
<//img src="./images/李光洙_03.jpg" id="L3" class="l">
<//img src="./images/李光洙_04.jpg" id="L4" class="l">
<//img src="./images/李光洙_05.jpg" id="L5" class="l">
<//img src="./images/李光洙_06.jpg" id="L6" class="l">
//简书里面会自动把img标签转化为markdown格式，所以我在img前面加上"//",实际操作中img标签是没有斜杠的。
</body>
<script src="main.js"></script>
</html>
css部分很简单，就是将每张图片的定位设置成绝对定位，这样才能自由地通过js来调整每张图片的位置。
.l{
position:absolute;
}
下面就是最主要的js部分，作为对象语言，这部分充分展现了它的风采。
//首先拼图游戏主要部分就是用鼠标移动来控制所选图片的移动，所以直接可以把这部分写成一个功能。我暂时将其叫做move，move的对象就是每张碎片（dom）。
var move =function(dom){
dom.style.left=Math.random()*600+50+"px";
dom.style.top=Math.random()*250+50+"px";
//首先对每张碎片进行随机位置，其中50是碎片一半的高宽。这也是游戏开始前的工作。
//然后鼠标点下的时候对对象进行下面的操作。
dom.onmousedown=function(){
dom.style.zIndex=100;//所选碎片移到所有碎片的最上层。
dom.style.width=110;
dom.style.height=150;//放大所选图片，方便观察。
//然后在鼠标点击的情况下进行移动，执行以下代码。
document.onmousemove=function(e){
e.preventDefault();
//获取鼠标位置。
dom.style.left=e.clientX-50+"px";
dom.style.top=e.clientY-50+"px";
//让碎片随着鼠标移动而改变位置。
}
}
//当鼠标抬起时，执行以下操作。
dom.onmouseup=function(){
dom.style.zIndex=0;//所选图片回到原始层数。
dom.style.width=100;
dom.style.height=140;//所选图片回到原始高宽。
var x =parseInt(dom.style.left);
var y =parseInt(dom.style.top);//获取此时碎片的位置，如果x和y不是10的倍数，4舍5入让其强制等于10的倍数，这样才能让拼图进行下去，不然要将碎片移到分毫不差的位置很难。
if(x%10>5){
dom.style.left=x-x%10+10+"px";
}else{
dom.style.left=x-x%10+"px";
}
if(y%10>5){
dom.style.top=y-y%10+10+"px";
}else{
dom.style.top=y-y%10+"px";
}
document.onmousemove=function(){
}
}
}
//上面的功能写完，现在获取6张碎片。
var L1=document.getElementById("L1")
var L2=document.getElementById("L2")
var L3=document.getElementById("L3")
var L4=document.getElementById("L4")
var L5=document.getElementById("L5")
var L6=document.getElementById("L6")
//分别对每张图片进行move功能的设定。
move(L1)
move(L2)
move(L3)
move(L4)
move(L5)
move(L6)
//最后要判断每张碎片是否在正确位置，当每次鼠标抬起的时候进行以下的判断。
document.onmouseup=function(){
//因为每张碎片的位置属性都是字符创，所以通过parseInt来获取具体数值。
var x =parseInt(L1.style.left);
var y =parseInt(L1.style.top);
var x1 =parseInt(L2.style.left);
var y1 =parseInt(L2.style.top);
var x2 =parseInt(L3.style.left);
var y2 =parseInt(L3.style.top);
var x3 =parseInt(L4.style.left);
var y3 =parseInt(L4.style.top);
var x4 =parseInt(L5.style.left);
var y4 =parseInt(L5.style.top);
var x5 =parseInt(L6.style.left);
var y5 =parseInt(L6.style.top);
//r如果每张碎片的位置相差都正确的话就输出“恭喜过关！”
if(x1-x==100&&y1-y==0&&x2-x1==100&&y2-y==0&&x3-x==0&&y3-y==140&&x4-x3==100&&y4-y3==0&&x5-x4==100&&y5-y4==0){
alert("恭喜过关！")
}
}
js部分也讲完了，拼图小游戏的简单制作到这也大功告成，如果你对这个感兴趣的话，不妨尝试一下用这种思路去完成这个游戏。
最后，由于水平的有限，如果有何做得不够完善的话，请大家多多包涵。
网友评论