登录
当前位置： 首页 > 工具软件 > 拼图游戏的效果 > 使用案例 >

Javascript 拼图游戏,可以自定义图片拼图,可以设置无限关卡，拼图成功后含动画效果...

傅越
2023-12-01

基本就是拖拽功能的应用，其它鼠标事件绑定，距离的计算，动画等，也有很多细节问题，

需要亲自做了才知道， 支持IE系列，FIREFOX，chrome浏览器, IE6下可能有点卡。

过关卡的时候需要下载下一张图片，如果网速慢则会暂时停止一下，稍等一会就可以接着下一关。

玩到最后一关就可以自定义图片拼图了,只需要输入图片的地址就可以了!

如果需要直接自定义图片，则用谷歌浏览器或者FIREBUG把隐藏的Id 为 imgDiy 的层显示出来

就可以了. 

DEMO演示：点击试玩 

源代码下载：点击下载

IFREAME演示:

 就不解释了，我源代码里面的注释写得很清楚，有兴趣的可以看一下源代码，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS</title>
    <meta name="keywords" content="拼图游戏"/>
    <meta name="description" content="拼图游戏"/>
    <style type="text/css">
        #vvg p {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
        }

        #vvg ul {
            overflow: hidden;
            text-align: center;
        }

        #thumb li {
            list-style: none;
            float: left;
            display: inline;
            margin-left: 5px;
        }

        #gameCanvas {
            position: relative;
            padding: 0;
            margin: 0 auto;
        }

        #gameCanvas li {
            position: absolute;
            list-style: none;
            cursor: move;
        }

        #vvgBox {
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        #mask {
            position: absolute;
            z-index: 999;
            background: #fff;
            left: 0;
            top: 0;
        }

        #button {
            width: 133px;
            height: 133px;
            background-image: url('images/play.png');
            position: absolute;
            z-index: 1000;
            margin-left: -66px;
            left: 50%;
            margin-top: -66px;
            top: 50%;
        }

        #button:hover {
            background-position: -133px 0;
        }

        #textTip {
            font-size: 25px;
            font-weight: bold;
            color: #000;
            text-align: center;
            position: relative;
            top: -75%;
            z-index: 1000;
        }

        #step {
            margin-left: 5px;
            margin-right: 5px;
            color: red;
            font-size: 20px;
        }

        #imgDiy {
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
<div id="vvg">
    <p id="desTip">通过四个关卡后可以自定义图片&nbsp;&nbsp;&nbsp;&nbsp;现在是第<span id="step">1</span>关</p>
    <p id="imgDiy">填入图片地址：<input type="text" id="imgUrl"><input id="startDiy" type="button" value="开始"></p>
    <div id="vvgBox">
        <ul id="gameCanvas"></ul>
    </div>
</div>
<script type="text/javascript">
/*  by VVG 2012年6月1日
    E-MAIL:mysheller@163.com
    博客地址：http://www.cnblogs.com/NNUF/
*/
/*快捷函数*/
function getId(id) {
    return typeof id === "string" ? document.getElementById(id) : id
}

function setOpacity(node, level) {
    if (document.all) {
        node.style.filter = 'alpha(opacity=' + level + ')';
    } else {
        node.style.opacity = level / 100;
    }
}

