js拖拽拼图游戏(原创)

Html

Css

body {
	background-color:rgb(247,238,217);
}
/*div#img img {
	width:500px;
	height:500px;
}
*/

div#GameButton {
	width:120px;
	margin:0 auto;
}
.img0 {
	background-repeat:no-repeat;
	background-position:0px 0px;
}
.img1 {
	background-repeat:no-repeat;
	background-position:-168px 0px;
}
.img2 {
	background-repeat:no-repeat;
	background-position:-336px 0px;
}
.img3 {
	background-repeat:no-repeat;
	background-position:0px -168px;
}
.img4 {
	background-repeat:no-repeat;
	background-position:-168px -168px;
}
.img5 {
	background-repeat:no-repeat;
	background-position:-336px -168px;
}
.img6 {
	background-repeat:no-repeat;
	background-position:0px -336px;
}
.img7 {
	background-repeat:no-repeat;
	background-position:-168px -336px;
}
.img8 {
	background-repeat:no-repeat;
	background-position:-336px -336px;
}
td {
	width:168px;
	height:168px;
	background-size:504px 504px;
}

//参数设置

//拼图成功后的提示。
var successFunction = function() {
    alert("成功");
};

//背景图
var backgroundImge = "";

//被拼图
var mainImge = "http://www.jq22.com/tp/15667e64-8ba7-43dc-8de1-3ec9ae13a457.jpg";

//设置结束

var td = [];

td = document.getElementsByTagName('td');
var Margin = parseInt(document.getElementById('img').currentStyle ? parseInt(screen.availWidth) * 0.31 : window.getComputedStyle(document.getElementById("img"), null)['marginLeft']);
//alert(Margin);
var i;
var used = [];
var clock;
var flashClock;
var flashClock2;
var stop = 0;

var makeTD = {
    leftTop: 0,
    rightButton: 0
};
var makeTable = [];

function get_Random(maxNum) {
    return Math.floor(Math.random() * maxNum);
}

function getCss(elementObj, key) {
    return elementObj.currentStyle ? elementObj.currentStyle[key] : window.getComputedStyle(elementObj, false)[key];
}

function contains(arr, obj) {
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) {
            return true;
        }
    }
    return false;
}

function flashBack() {
    var bodyDom = document.getElementsByTagName('body')[0];
    bodyDom.style.backgroundImage = "url(img/fashBg.jpg)";
}

function flash2() {
    document.getElementsByTagName("body")[0].style.backgroundImage = "url(img/flash2.jpg)"
}

function flash() {
    var bodyDom = document.getElementsByTagName('body')[0];
    bodyDom.style.backgroundImage = "url(img/flash1.jpg)";
}

function getOverlay(_hover) {
    var _Hover = new Object();
    _Hover.middleX = parseInt(getCss(_hover, 'left')) + parseInt(getCss(_hover, 'width')) / 2;
    _Hover.middleY = parseInt(getCss(_hover, 'top')) + parseInt(getCss(_hover, 'height')) / 2;
    for (i = 0; i < makeTable.length; i++) {

if ((makeTable[i].left < _Hover.middleX && _Hover.middleX < makeTable[i].right) && (makeTable[i].top < _Hover.middleY && _Hover.middleY < makeTable[i].bottom)) {
            return i;
        }
    }
}

function isWin() {

for (i = 0, td = document.getElementsByTagName('td'); i < td.length; i++) {
        if (td[i].getAttribute('id') != td[i].className.slice(3)) {
            return false;
        }
    }
    return true;
}

function initTable(_col, _row) {
    //添加图片
    document.getElementsByTagName("body")[0].style.backgroundImage = "url(" + backgroundImge + ")";
    for (i = 0; i < td.length; i++) {
        td[i].style.backgroundImage = "url(" + mainImge + ")";
    }
    //
    _col = _col ? _col : 3;
    _row = _row ? _row : 3;
    var table_cellSpacing = parseInt(document.getElementsByTagName('table')[0].getAttribute('cellspacing'));
    //实现自定义数量，需要增加创建td,和*class数组
    for (i = 0, td = document.getElementsByTagName('td'); i < td.length; i++) {
        td[i].setAttribute('class', 'img' + i);
        td[i].setAttribute('id', i);
        td[i].style.height = "168px";
        td[i].style.width = "168px";
        td[i].style.position = "absolute";
        td[i].style.left = i % _row * (168 + table_cellSpacing) + (parseInt(i % _row / _row) + 1) * Margin + "px";
        td[i].style.top = parseInt(i / _col) * (168 + table_cellSpacing) + "px";

//确定td位置
        makeTable[i] = new Object();
        makeTable[i].left = parseInt(td[i].style.left);
        makeTable[i].top = parseInt(td[i].style.top);

makeTable[i].right = parseInt(td[i].style.left) + parseInt(td[i].style.width);
        makeTable[i].bottom = parseInt(td[i].style.top) + parseInt(td[i].style.height);

makeTable[i].middleX = (makeTable[i].left + makeTable[i].right) / 2;
        makeTable[i].middleY = (makeTable[i].top + makeTable[i].bottom) / 2;
    }
}

