나는 최근에 간단한 모바일 직소 퍼즐 게임을 만들었습니다. 코드는 간단하고 이해하기 쉽습니다. 나는 말도 안되는 말을하지 않을 것입니다. 모두가 모든 것을 증명하게하십시오!
먼저 렌더링을 살펴 보겠습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> <meta name = "viewport"id = "viewport"content = "width ="device-width = device-width, 초기 스케일 = 1.0, 사용자-스케일 가능 = no "style 유형 = "text/css"> html, body, ul, li, ol, dl, dd, dt, p, p, h1, h2, h3, h5, h6, 폼, 필드 세트, 범례, img {마진 : 0; 패딩 : 0} body {배경 : 핑크;} {pictth : 300px; 300px; URL ( 'IMG/300.JPG'); 위치 : 상대; 마진; 마진 : 50PX AUTO;}. PIC {width : 97px; 높이 : 97px; float : 왼쪽; 배경 : URL ( 'IMG/300.jpg'); 위치 : 절대; 전이 : 모든 0.5S EASE 0; 절대; 색상 : 빨간색; 상단 : 15px; 왼쪽 : 300px; font-size : 20px;} </style> </head> <body> <div class = '컨트롤러'> <h1> Jigsaw 퍼즐 </h1> <버튼 id = 'go'> go '> go'> go '> go'> <div id = 'div dath'> <div '> <div'> <div '> <div'> <div '> <div'> <div '> <div'> <go '> 스타일 = '배경 위치 : 0px 0px; 왼쪽 : 0px; 상단 : 0px;'> </div> <div data-index = '2'style = '배경-위치 : -100px 0px; 왼쪽 : 100px; 상단 : 0px;'> </div> <div data-index = '3 style ='배경 위치 : -200px 0px; 왼쪽 : 200px; 상단 : 0px; '> </div> </div> <div data-index ='4 'style ='배경 위치 : 0px -100px; 왼쪽 : 0px; top : 100px; '> </div data-index ='5 '스타일 ='배경-포지션 : -100px -100px; 왼쪽 : 100px; '/'/div x data-index = '6'style = '배경 위치 : -200px -100px; 왼쪽 : 200px; 상단 : 100px;'> </div> <div data-index = '7'style = '배경-위치 : 0px -200px; 왼쪽 : 0px; top : 200px;'> '>'</div-index = '8'style = -100px -200px; 왼쪽 : 100px; 상단 : 200px; '> </div> <cript> var picbox = document.getElementByid ('picbox '); var pic = document.querySelectorall ('. pic '); var picwidth = pic [0] .offsetWidth; var picheight = pic [0] .OffSetHeight; varbox boxobbox.focbox.fodbox picboxHeight = picbox.offSetheight; var go = document.getElementById ( 'go'); var times = document.getElementById ( 'times'); // time. var dx, dy, newleft, newtop, starttime, endtime; go.addeventListener ( 't {pic [i] .style.display = "block"; // 게임이 시작됩니다. b) {random (a, b);}}) for (var i = 0; i <pic.length; i ++) {pic [i] .adeventListener ( 'touchstart', function (e) {this.style.zindex = 100; top.dx = e.targettouches [0] .pagex- this.offsetleft; dy를 트리거하는 수평 상태 dy = e.targetTouches [0]. this.starty = this.offsetTop; // 오프셋 탑 등의 값의 차이는 전자가 px를 포함하지 않고 후자는 pxthis.style.transition = 'none';}); pic [i] .addeventListener ( 't 드래그 변경의 수평 상태 NewTop = e.targetTouches [0] .pagey-dy; if (newleft <= -picwidth/2) {// 경계 코드 블록을 제한하면 드래그 영역은 경계의 절반을 초과 할 수 없습니다. if (newLeft> = (picboxWidth-PicWidth/2)) {newLeft = (picboxWidth-picwidth/2);} if (newTop <= -picheight/2) {newTop = -picwidth/2;} else if (newtop> = (PicboxHeight-Picheight/2)) {newTop = (PicboxHeight-Picheight/2); 요소; pic [i] .addeventListener ( 'touchend', function (e) {this.style.zindex = 0; this.style.Transition = 'all 0.5s eason 0s'; // css3 애니메이션 효과 추가 this.endx = e.changedTouches [0] .pagex-dx; this.endy = / / / / / / / / / /// 슬라이드의 입력 요소와 비교하고 var obj = change (e.target, this.endx, this.endy)을 판단하십시오. // exchange 함수를 호출하십시오. _left = obj.style.left; obj.style.left = this.startx+'px'; this.style.left = _left; var _top = obj.style.top; obj.style.top = this.starty+'px'; theys.style.top = _top; var _index = obj.getAttribute ( 'data-index'); obj.setattribute ( 'data-index', this.getAttribute ( 'data-index')); setattribute ( 'data-index', _ index); }}); pic [i] .adeventListener ( 'transitionEnd', function () {if (issuccess ()) {console.log ( 'success!'); // 여기에 청취 이벤트에 버그가 있으며 여러 이벤트가 추가됩니다. change (obj, x, y) {// 교환 함수는 드래그 요소의 위치가 대상의 원래 1/2에 들어 갔는지 여부를 결정합니다. (var i = 0; i <pic.length; i ++) if (math.abs (pic [i] .offsetleft-x) <= picwidth/2 && math.abs (pic [i] .offsettop-y) <= picheight/2 && pic [i] pic [i]} 현재의 반환 return obj; pic [a]; var bele = pic [b]; var _left; _left = aele.style.left; aele.style.left = ele.style.left; belf.style.left = _left; var _top; _top; var _index; _index = aele.getAttribute ( "data-index"); aele.setAttribute ( "data-index", bele.getAttribute ( "data-index")); ele.setattribute ( "data-index", _ index); i = 0; i <pic.length; i ++) {str+= pic [i] .getAttribute ( 'data-index');} if (str == '123456789') {return true;} return false;} var time; setInterVal (function () {// timeed function, u ... 계속 되려면 date ()); times.innerhtml = (endtime-starttime)/1000 || '';}, 1000) </script> </body> </html>타이밍 기능 추가, 게임 성공 효과 및 음향 효과, 미끄러짐 손가락을위한 맞춤형 이벤트, 왼쪽 및 오른쪽 스트로크, 위아래 스트로크, 추가 포장 등과 같은 코드를 최적화하는 방법에는 여러 가지가 있습니다. 어, 생각할 때 코드를 작성하려고 할 수는 없습니다. . 편집자는 나중에 계속 업데이트 할 것입니다. 오늘 여기 오자. 나는 당신이 그것을 좋아하기를 바랍니다!