jQuery製作拼圖小遊戲_jquery

原始碼思路分析：

【一】如何產生圖片網格，我想到兩種方法：

　　　（1）把這張大圖切成16張小圖，然後用img標示的src

　　　（2）只有一張大圖，然後每個元素的背景圖用css的background-position進行切割定位，這樣就需要16個數組[0,0],[-150,0],[-300 ,0]..........（我採用這種）

【二】圖片背景定位數組與版面定位數組

　　在選擇了使用CSS定位切圖，就需要產生資料。

     所需的css背景 定位陣列為：[0,0],[-150,0],[-300,0],[-450,0],

　　　　　　　　　　　　　　  [0,-150],[-150,-150],[-300,-150],[-150,-150],[-300,-150],[-450,1150],　　　　　　　　　　　　　  　[0,-300],[-150,-300],[-300,-300],[-150,-300],[-300,-300],[-450-303],　　　　　　　　　　　　　  　[0,-450],[-150,-450],[-300,-450],[-150,-450],[-300,-450],[-450,403]

     它們當中都用到了[0,-150,-300,-450]其中的值（就是我定義圖片高，寬150的倍數值），所以就利用這個值通過for(){}自動生成數組

複製程式碼 程式碼如下: 　　　　　　//this.nCol在這裡是4 --- 因為我的拼圖是4*4

         // this.nArea是150，是每張圖片的寬，高（600px/4）--大圖是600*600

            var l = [],
                p = [];
            for(var n=0;n l.push(n*(this.nArea 1));     //產生[0,151,302,453] 網格的佈局定位數組，因為我的效果需要邊框（圖中的綠色邊框），所以與css背景定位數組就不一樣了
                p.push(-n*this.nArea);         // 產生了[0,-150,-300,-4555]是上面定位值的，而產生了[0,-150,-300,-4550]就是上面定位值的，C30SS             }
            for(var i=0;i 　　　　　　          var t = parseInt(i/this.nCol),
                        k = i - this.nCol*t,
                        aP = [],
                        aL = [];
aP.push(p[k],p[t],i); //這裡我給css背景定位數組額外加了i，是為第3步判斷用的，不需要拿來設定css屬性的，我把它設定為標籤的屬性裡[bg-i]
                    aL.push(l[k],l[t]);
                    this.aBgp[i] = aP;
                    this.aLayout[i] = aL;                         }

【三】判斷是否完成

        第二個元素（div）應用了css背景定位  this.aBgp[1] （值為[-150,0,1]） ，而隨機分配的佈局定位假如是this.aLayout[3] (這裡的3是隨機產生的)（值為[453,0]），那麼left:453px,top:0；

       挪動這個元素，改變的是它的letf，top值，而不是本身結構的順序，取得這個元素的left,top的值（假如是挪到left:151px,top:0），然後拿來與this.aLayout[1]的值[151,0]（裡面的1索引，就是本身標籤屬性的[bg-i]=1也是this.aBgp[1] 的索引）判斷，相等就說明這個元素挪動後的位置是正確。

詳細程式碼：

複製程式碼 程式碼如下:

/*
    version:2.0
    */
    function GyPuzzleGame(option){
        this.target = $(option.target);
        this.data = option.data; //圖片資料
        this.opt = option;
        this.nLen = option.count; //幾張拼圖
        this.aColLayout = option.aColLayout || [0,151,302,453];//佈局橫向陣列
        this.aRowLayout = option.aRowLayout || [0,151];//佈局垂直陣列
        this.aColBgp = option.aColBgp || [0,-150,-300,-450];//佈局橫向陣列
        this.aRowBgp = option.aRowBgp || [0,-150];//佈局垂直陣列
        this.nCol = this.aColLayout.length;
        this.nRow = this.aRowLayout.length;
        this.aLayout = []; //佈局陣列
        this.aBgp = []; //css背景定位陣列
        this.init();
    }
    GyPuzzleGame.prototype = {
        getRand:function(a,r){
            var arry = a.slice(0),
                newArry = [];
            for(var n=0;n                 var nR = parseInt(Math.random()*arry.length);
                newArry.push(arry[nR]);
                arry.splice(nR,1);
            }
            return newArry;
        },
        setPos:function(){
            for(var i=0;i                 var t = parseInt(i/this.nCol),
                    l = i - this.nCol*t,
                    aP = [],
                    aL = [];
                aP.push(this.aColBgp[l],this.aRowBgp[t],i);
                aL.push(this.aColLayout[l],this.aRowLayout[t]);
                this.aBgp[i] = aP;
                this.aLayout[i] = aL;               
            }
        },
        isPass:function(item){
            var _that = this,
                is = 0;
            item.each(function(){
                var l = parseInt($(this).css('left')),
                    t = parseInt($(this).css('top')),
                    i = parseInt($(this).attr('data-bgi'));
                if(l==_that.aLayout[i][0]&&t==_that.aLayout[i][1]){
                    is ++;   
                }               
            });
            return is;
        },
        createDom:function(){
            var layout = this.getRand(this.aLayout,this.nLen);
            // console.log(layout);
            for(var n=0;n var t = parseInt(n/this.nCol),
l = n - this.nCol*t;
var html = $('

').
                css({'left':layout[n][0] 'px',
                    '以上':版面配置[n][1] 'px',
                    '背景圖片』:'url('this.data')',
                    '在背景位置上使用 ':this.aBgp[n][0] 'px' ' ' this.aBgp[n][1] 'px'
                });
                this.target.append(html);
            }
        },
        移動：函數（）{
            var $div = this.target.find('.puzzle_list'),
                _that = this;
            var    hasElem = function(){
                    var t = false;
                    $div.each(function(){
                        if($(this).hasClass("on")){
                            t = true;
                        }
                    });
                    回 t;
                };
            // 點選
            $div.click(function(){
                var $this = $(this);   
                if(hasElem()&&!$this.hasClass("on")){
                    var index = $('.on').index();
                    if($div.eq(index).is(':animated')||$this.is(':animated')){
                        回復錯誤；
                    }
                    var l = $div.eq(index).position().left,
                        t = $div.eq(index).position().top,
                        myl = $this.position().left,
                        myt = $this.position().top;
                    $(this).animate({'left':l,'top':t});
                地”                             $(this).removeClass("on");
                            $(this).find('span').remove();
                            $(this).css({'z-index':'0'});
                            if(_that.isPass($div) == _that.nLen){
                                if(typeof _that.opt.success == '函數'){
                                    _that.opt.success({target:_that.target});
                                }
                            }
                    });
                }
                否則{
                    if($this.hasClass("on")){
                        $this.removeClass("on");
                        $this.find('span').remove();
                    }
                    否則{
                        $this.addClass("on").append("");
                    }
                }
            });
        },
        初始化：函數（）{
            // 設定CSS背景定位與元素佈局
            this.setPos();
            // 建立元素
            this.createDom();
            // 挪動圖片
            this.move();
        }
    }
//實例呼叫
    新 GyPuzzleGame({
        'data':'images/03.jpg',
        '目標':'#pA',
        「統計」：8，
        '成功'：函數（opt）{
            opt.target.append('

恭喜過關

');
        }
    });