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('

恭喜过关

');
        }
    });

관련 라벨：

jquery 拼图

원천：php.cn

이전 기사：Javascript_javascript 기술의 innerHTML 사용 분석 예 다음 기사：JS를 사용하여 점, 선 및 표면 그리기_javascript 기술

본 웹사이트의 성명

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

저자별 최신 기사

• BlackRock은 BTC를 독특한 다각화자로 분류합니다
  2024-09-20 15:51:33
• 인터넷 컴퓨터(ICP) 가격 예측: ICP 가격이 24달러에 도달할까요?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• Top Meme Coins to Invest In Today
  2024-09-20 15:39:32
• Floki (FLOKI) Price Prediction: Will the Revamped Marketing Help Floki Catch Up on October Gains?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• 如何下载小狐狸支付平台的Apple版本
  2024-09-20 14:53:01
• 초보자가 MetaMask를 거래하는 방법과 장점과 단점
  2024-09-20 14:51:01

최신 이슈

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...

에서 2024-04-05 09:26:49

0

1

1418

최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...

에서 2024-04-04 18:40:04

0

1

3528

북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...

에서 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...

에서 2024-04-04 12:53:48

0

1

303

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• 속도 추적기 사용법