//设置第几关
var vvg = {};
vvg.step = 1;
/* 游戏 内容代码 */
function makeGame(url) {
    var imgArray = [], imgArray_bak = [],
            dragging = null, draggingL, draggingT, dear, dearL, dearT, top, left, effectEnd,
            posArray = [], posArray_bak = [], canvas = getId('gameCanvas'), vvgBox = getId('vvgBox'), successTimer;
    // posx,posy 为鼠标相对于拖动对象的左上角距离， sLeft sTop 为拖动对象的初始位置
    var posx, posy, zindex = 0, isMouseMove;
    var imgWidth, imgHeight;
    var img = new Image();
    img.src = url;
    // 图片加载完毕
    img.onload = function () {
        //获取图片的尺寸
        imgWidth = img.width;
        imgHeight = img.height;
        var myw = Math.floor(imgWidth / 4),
                myh = Math.floor(imgHeight / 4);
        vvgBox.style.width = imgWidth + 'px';
        vvgBox.style.height = imgHeight + 'px';
        canvas.style.width = imgWidth + 'px';
        canvas.style.height = imgHeight + 'px';
        //清空gameCanvas
        while (canvas.firstChild) {
            canvas.removeChild(canvas.firstChild);
        }
        // 文档碎片
        var oFragment = document.createDocumentFragment();
        //循环生成方块状态的小图，以背景的形式展现，生成16格,并添加到数组
        for (var i = 0; i < 16; i++) {
            var li = document.createElement('li');
            li.style.width = myw + 'px';
            li.style.height = myh + 'px';
            li.style.backgroundImage = 'url(' + url + ')';
            // 计算坐标
            if (i < 4) {//0,1,2,3 第一排
                top = 0;
                left = i * myw;
            } else if (i >= 4 && i < 8) {// 4,5,6,7 第二排
                top = myh;
                left = (i - 4) * myw;
            } else if (i >= 8 && i < 12) {// 8,9,10,11 第三排
                top = 2 * myh;
                left = (i - 8) * myw;
            } else if (i >= 12) { // 12，13，14，15 第四排
                top = 3 * myh;
                left = (i - 12) * myw;
            }
            // 记录还未打乱次序的初始ID对应的每个id的正确位置，用于比较拼图是否完成
            posArray.push([i, left, top]);
            // 赋值背景backgroundPosition 与 位置
            li.style.backgroundPosition = -left + 'px' + ' ' + (-top) + 'px';
            // 赋值ID为i, 用于检查拼图的位置
            li.id = i;
            // 对象是否在移动
            li.isMove = false;
            // 存储到数组imgArray中
            imgArray.push(li);
            li.style.left = left + 'px';
            li.style.top = top + 'px';
            // 事件绑定
            li.onmousedown = function (event) {
                event = event || window.event;
                var target = event.target || event.srcElement;
                isMouseMove = false;
                dragging = target;
                //记录拖动对象的初始位置
                draggingL = parseInt(dragging.style.left);
                draggingT = parseInt(dragging.style.top);
                posx = event.clientX - canvas.offsetLeft - dragging.offsetLeft;
                posy = event.clientY - canvas.offsetTop - dragging.offsetTop;
                zindex++;
                // 在移动的图片就不绑定事件
                if (!dragging.isMove) {
                    document.onmousemove = function (event) {
                        event = event || window.event;
                        var myleft = event.clientX - canvas.offsetLeft - posx;
                        var mytop = event.clientY - canvas.offsetTop - posy;
                        if (myleft < 0)myleft = 0;
                        if (mytop < 0)mytop = 0;
                        if (myleft > canvas.offsetWidth - dragging.offsetWidth)myleft = canvas.offsetWidth - dragging.offsetWidth;
                        if (mytop > canvas.offsetHeight - dragging.offsetHeight)mytop = canvas.offsetHeight - dragging.offsetHeight;
                        dragging.style.left = myleft + 'px';
                        dragging.style.top = mytop + 'px';
                        dragging.style.zIndex = zindex;
                        // 设置拖动的元素的不透明度
                        setOpacity(dragging, 80);
                        // 获取离拖动元素最近的元素
                        dear = checkMeet(dragging);
                        // 循环设置透明度为100....就是为了改变最近距离的透明度
                        for (var i = 0, n = imgArray_bak.length; i < n; i++) {
                            setOpacity(imgArray_bak[i], 100);
                        }
                        setOpacity(dear, 50);
                        dearL = parseInt(dear.style.left);
                        dearT = parseInt(dear.style.top);
                        isMouseMove = true;
                        return false;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        // 只发生单击事件鼠标没有移动时不会设置透明度移动动画操作
                        if (isMouseMove === true) {
                            dear.style.zIndex = zindex;
                            setOpacity(dragging, 100);
                            setOpacity(dear, 100);
                            startMove(dear, draggingL, draggingT, 10);
                            startMove(dragging, dearL, dearT, 10);
                        }
                        isMouseMove = false;
                        dragging = null;
                        return false;
                    };
                }
                return false;
            };
            oFragment.appendChild(li);
        }
        canvas.appendChild(oFragment);
        // 复制一份密码到posArray_bak,用于检查拼图是否完成(id对应正确的位置时，则拼图完成)
        imgArray_bak = imgArray.concat(); //只包含对象
        // posArray.push([i, left, top]);
        posArray_bak = posArray.concat(); //包含对象id以及未打乱对象的位置属性
        play();
        // 打乱数组imgArray

    };
    // 随机排列
    function rank() {
        while (imgArray.length > 0) {
            // 在数组的长度中获取随机值下标
            // 随机获取ID
            var ranLi = imgArray.splice(random(0, imgArray.length), 1);
            // 随机获取位置,并从原数组移除，返回移除项组成的数组
            var ranCss = posArray.splice(random(0, posArray.length), 1);
            // 赋值随机位置
            startMove(ranLi[0], ranCss[0][1], ranCss[0][2], 10);
        }
    }

    // 返回随机数函数
    function random(from, to) {
        return Math.floor(Math.random() * (to - from) + from);
    }

    // 检测与谁相交,判断对象的中心点的距离最近即相交
    function checkMeet(obj) {
        // 存储与每个对象的最小距离的数组
        var disArray = [];
        //循环图片对象列表，求距离并计入数组
        for (var i = 0, n = imgArray_bak.length; i < n; i++) {
            // 排除自身和正在移动的对象
            if (imgArray_bak[i] != obj && !imgArray_bak[i].isMove) {
                var item = getDistance(obj, imgArray_bak[i]);
                //数组只传入一个值，后面的值与第一个值比较，如果比它小这替换这个值,剩下的就是最小的距离
                if (disArray.length == 0) {
                    disArray.push([imgArray_bak[i], item]);
                }
                if (item - 0 < disArray[0][1] - 0) {
                    disArray.splice(0, 1, [imgArray_bak[i], item]);
                }
            }
        }
        // 返回距离最小的对象
        return disArray[0][0];
    }

    // 求两对象中心两点之间的距离,传入对象,利用勾股定理求值
    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.ceil(Math.sqrt(a * a + b * b));
    }

    // 检查拼图是否完成
    function check() {
        for (var j = 0, n = posArray_bak.length; j < n; j++) {
            // posArray.push([i, left, top]);
            var loopLi = getId(posArray_bak[j][0] + ''); //加空转换成字符串
            var loopLiLeft = parseInt(loopLi.style.left);
            var loopLiTop = parseInt(loopLi.style.top);
            if (loopLiLeft != posArray_bak[j][1]) return false;
            if (loopLiTop != posArray_bak[j][2]) return false;
        }
        return true;
    }

    // 设置移动
    function startMove(obj, x2, y2, time) {
        clearInterval(obj.timer);
        if (!obj.timer) {
            obj.timer = setInterval(function () {
                move(obj, x2, y2);
            }, time);
        }
    }

    // 移动效果
    function move(obj, x2, y2) {
        //判断对象是否移动
        obj.isMove = true;
        var x1 = parseInt(obj.style.left), y1 = parseInt(obj.style.top),
                movex = (x2 > x1 ? Math.ceil : Math.floor)((x2 - x1) / 10),
                movey = (y2 > y1 ? Math.ceil : Math.floor)((y2 - y1) / 10);
        obj.style.left = (x1 + movex) + 'px';
        obj.style.top = (y1 + movey) + 'px';
        if (parseInt(obj.style.left) == x2 && parseInt(obj.style.top) == y2) {
            clearInterval(obj.timer);
            obj.isMove = false;
            obj.timer = null;
            // 通过拼图检查，并已经执行了拼图成功后的效果，避免成功动画也执行拼图成功，产生循环
            if (!!check() && !effectEnd) {
                successTimer && clearTimeout(successTimer);
                successTimer = setTimeout(sucessEffect, 800);
            }
        }
    }

    // 拼图成功后效果
    function sucessEffect() {
        var num = 0, cTimer;
        effect();
        function effect() {
            var copy2 = imgArray_bak.concat();
            var copy1 = posArray_bak.concat();
            // 打乱数组imgArray
            while (copy2.length > 0) {
                // 随机获取ID
                var ranLi = copy2.splice(random(0, copy2.length), 1);
                // 随机获取位置,并从原数组移除，返回移除项组成的数组
                var ranCss = copy1.splice(random(0, copy1.length), 1);
                startMove(ranLi[0], ranCss[0][1], ranCss[0][2], 10);
            }
            num++;
            if (num < 4) {
                setTimeout(effect, 800);
            } else {
                setTimeout(back, 800);
            }
        }

        function back() {
            var copy1 = posArray_bak.concat();
            while (copy1.length > 0) {
                var ranCss = copy1.splice(random(0, copy1.length), 1);
                startMove(getId(ranCss[0][0] + ''), ranCss[0][1], ranCss[0][2], 30);
                // 特效过后弹出蒙板
                cTimer && clearTimeout(cTimer);
                cTimer = setTimeout(tipNextStep, 1000);
            }
            effectEnd = true;
        }
    }

    function play() {
        var mask = document.createElement('div');
        mask.id = 'mask';
        mask.style.width = imgWidth + 'px';
        mask.style.height = imgHeight + 'px';
        setOpacity(mask, 80);
        var playBtn = document.createElement('div');
        playBtn.id = 'button';
        playBtn.onclick = function () {
            canvas.removeChild(mask);
            vvgBox.removeChild(playBtn);
            // 打乱排序
            rank();
        };
        canvas.appendChild(mask);
        vvgBox.appendChild(playBtn);
    }

    // 下一张图按钮
    function tipNextStep() {
        vvg.step += 1;
        var mask = document.createElement('div');
        mask.id = 'mask';
        mask.style.width = imgWidth + 'px';
        mask.style.height = imgHeight + 'px';
        setOpacity(mask, 80);
        var playBtn = document.createElement('div');
        playBtn.id = 'button';
        if (vvg.step < 5) {
            playBtn.onclick = function () {
                canvas.removeChild(mask);
                vvgBox.removeChild(playBtn);
                vvgBox.removeChild(textTip);
                var step = getId('step');
                step.innerHTML = vvg.step;
                makeGame('images/0' + vvg.step + '.jpg');
            }
        } else {
            playBtn.onclick = function () {
                while (canvas.firstChild) {
                    canvas.removeChild(canvas.firstChild);
                }
                var btn = getId('button');
                btn.parentNode.removeChild(btn);
                var tip = getId('textTip');
                tip.innerHTML = '';
                var desTip = getId('desTip');
                desTip.innerHTML = '现在你可以自定义图片了，请在下面的文本框中输入图片的地址：';
                var imgDiy = getId('imgDiy');
                var startDiy = getId('startDiy');
                var imgUrl = getId('imgUrl');
                imgDiy.style.display = 'block';
                startDiy.onclick = function () {
                    if (imgUrl.value == '') {
                        alert('请填入图片地址');
                    } else {
                        makeGame(imgUrl.value);
                    }
                }
            }
        }


        var textTip = document.createElement('div');
        textTip.id = 'textTip';
        textTip.innerHTML = "点击开始第" + vvg.step + "关";
        canvas.appendChild(mask);
        vvgBox.appendChild(playBtn);
        vvgBox.appendChild(textTip);
    }
}

// 默认播放第一关
makeGame('images/01.jpg');


</script>
</body>
</html>

 转载请注明博客地址：http://www.cnblogs.com/NNUF/archive/2012/06/01/2531436.html

 

转载于:https://www.cnblogs.com/NNUF/archive/2012/06/01/2531436.html

 类似资料：

相关阅读

Java游戏开发拼图游戏经典版Android实现九宫格拼图游戏python实现多张图片拼接成大图js+html5实现可在手机上玩的拼图游戏java实现简单美女拼图游戏

相关文章

转 | 拼多多后端面经Bootstrap 图片UE4设置默认游戏模式和关卡拼多多一面拼多多HR面

相关问答

拼图8兼容状态算法拼图测试用例多摄像机图像拼接可以画两层饼图吗？图像处理 - opencv 拼图如何解决两张圆形管道图片拼接时出现的黑条问题？

相关文档

图说设计模式图解 HTTP皮卡智能 一键抠图神器 API 文档Google 地图入门NSIS 图文教程集锦
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.