jQuery_jquery로 퍼즐 게임 만들기

소스코드 아이디어 분석:

【1】그림 격자를 생성하는 방법은 두 가지 방법을 생각합니다.

(1) 이 큰 그림을 16개의 작은 그림으로 자른 후 img 태그의 src를 사용합니다

(2) 큰 이미지가 하나만 있고, CSS의 background-position을 사용하여 각 요소의 배경 이미지를 잘라서 배치하는데, 16개의 배열 [0,0], [-150,0], [-300 ,0]..........(저는 이것을 채택합니다)

【2】그림 배경 위치 배열 및 레이아웃 위치 배열

CSS를 사용하여 이미지 위치를 지정하고 자르기로 선택한 후에는 데이터를 생성해야 합니다.

필수 CSS 배경 위치 지정 배열은 다음과 같습니다: [0,0],[-150,0],[-300,0],[-450,0],

　　　　　　 [0,-150],[-150,-150],[-300,-150],[-450,-150],

　　　　　　　[0,-300],[-150,-300],[-300,-300],[-450,-300],

　　　　　　　[0,-450],[-150,-450],[-300,-450],[-450,-450]

그 중 [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);             }
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); //여기서는 3단계에서 판단에 사용되는 CSS 배경 위치 지정 배열에 i를 추가했습니다. 설정하는 데 사용할 필요는 없습니다. CSS 속성을 [bg-i]
태그의 속성으로 설정합니다. aL.push(l[k],l[t]);
This.aBgp[i] = aP;
This.aLayout[i] = aL;             }

[3] 완료 여부 확인

두 번째 요소(div)는 CSS 배경 위치 this.aBgp[1](값은 [-150,0,1])을 적용하고 무작위로 할당된 레이아웃 위치는 this.aLayout[3]입니다(여기서 3은 무작위입니다). 생성됨) (값은 [453,0]), 왼쪽:453px,상단:0

이 요소를 이동하면 자체 구조의 순서가 아닌 letf 및 top 값이 변경됩니다. 이 요소의 왼쪽 및 위쪽 값을 가져옵니다(왼쪽으로 이동한 경우:151px, top:0). 그런 다음 this.aLayout[1]의 값 [151,0]에서 판단을 사용합니다(1 인덱스는 자체 레이블 속성의 [bg-i]=1이고 this.aBgp[1]의 인덱스입니다). 같음은 요소가 이동했음을 의미합니다. 뒤쪽 위치가 정확합니다.

상세코드:

코드 복사 코드는 다음과 같습니다.

/*
버전:2.0
*/
기능 GyPuzzleGame(옵션){
This.target = $(option.target);
This.data = option.data; //이미지 데이터
This.opt = 옵션;
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);
            }
               newArry 반환;
},
setPos:함수(){
for(var i=0;i 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:함수(항목){
               var _that = 이,
= 0;
Item.each(함수(){
              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({'왼쪽':레이아웃[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'),
                _저것=이것;
            var    hasElem = function(){
                    var t = false;
                    $div.each(함수(){
                        if($(this).hasClass("on")){
                            t = 참;
                        }
                    });
                    돌아오세요;
                };
            //클릭
            $div.click(함수(){
                var $this = $(this);   
                if(hasElem()&&!$this.hasClass("on")){
                    var index = $('.on').index();
                    if($div.eq(index).is(':animated')||$this.is(':animated')){
                        false를 반환합니다.
                    }
                    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});
                    $div.eq(index).css({'z-index':'1'}).animate({'left':myl,'top':myt},function(){
                            $(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({
        '데이터':'images/03.jpg',
        '대상':'#pA',
        '개수':8,
        '성공':함수(선택){
            opt.target.append('

恭喜过关

');
        }
    });

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.