找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js拖拽拼图

2018-12-27 分类：JavaScript 阅读(821) 评论(0)
棋牌游戏开发前端
前端小游戏开发
游戏开发中的前端
(function () {
    var Divider = (function () {
        var container, ops, map, width, perWidth, height, perHeight;
        var defaults = {
            src: ”,
            cols: 10,
            rows: 10,
            max: 500,
            gap: 2
        };
        var init = function (params) {
            var params = params || {};
            ops = extend(defaults, params);
            if (!ops.src) {
                console.error(“lack of iamge!”);
                return;
            }
            container = document.createDocumentFragment();
            map = [];
            particle();
        }
        var particle = function () {
            var max = ops.max, rows = ops.rows, cols = ops.cols, src = ops.src;
            var img = new Image();
            img.src = src;
            img.onload = function () {
                var fix = fixSize(this.width, this.height, max)
                width = fix.width;
                height = fix.height;
                perWidth = Math.round(width / cols);
                perHeight = Math.round(height / rows);
                for (var i = 0; i < rows; i++) {
                    var offsetY = i perHeight;
                    for (var j = 0; j < cols; j++) {
                        var offsetX = (j % cols) perWidth;
                        map.push({
                            x: offsetX,
                            y: offsetY
                        })
                    }
                }
                map = randomArray(map);
                draw();
            }
        }
        var draw = function () {
            for (var i = 0, l = map.length; i < l; i++) {
                var d = create(“div”);
                d.style.cssText = “;width:” + (perWidth – ops.gap2) + “px;height:” + (perHeight – ops.gap2) + “px;background:url(” + ops.src + “) ” + (-map[i].x) + “px ” + (-map[i].y) + “px no-repeat;background-size:” + width + “px ” + height + “px;border-radius:5px;position:absolute;top:” + map[i].y + “px;left:” + map[i].x + “px”;
                d.className = “item”;
                d.index = i;
                container.appendChild(d);
            }
            var d = create(“div”);
            d.style.cssText = “width:” + width + “px;height:” + height + “px;margin:0 auto;position:relative;”;
            d.appendChild(container);
            document.body.appendChild(d);
            DrawSort.init(d, map);
        }
        var randomArray = function (arr) {
            return arr.sort(function () {
                return !!(Math.random() > 0.5);
            })
        }
        var create = function (tagname) {
            return document.createElement(tagname);
        }
        var fixSize = function (width, height, max) {
            if (width < max && height < max) {
                return {
                    width: width,
                    height: height
                }
            }
            if (width > height) {
                if (width > max) {
                    var ratio = max / width;
                    return {
                        width: max,
                        height: height ratio
                    }
                } else {
                    return {
                        width: width,
                        height: height
                    }
                }
            } else {
                if (height > max) {
                    var ratio = max / height;
                    return {
                        width: width ratio,
                        height: max
                    }
                } else {
                    return {
                        width: width,
                        height: height
                    }
                }
            }
        }
        var setCols = function (col) {
            cols = col;
        }
        var setRows = function (row) {
            rows = row;
        }
        var extend = function (defaults, params) {
            for (var index in params) {
                if (params.hasOwnProperty(index)) {
                    defaults[index] = params[index];
                }
            }
            return defaults;
        }
        return {
            init: init,
            setCols: setCols,
            setRows: setRows
        }
    })();
    var DrawSort = (function () {
        var container, items, zx, map;
        var init = function (contain, mapx) {
            map = mapx || [];
            container = contain;
            items = container.childNodes;
            zx = 0;
            for (var i = 0, l = items.length; i < l; i++) {
                drap(items[i]);
            }
        }
        var drap = function (obj) {
            obj.onmousedown = function (e) {
                var oNear = null, ev = e || window.event;
                var disX = ev.pageX – this.offsetLeft – container.offsetLeft;
                var disY = ev.pageY – this.offsetTop – container.offsetTop;
                this.className = ‘cur’;
                this.style.zIndex = zx++;
                if (obj.setCapture) {
                    obj.setCapture();
                } else {
                    window.captureEvents(Event.MOUSEMOVE);
                }
                document.onmousemove = function (e) {
                    var ev = e || window.event,
                        w = ev.pageX – disX – container.offsetLeft,
                        h = ev.pageY – disY – container.offsetTop;
                    w < 0 && (w = 0);
                    w >= (container.offsetWidth – obj.offsetWidth) && (w = container.offsetWidth – obj.offsetWidth);
                    h < 0 && (h = 0);
                    h >= (container.offsetHeight – obj.offsetHeight) && (h = container.offsetHeight – obj.offsetHeight);
                    obj.style.top = h + “px”;
                    obj.style.left = w + “px”;
                    for (var i = 0, l = items.length; i < l; i++) {
                        items[i].className = “cur”;
                    }
                    oNear = findNearest(obj);
                    oNear && (oNear.className = “hig”);
                }
                document.onmouseup = function () {
                    if (obj.releaseCapture) {
                        obj.releaseCapture();
                    } else {
                        window.releaseEvents(Event.MOUSEMOVE || Event.MOUSEUP);
                    }
                    document.onmouseup = null;
                    document.onmousemove = null;
                    for (var i = 0, l = items.length; i < l; i++) {
                        items[i].className = “”;
                    }
                    if (oNear) {
                        oNear.style.zIndex = zx++;
                        startMove(obj, map[oNear.index]);
                        startMove(oNear, map[obj.index]);
                        oNear.index = [obj.index, obj.index = oNear.index][0];
                    } else {
                        startMove(obj, map[obj.index]);
                    }
                }
            }
        }
        var findNearest = function (obj) {
            var res, distances = [], elems = [], min = 9999999, minItem;
            for (var i = 0, l = items.length; i < l; i++) {
                res = isButt(obj, items[i]);
                if (items[i] != obj && res) {
                    distances.push(calDis(obj, items[i]));
                    elems.push(items[i]);
                }
            }
            distances.map(function (item, i) {
                if (item < min) {
                    min = item;
                    minItem = elems[i];
                }
            })
            return minItem;
        }
        var isButt = function (a, b) {
            var al = a.offsetLeft,
                at = a.offsetTop,
                alw = al + a.offsetWidth,
                ath = at + a.offsetHeight,
                bl = b.offsetLeft,
                bt = b.offsetTop,
                blw = bl + b.offsetWidth,
                bth = bt + b.offsetHeight;
            if (al > blw || alw < bl || at > bth || ath < bt) {
                return false;
            }
            return true;
        }
        var startMove = function (obj, pos, onEnd) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                doMove(obj, pos, onEnd);
            }, 30);
        }
        var doMove = function (obj, pos, onEnd) {
            var curL = getStyle(obj, “left”), curT = getStyle(obj, “top”), speedL = (pos.x – curL) / 5, speedT = (pos.y – curT) / 5;
            speedL = speedL > 0 ? Math.ceil(speedL) : Math.floor(speedL);
            speedT = speedT > 0 ? Math.ceil(speedT) : Math.floor(speedT);
            if (pos.x == curL && pos.y == curT) {
                clearInterval(obj.timer);
                onEnd && onEnd();
            } else {
                obj.style.left = curL + speedL + “px”;
                obj.style.top = curT + speedT + “px”;
            }
        }
        var getStyle = function (obj, attr) {
            return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]);
        }
        var calDis = function (a, b) {
            return Math.sqrt(Math.pow(a.offsetLeft + a.offsetWidth / 2 – b.offsetLeft – b.offsetWidth / 2, 2) + Math.pow(a.offsetTop + a.offsetHeight / 2 – b.offsetTop – b.offsetHeight / 2, 2));
        }
        return { init: init }
    })();
    window.Divider = window.Divider || Divider;
})()

