脑残拼图游戏程序代码

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

<div class="gameWrap">
      <div class="header">
         <div class="begin">开始拼图</div>
      </div>
      <div class="body">
         <div class="sample"><img src="images/dog&cat.jpg"></div>
         <div class="gameBody" id="container">
             <div class="dogcat_1"></div>
             <div class="dogcat_2"></div>
             <div class="dogcat_3"></div>
             <div class="dogcat_4"></div>
             <div class="dogcat_5"></div>
             <div class="dogcat_6"></div>
             <div class="dogcat_7"></div>
             <div class="dogcat_8"></div>
             <div class="dogcat_9"></div>
             <div class="dogcat_10"></div>
             <div class="dogcat_11"></div>
             <div class="dogcat_12"></div>
             <div class="dogcat_13"></div>
             <div class="dogcat_14"></div>
             <div class="dogcat_15"></div>
         </div>
      </div>
    </div>

.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和设备所用的格式。点完成就在你的桌面上生成一个包含很多张图片的文件夹了。

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