拼图游戏拖拽

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>拼图游戏</title>
  </head>

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

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;
}
.div-box{
 padding-top: 500px;
 overflow: hidden;
 /* float: left; */
}
  </style>

  <body>
    <div class="div-box">
    <div id="img" style="margin: 0 auto;width: 550px;height: 550px;color: yellow;">
      <table cellpadding="0px" cellspacing="5px" width="529px" height="529px" style="overflow: hidden;">
          <tbody><tr>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td></td>
              <td></td>
              <td></td>
          </tr>
      </tbody></table>
  </div>
  <div id="GameButton">
      <button id="startGame">开始游戏</button>
      <button id="restartGame">重置游戏</button>
  </div>
</div>
  </body>
  
  <script>
   //参数设置

//拼图成功后的提示。
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();
  </script>
</html>

推荐阅读更多精彩内容