展示：
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>拖拽拼图</title>
        <meta name=”description” content=”” />
        <meta name=”keywords” content=”” />
        <link href=”” rel=”stylesheet” />
        <style type=”text/css”>
            .cur {
                cursor: move;
            }
            .hig {
                border: 2px dotted #ffffff;
            }
        </style>
    </head>
    <body>
        <script type=”text/javascript”>
            ;(function() {
                var Divider = (function() {
                    var container, ops, map, width, perWidth, height, perHeight
                    var defaults = {
                        src: ”,
                        cols: 10,
                        rows: 10,
                        max: 500,
                        gap: 2,
                    }
                    var init = function(params) {
                        var params = params || {}
                        ops = extend(defaults, params)
                        if (!ops.src) {
                            console.error(‘lack of iamge!’)
                            return
                        }
                        container = document.createDocumentFragment()
                        map = []
                        particle()
                    }
                    var particle = function() {
                        var max = ops.max,
                            rows = ops.rows,
                            cols = ops.cols,
                            src = ops.src
                        var img = new Image()
                        img.src = src
                        img.onload = function() {
                            var fix = fixSize(this.width, this.height, max)
                            width = fix.width
                            height = fix.height
                            perWidth = Math.round(width / cols)
                            perHeight = Math.round(height / rows)
                            for (var i = 0; i < rows; i++) {
                                var offsetY = i * perHeight
                                for (var j = 0; j < cols; j++) {
                                    var offsetX = (j % cols) * perWidth
                                    map.push({
                                        x: offsetX,
                                        y: offsetY,
                                    })
                                }
                            }
                            map = randomArray(map)
                            draw()
                        }
                    }
                    var draw = function() {
                        for (var i = 0, l = map.length; i < l; i++) {
                            var d = create(‘div’)
                            d.style.cssText =
                                ‘;width:’ +
                                (perWidth – ops.gap * 2) +
                                ‘px;height:’ +
                                (perHeight – ops.gap * 2) +
                                ‘px;background:url(‘ +
                                ops.src +
                                ‘) ‘ +
                                -map[i].x +
                                ‘px ‘ +
                                -map[i].y +
                                ‘px no-repeat;background-size:’ +
                                width +
                                ‘px ‘ +
                                height +
                                ‘px;border-radius:5px;position:absolute;top:’ +
                                map[i].y +
                                ‘px;left:’ +
                                map[i].x +
                                ‘px’
                            d.className = ‘item’
                            d.index = i
                            container.appendChild(d)
                        }
                        var d = create(‘div’)
                        d.style.cssText =
                            ‘width:’ +
                            width +
                            ‘px;height:’ +
                            height +
                            ‘px;margin:0 auto;position:relative;’
                        d.appendChild(container)
                        document.body.appendChild(d)
                        DrawSort.init(d, map)
                    }
                    var randomArray = function(arr) {
                        return arr.sort(function() {
                            return !!(Math.random() > 0.5)
                        })
                    }
                    var create = function(tagname) {
                        return document.createElement(tagname)
                    }
                    var fixSize = function(width, height, max) {
                        if (width < max && height < max) {
                            return {
                                width: width,
                                height: height,
                            }
                        }
                        if (width > height) {
                            if (width > max) {
                                var ratio = max / width
                                return {
                                    width: max,
                                    height: height * ratio,
                                }
                            } else {
                                return {
                                    width: width,
                                    height: height,
                                }
                            }
                        } else {
                            if (height > max) {
                                var ratio = max / height
                                return {
                                    width: width * ratio,
                                    height: max,
                                }
                            } else {
                                return {
                                    width: width,
                                    height: height,
                                }
                            }
                        }
                    }
                    var setCols = function(col) {
                        cols = col
                    }
                    var setRows = function(row) {
                        rows = row
                    }
                    var extend = function(defaults, params) {
                        for (var index in params) {
                            if (params.hasOwnProperty(index)) {
                                defaults[index] = params[index]
                            }
                        }
                        return defaults
                    }
                    return {
                        init: init,
                        setCols: setCols,
                        setRows: setRows,
                    }
                })()
                var DrawSort = (function() {
                    var container, items, zx, map
                    var init = function(contain, mapx) {
                        map = mapx || []
                        container = contain
                        items = container.childNodes
                        zx = 0
                        for (var i = 0, l = items.length; i < l; i++) {
                            drap(items[i])
                        }
                    }
                    var drap = function(obj) {
                        obj.onmousedown = function(e) {
                            var oNear = null,
                                ev = e || window.event
                            var disX =
                                ev.pageX –
                                this.offsetLeft –
                                container.offsetLeft
                            var disY =
                                ev.pageY – this.offsetTop – container.offsetTop
                            this.className = ‘cur’
                            this.style.zIndex = zx++
                            if (obj.setCapture) {
                                obj.setCapture()
                            } else {
                                window.captureEvents(Event.MOUSEMOVE)
                            }
                            document.onmousemove = function(e) {
                                var ev = e || window.event,
                                    w = ev.pageX – disX – container.offsetLeft,
                                    h = ev.pageY – disY – container.offsetTop
                                w < 0 && (w = 0)
                                w >= container.offsetWidth – obj.offsetWidth &&
                                    (w =
                                        container.offsetWidth – obj.offsetWidth)
                                h < 0 && (h = 0)
                                h >=
                                    container.offsetHeight – obj.offsetHeight &&
                                    (h =
                                        container.offsetHeight –
                                        obj.offsetHeight)
                                obj.style.top = h + ‘px’
                                obj.style.left = w + ‘px’
                                for (var i = 0, l = items.length; i < l; i++) {
                                    items[i].className = ‘cur’
                                }
                                oNear = findNearest(obj)
                                oNear && (oNear.className = ‘hig’)
                            }
                            document.onmouseup = function() {
                                if (obj.releaseCapture) {
                                    obj.releaseCapture()
                                } else {
                                    window.releaseEvents(
                                        Event.MOUSEMOVE || Event.MOUSEUP,
                                    )
                                }
                                document.onmouseup = null
                                document.onmousemove = null
                                for (var i = 0, l = items.length; i < l; i++) {
                                    items[i].className = ”
                                }
                                if (oNear) {
                                    oNear.style.zIndex = zx++
                                    startMove(obj, map[oNear.index])
                                    startMove(oNear, map[obj.index])
                                    oNear.index = [
                                        obj.index,
                                        (obj.index = oNear.index),
                                    ][0]
                                } else {
                                    startMove(obj, map[obj.index])
                                }
                            }
                        }
                    }
                    var findNearest = function(obj) {
                        var res,
                            distances = [],
                            elems = [],
                            min = 9999999,
                            minItem
                        for (var i = 0, l = items.length; i < l; i++) {
                            res = isButt(obj, items[i])
                            if (items[i] != obj && res) {
                                distances.push(calDis(obj, items[i]))
                                elems.push(items[i])
                            }
                        }
                        distances.map(function(item, i) {
                            if (item < min) {
                                min = item
                                minItem = elems[i]
                            }
                        })
                        return minItem
                    }
                    var isButt = function(a, b) {
                        var al = a.offsetLeft,
                            at = a.offsetTop,
                            alw = al + a.offsetWidth,
                            ath = at + a.offsetHeight,
                            bl = b.offsetLeft,
                            bt = b.offsetTop,
                            blw = bl + b.offsetWidth,
                            bth = bt + b.offsetHeight
                        if (al > blw || alw < bl || at > bth || ath < bt) {
                            return false
                        }
                        return true
                    }
                    var startMove = function(obj, pos, onEnd) {
                        clearInterval(obj.timer)
                        obj.timer = setInterval(function() {
                            doMove(obj, pos, onEnd)
                        }, 30)
                    }
                    var doMove = function(obj, pos, onEnd) {
                        var curL = getStyle(obj, ‘left’),
                            curT = getStyle(obj, ‘top’),
                            speedL = (pos.x – curL) / 5,
                            speedT = (pos.y – curT) / 5
                        speedL =
                            speedL > 0 ? Math.ceil(speedL) : Math.floor(speedL)
                        speedT =
                            speedT > 0 ? Math.ceil(speedT) : Math.floor(speedT)
                        if (pos.x == curL && pos.y == curT) {
                            clearInterval(obj.timer)
                            onEnd && onEnd()
                        } else {
                            obj.style.left = curL + speedL + ‘px’
                            obj.style.top = curT + speedT + ‘px’
                        }
                    }
                    var getStyle = function(obj, attr) {
                        return parseFloat(
                            obj.currentStyle
                                ? obj.currentStyle[attr]
                                : getComputedStyle(obj, null)[attr],
                        )
                    }
                    var calDis = function(a, b) {
                        return Math.sqrt(
                            Math.pow(
                                a.offsetLeft +
                                    a.offsetWidth / 2 –
                                    b.offsetLeft –
                                    b.offsetWidth / 2,
                                2,
                            ) +
                                Math.pow(
                                    a.offsetTop +
                                        a.offsetHeight / 2 –
                                        b.offsetTop –
                                        b.offsetHeight / 2,
                                    2,
                                ),
                        )
                    }
                    return { init: init }
                })()
                window.Divider = window.Divider || Divider
            })()
            Divider.init({
                src:
                    ‘http://image142-c.poco.cn/mypoco/myphoto/20130517/04/56102801201305170359264222804411261_000.jpg?999x666_120’,
                cols: 5,
                rows: 5,
            })
        </script>
    </body>
</html>
游戏开发是wed前端开发吗
游戏开发 前端引擎
游戏开发和前端开发哪个好
赞(0)
前端开发者 » 前端开发js拖拽拼图
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论