拼图游戏拖拽

<!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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,539评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,911评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,337评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,723评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,795评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,762评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,742评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,508评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,954评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,247评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,404评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,104评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,736评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,352评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,557评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,371评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,292评论 2赞 352

拼图游戏拖拽

推荐阅读更多精彩内容