纯JS拼图小游戏
废话不多说，直接上代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拼图小游戏</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:30px/1.5 Tahoma;background:#ccc;}
#box{position:relative;width:410px;height:570px;margin:10px auto;}
#box li{float:left;width:82px;height:190px;overflow:hidden;}
#box li img{width:82px;height:190px;}
#box li.hig{width:78px;height:186px;overflow:hidden;border:2px dashed yellow;}
#box li.hig img{width:78px;height:186px;opacity:0.5;filter:alpah(opacity=50);}
#mask{position:absolute;top:0;left:0;width:410px;height:570px;background:red;opacity:0;filter:alpha(opacity=0);}
input{cursor:pointer;}
#photo{text-align:center;margin:10px 0;}
#photo img{width:100px;height:100px;border-radius:5px;margin:0 5px;opacity:0.5;filter:alpha(opacity=50);cursor:pointer;}
#photo img.hover{opacity:1;filter:alpha(opacity=100);}
#photo img.selected{border:2px solid yellow;width:96px;height:96px;opacity:1;filter:alpha(opacity=100);}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var zIndex = 1;
window.onload = function ()
{
var oPhoto = document.getElementById("photo");
var aThumb = oPhoto.getElementsByTagName("img");
var oBox = document.getElementById("box");
var aLi = oBox.getElementsByTagName("li");
var oInput = document.getElementsByTagName("input")[0];
var i = 0;
var imgPath = 0;
var oDateStart = null;
var aPos = [];
var aData = [];
for (i = 0; i < 15; i++)aData.push(i+1);
//缩略图
for (i = 0; i < aThumb.length; i++)
{
aThumb[i].index = i;
aThumb[i].onmouseover = function ()
{
this.className += " hover"
};
aThumb[i].onmouseout = function ()
{
this.className = this.className.replace(/\shover/, "")
};
aThumb[i].onclick = function ()
{
for (i = 0; i < aThumb.length; i++)aThumb[i].className = "";
this.className = "selected";
imgPath = this.index;
oBox.innerHTML = "";
oInput.value = "开始游戏";
createMask();
aData.sort(function (a, b) {return a - b});
GAME(false)
}
}
//创建遮罩层
function createMask()
{
var oMask = document.createElement("div");
oMask.id = "mask";
oMask.style.zIndex = zIndex;
oBox.appendChild(oMask)
}
createMask();
//游戏处理函数
function GAME(ran)
{
//随机排列数组
ran && aData.sort(function (a, b) {return Math.random() > 0.5 ? -1 : 1});
//插入结构
var oFragment = document.createDocumentFragment();
for (i = 0; i < aData.length; i++)
{
var oLi = document.createElement("li");
var oImg = document.createElement("img");
oImg.src = "http://js.fgm.cc/learn/lesson9/img/girl" + imgPath + "/" + aData[i] + ".png";
oLi.appendChild(oImg);
oFragment.appendChild(oLi)
}
oBox.appendChild(oFragment);
oBox.style.background = "#ccc";
//布局转换
for (i = 0; i < aLi.length; i++)
{
aLi[i].index = i;
aLi[i].style.top = aLi[i].offsetTop + "px";
aLi[i].style.left = aLi[i].offsetLeft + "px";
aPos.push({"left":aLi[i].offsetLeft, "top":aLi[i].offsetTop})
}
for (i = 0; i < aLi.length; i++)
{
aLi[i].style.position = "absolute";
aLi[i].style.margin = "0";
drag(aLi[i])
}
//拖拽函数
function drag(obj, handle)
{
var handle = handle || obj;
handle.style.cursor = "move";
handle.onmousedown = function (event)
{
var event = event || window.event;
var disX = event.clientX - this.offsetLeft;
var disY = event.clientY - this.offsetTop;
var oNear = null;
obj.style.zIndex = zIndex++;
document.onmousemove = function (event)
{
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = obj.parentNode.clientWidth - obj.offsetWidth;
var maxT = obj.parentNode.clientHeight - obj.offsetHeight;
iL < 0 && (iL = 0);
iT < 0 && (iT = 0);
iL > maxL && (iL = maxL);
iT > maxT && (iT = maxT);
obj.style.left = iL + "px";
obj.style.top = iT + "px";
for (i = 0; i < aLi.length; i++) aLi[i].className = "";
oNear = findNearest(obj);
oNear && (oNear.className = "hig");
return false
};
document.onmouseup = function ()
{
document.onmousemove = null;
document.onmouseup = null;
if (oNear)
{
var tIndex = obj.index;
obj.index = oNear.index;
oNear.index = tIndex;
startMove(obj, aPos[obj.index]);
startMove(oNear, aPos[oNear.index],function ()
{
if (finish())
{
var iHour = iMin = iSec = 0;
var oDateNow = new Date();
var iRemain = parseInt((oDateNow.getTime() - oDateStart.getTime()) / 1000);
iHour = parseInt(iRemain / 3600);
iRemain %= 3600;
iMin = parseInt(iRemain / 60);
iRemain %= 60;
iSec = iRemain;
alert("\u606d\u559c\u60a8\uff0c\u62fc\u56fe\u5b8c\u6210\uff01\n\n\u7528\u65f6\uff1a" + iHour + "\u5c0f\u65f6" + iMin + "\u5206" + iSec + "\u79d2");
createMask();
}
});
oNear.className = "";
}
else
{
startMove(obj, aPos[obj.index])
}
handle.releaseCapture && handle.releaseCapture()
};
this.setCapture && this.setCapture();
return false
}
}
//找出相遇点中最近的元素
function findNearest(obj)
{
var filterLi = [];
var aDistance = [];
for (i = 0; i < aLi.length; i++) aLi[i] != obj && (isButt(obj, aLi[i]) && (aDistance.push(getDistance(obj, aLi[i])), filterLi.push(aLi[i])));
var minNum = Number.MAX_VALUE;
var minLi = null;
for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minLi = filterLi[i]);
return minLi
}
}
GAME();
//开始游戏
oInput.onclick = function ()
{
oDateStart = new Date();
oBox.innerHTML = "";
this.value = "\u91cd\u65b0\u5f00\u59cb";
GAME(true)
};
//判断是否完成
function finish()
{
var aTemp = [];
var success = true;
aTemp.length = 0;
for (i = 0; i < aLi.length; i++)
{
for (var j = 0; j < aLi.length; j++)
i == aLi[j]["index"] && aTemp.push(aLi[j].getElementsByTagName("img")[0].src.match(/(\d+)\./)[1])
}
for (i = 1; i <= aTemp.length; i++)
{
if(i != aTemp[i-1])
{
success = false;
break
}
}
return success
}
};
//求两点之间的距离
function getDistance(obj1, obj2)
{
var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);
var b = (obj1.offsetTop + obj1.offsetHeight / 2) - (obj2.offsetTop + obj2.offsetHeight / 2);
return Math.sqrt(a * a + b * b)
}
//碰撞检测
function isButt(obj1, obj2)
{
var l1 = obj1.offsetLeft;
var t1 = obj1.offsetTop;
var r1 = obj1.offsetLeft + obj1.offsetWidth;
var b1 = obj1.offsetTop + obj1.offsetHeight;
var l2 = obj2.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = obj2.offsetLeft + obj2.offsetWidth;
var b2 = obj2.offsetTop + obj2.offsetHeight;
return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1)
}
//获取最终样式
function getStyle(obj, attr)
{
return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
}
//运动框架
function startMove(obj, pos, onEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function ()
{
doMove(obj, pos, onEnd)
}, 30)
}
function doMove(obj, pos, onEnd)
{
var iCurL = getStyle(obj, "left");
var iCurT = getStyle(obj, "top");
var iSpeedL = (pos.left - iCurL) / 5;
var iSpeedT = (pos.top - iCurT) / 5;
iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);
iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);
if (pos.left == iCurL && pos.top == iCurT)
{
clearInterval(obj.timer);
onEnd && onEnd()
}
else
{
obj.style.left = iCurL + iSpeedL + "px";
obj.style.top = iCurT + iSpeedT + "px";
}
}
</script>
</head>
<body>
<div id="photo">
<img src="http://images.cnblogs.com/demo/jspingtu/girl_1.jpg" class="selected" />
<img src="http://images.cnblogs.com/demo/jspingtu/girl_2.jpg" />
<img src="http://images.cnblogs.com/demo/jspingtu/girl_3.jpg" />
</div>
<center><input type="button" value="开始游戏" /></center>
<ul id="box"></ul>
</body>
</html>
原文地址：http://www.yzzmf.com/html/qianduankaifa/yuanmaxuexi/2011-10-09/65.html
