devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

纯JS拼图小游戏

作者：从前慢现在也慢 | 2024-03-21 20:21:19

赞

踩

function startmove(obj,pos,onend)

废话不多说，直接上代码。


<!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

转载于:https://www.cnblogs.com/enson99/archive/2011/10/12/2208681.html

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。