近来在温故《javascript高级程序设计》这本好书，新生一点感触：如果说jquery是一个美丽的地方，而原生语言是我的朴实的故乡的话，我真是离开故乡好远了！回到故乡了么总得做点事吧，于是写了一个简单的用原生程序写的拼图游戏。不怎么考虑DOM性能问题。

     
      
      
         
       
        开始拼图
       
      
      
      
      
         
       
        
       
         
       
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
             
        
         
       
      
      
    
     

.gameWrap{
          margin:0 auto;    }    .begin{
          width:150px;       height:30px;       background:#f27b04;       text-align:center;       line-height:30px;       color:#fff;       margin:10px auto;    }    .sample{
          width:300px;       height:169px;       float:left;       margin-right:10px;    }    .sample img{
          width:300px;       height:169px;    }    .gameBody{
          width:900px;       float:left;       position:relative;       border:1px solid red;    }    .gameBody div{
          width:180px;       height:169px;       float:left;    }    .gameBody div img{
          width:180px;       height:169px;    }    /*各个图片背景*/    .dogcat_1{
         background:url('images/dog&cat_01.png');    }    .dogcat_2{
         background:url('images/dog&cat_02.png');    }    .dogcat_3{
         background:url('images/dog&cat_03.png');    }    .dogcat_4{
         background:url('images/dog&cat_04.png');    }    .dogcat_5{
         background:url('images/dog&cat_05.png');    }    .dogcat_6{
         background:url('images/dog&cat_06.png');    }    .dogcat_7{
         background:url('images/dog&cat_07.png');    }    .dogcat_8{
         background:url('images/dog&cat_08.png');    }    .dogcat_9{
         background:url('images/dog&cat_09.png');    }    .dogcat_10{
         background:url('images/dog&cat_10.png');    }    .dogcat_11{
         background:url('images/dog&cat_11.png');    }    .dogcat_12{
         background:url('images/dog&cat_12.png');    }    .dogcat_13{
         background:url('images/dog&cat_13.png');    }    .dogcat_14{
         background:url('images/dog&cat_14.png');    }    .dogcat_15{
         background:url('images/dog&cat_15.png');    }

