拼圖游戲拖拽

<!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>
   //參數(shù)設(shè)置

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

//背景圖
var backgroundImge = "";

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

//設(shè)置結(jié)束

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'));
    //實(shí)現(xiàn)自定義數(shù)量，需要增加創(chuàng)建td,和*class數(shù)組
    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++) {
        //打亂拼圖塊:設(shè)置td class（包含背景圖定位），id為當(dāng)前td位置，class，trueid為實(shí)際位置
        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() {
    //隨機(jī)分割圖片
    clock = setInterval("random_disorder()", 40);

    //監(jiān)聽td部分鼠標(biāo)拖動
    for (i = 0; i < td.length; i++) {
        td[i].addEventListener('mousedown', function() {
            //拖拽
            drag(event.target, event.clientX, event.clientY, successFunction);
        });

    }
});

initTable();
  </script>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容