function random_disorder() {
    initTable();
    used = [];
    for (i = 0, td = document.getElementsByTagName('td'); i < td.length; i++) {
        //打乱拼图块:设置td class（包含背景图定位），id为当前td位置，class，trueid为实际位置
        var class_id;
        do {

class_id = get_Random(9);
            if (used.length == 9)
                break;
        }
        while (contains(used, class_id));

td[i].setAttribute('class', 'img' + class_id);
        td[i].setAttribute('trueId', class_id);

used[i] = class_id;

}
    if (stop >= 12) {
        clearInterval(clock);
        stop = 0;
    } else
        stop++;
}

function drag(obj, mouseX, mouseY, successAction) {
    obj.style.zIndex = "2";
    obj.style.zIndex = "2";
    var templateObj = {
        left: getCss(obj, 'left'),
        top: getCss(obj, 'top'),
        currentX: mouseX,
        currentY: mouseY,
        flag: true
    };

document.onmousemove = function(event) {
        var e = event ? event : window.event;
        if (templateObj.flag) {
            var nowX = e.clientX,
                nowY = e.clientY;
            var disX = nowX - templateObj.currentX,
                disY = nowY - templateObj.currentY;
            obj.style.left = parseInt(templateObj.left) + disX + "px";
            obj.style.top = parseInt(templateObj.top) + disY + "px";
            if (event.preventDefault) {
                event.preventDefault();
            }
            return false;
        }

if (typeof callback == "function") {
            callback(parseInt(templateObj.left) + disX, parseInt(templateObj.top) + disY);
        }
    }

for (i = 0; i < td.length; i++) {
        td[i].onmouseup = function() {
            obj.style.zindex = "0";
            obj.style.zIndex = "0";
            templateObj.flag = false;

var oLI = getOverlay(obj);
            var OverLay = makeTable[oLI];

if (getCss(obj, "left") !== "auto") {
                //表格定位
                obj.style.left = makeTable[obj.id].left + "px";
                //图片定位（交换class）
                var oldClass = obj.getAttribute('class');
                //alert(oLI);
                obj.setAttribute('class', document.getElementById(oLI.toString()).getAttribute('class'));
                document.getElementById(oLI).setAttribute('class', oldClass);

}
            if (getCss(obj, "top") !== "auto") {
                //表格定位
                obj.style.top = makeTable[obj.id].top + "px";
            }
            //addTitle();
            if (isWin()) {
                successAction();
            }
        };
    }

}

//重置游戏
document.getElementById('restartGame').addEventListener('click', function() {
   // location.reload(true);
});

//开始游戏
document.getElementById('startGame').addEventListener('click', function() {
    //随机分割图片
    clock = setInterval("random_disorder()", 40);

//监听td部分鼠标拖动
    for (i = 0; i < td.length; i++) {
        td[i].addEventListener('mousedown', function() {
            //拖拽
            drag(event.target, event.clientX, event.clientY, successFunction);
        });

}
});

initTable();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.2.3

立即下载

js拖拽拼图游戏(原创)

代码描述：可方便修改被拼图、背景图，用纯js现实拼图游戏。

在js文件头部，可设置包括成功提示函数等自定义内容。
代码中有详细注释，方便大家修改。

3

最新

发表评论全部评论

暂时没有评论！

ReFormedAH0

2019/12/18 14:58:29

你好，我想请问一下，这部分代码如何改变使原图片被切分成2*2或3*3呢？
for (i = 0, td = document.getelementsbytagname('td'); i < td.length; i++) { td[i].setattribute('class', 'img' + i); td[i].setattribute('id', i); td[i].style.height = "168px"; td[i].style.width = "168px"; td[i].style.position = "absolute"; td[i].style.left = i % _row * (168 + table_cellspacing) + (parseint(i % _row / _row) + 1) * margin + "px"; td[i].style.top = parseint(i / _col) * (168 + table_cellspacing) + "px";
小白。。没看太懂
回复

彼端0

2018/7/10 14:28:25

学习了，非常感谢回复

areyouOk0

2018/1/3 23:29:36

刚好有需求，谢谢
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

n2oo

相关代码

js拖拽拼图游戏(原创)

最新