document.querySelectorAll( '.begin' )[0].onclick = function() {        //一个空数组，你要拼图，那你是不是得把很多张图片都打乱的呀，我这边有15张图片，于是我需要一个包含15个1-15的随机数的数组        var indexArray = [];        (function() {            //不到15个随机数组誓不罢休 ，while就做到了            while( indexArray.length < 15 ) {                //随机产生1-15的一个数                v = Math.floor( Math.random() * 15 + 1 );                //如果这个新数组里面不包含新产生的随机数，那就把新随机数放进数组里面                var ifRepeat = indexArray.every( function( item , index , array ) {                    return v != item;                } );                if( ifRepeat ) {                    indexArray.push( v );                }            }        })();        // 15张图片的DIV们        var $pictures = document.querySelectorAll( '.gameBody div' );        // contain是游戏主要界面div        var container = document.getElementById( 'container' );        // fromEle是你移动的那张图片，toEle是你想放上去的那张图片        var fromEle = null;        var var        toEle = null;        // 在以下这个for循环中，初始化了游戏界面，并绑定了一些事件        for( var i = 0 ; i < $pictures.length ; i ++ ) {            // 这里应用上了刚才产生随机数的数组            $pictures[i].className = "dogcat_" + indexArray[i];            // 当点击了图片的时候            $pictures[i].onmousedown = function( e ) {                fromEle = this;                //  复制当前这个dom元素，用它来移动，而被点击的元素停留在原来的位置                var clone = this.cloneNode( true );                container.appendChild( clone );                clone.setAttribute( 'moving' , 'true' );                clone.style.opacity = 0.8;                clone.style.position = "absolute";                // 让复制出来的元素停留在被点击元素的周围，用各种数据测了一下，400 和 100这个两个数字可用                clone.style.left = e.pageX - 400 + "px";                clone.style.top = e.pageY - 100 + "px";                clone.onmousemove = function( e ) {                    if( this.getAttribute( 'moving' ) == 'true' ) {                        // 每一个clone元素都在相对于#container这个div绝对定位的，container他自己就是大约距离顶部100，距离左边400的样子，所以e.pageX-400就相当于                        // clone元素相对于#container元素的左边的距离，那么顶部也是一样的道理。对于简单的页面是这样的                        clone.style.left = e.pageX - 400 + "px";                        clone.style.top = e.pageY - 100 + "px";                        // 在拖动图片的过程中，你得判断用户想把clone放在哪个目标图片上吧，建议你先自己想想看。我这边的实现呢是这样：获取鼠标相对于#contain的位置，然后遍历                        // 获取每一个div相对于#container的位移，每一个div的宽度和高度分别是180px/169px，如果mouseX和mouseY的值分别大于div的X位移并且小于X+180，                        // 再加上对Y位移的判断，可以认为鼠标在某一个div上面                        var mouseX = e.pageX - container.offsetLeft;//鼠标距离container左边框的距离                        var mouseY = e.pageY - container.offsetTop;//鼠标距离container顶边框的距离                        for( var i = 0 ; i < $pictures.length ; i ++ ) {                            var offLeft = $pictures[i].offsetLeft;                            var offTop = $pictures[i].offsetTop;                            if( mouseX > offLeft && mouseX < offLeft + 180 && mouseY > offTop && mouseY < offTop + 169 ) {                                // 当找到目标元素的时候，给他加一个边框                                $pictures[i].style.border = "6px solid #f27b04";                                $pictures[i].style.width = "168px";                                $pictures[i].style.height = "157px";                                $pictures[i].setAttribute( "ifmovehere" , 'true' );                                toEle = $pictures[i];                            } else {                                $pictures[i].style.border = "0px";                                $pictures[i].style.width = "180px";                                $pictures[i].style.height = "169px";                                $pictures[i].title = "";                                $pictures[i].setAttribute( "ifmovehere" , 'false' );                            }                        }                    }                }                clone.onmousedown = function() {                    this.setAttribute( 'moving' , 'true' );                }                clone.onmouseup = function() {                    this.setAttribute( 'moving' , 'false' );                    var fromEleClass = fromEle.className;                    fromEle.className = toEle.className;                    toEle.className = fromEleClass;                    container.removeChild( clone );                    toEle.style.border = "0px";                    toEle.style.width = "180px";                    toEle.style.height = "169px";                }            }        }        // 显示一个倒计时，不解释了        var leftTime = 60;        var inter = setInterval( function() {            document.querySelectorAll( '.begin' )[0].innerText = "剩余时间:" + leftTime + "秒";            leftTime --;            if( leftTime == 0 ) {                clearInterval( inter );            }        } , 1000 );    }

 

 

好了，一个简易的拼图游戏制作好了，因为简单也就不考虑dom性能问题了。bug有好几个，但主要的代码都在了。不知道你看到这里有没有想到一个很重要的问题：如何判断拼凑完成啊？呵呵，我没写，昨晚一粗心就落下了，但也刚好，可以给你一个完善的空间。有些也想写一个拼图游戏的童鞋可能对PS裁图很陌生，不知道如何制作15张大小一样的图片，我好人做到底再写一点怎么裁图的方法：

1.打开一张大图，放到ps里面。

2.找到切片工具，用切片工具把整张图片作为一个切片。

3.右击切片，你会看到一个  划分切片 的选项，点击进去以后，你会看到一个水平划分和垂直划分，你应该懂得如何填写数字了吧

4.填好数字以后按  ctrl shift alt s,也就是  存储为web和设备所用的格式。点完成就在你的桌面上生成一个包含很多张图片的文件夹了。

好，希望各位同仁们早日踏入大神之列！