私は最近、シンプルなモバイルジグソーパズルパズルゲームを作成しました。コードはシンプルで理解しやすいです。ナンセンスはあまり言いません。誰もがすべてを証明させてください！
最初にレンダリングを見てみましょう：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> <meta name = "viewport" id = "viewport" content = "width、device-width、initial-scale = 1.0、user-scalable = no"> <スタイルtype = "text/css"> html、body、ul、li、ol、dl、dd、dt、p、h1、h2、h3、h4、h5、h6、form、fieldset、legent、img {margin：0; padding：0} body {background：pink;}＃picbolding {width：300px; height; url（ 'img/300.jpg'）;位置：相対;マージン：50px auto;}。pic{width：97px; height：97px; float：float：left; background：url（ 'img/300.jpg'）; position：aspolute; position; transition：texter ease：ollign ^ center：controling：latign ease; absolute;color: red;top: 15px;left: 300px;font-size: 20px;}</style></head><body><div class='controller'><h1>Jigsaw puzzle</h1><button id='go'>go</button><span id='times'></span></div><div id='picbox'><div data-index='1' style = 'background-position：0px 0px; left：0px; top：0px;'> </div> <div data-index = '2' style = 'background-position：-100px 0px; left：100px; top：0px;'> </div> <div div data-index = '3'スタイル= '-200px 0px;左：200px; Top：0px; '> </div> <div data-index =' 4 'style =' background-position：0px -100px;左：0px; top：100px; '> </div> <div data-index =' 5 'style =' background-position：-100px; data-index = '6' style = 'background-position：-200px -100px;左：200px; top：100px;'> </div> <div dat-index = '7' style = 'background-position：0px -200px; -200px;左：100px; Top：200px; '> </div> <script> var picbox = document.getElementbyid（' picbox '）; var pic = document.queryselectorall（'。pic '）; var picwidth = pic [0] .offsetwidth; var picheight = pic [0]; picboxheight = picbox.offseTheight; var go = document.getElementById（ 'go'）; var times = document.getElementById（ 'times'）; // time。 var dx、dy、newleft、newtop、starttime、endtime; go.addeventlistener（ 'touchstart'、function（）{starttime = date.parse（new date（））; // 1970年1月1日から現在の時間までの有効期限からミリ秒数を取得するために使用されます。 {pic [i] .style.display = "block"; math.floor（math.random（）*9）; if（a！= b）{random（a、b）;}}}）for top.dx = e.targettouches [0] .pagex-this.offsetLeft; this.starty = this.offsettop; //オフセットトップなどで得られた値の差は、前者にはpxが含まれておらず、後者はpxthis.style.transition = 'none';}）ドラッグの水平状態がnewtop = e.targettouches [0] .pagey-dy; if（newLeft <= -picWidth/2）{//境界コードブロックを制限する場合、ドラッグエリアは境界newLeft = -picwidth/2;}の境界newLeft = -picwidth/2;}の半分を超えることはできません。 if（newLeft> =（picboxwidth-picwidth/2））{newLeft =（picboxwidth-picwidth/2）;} if（newtop <= -picheight/2）{newtop = -picwidth/2;} else if（picboxheight-picheight/2））{newtop =（picboxheight-picheight/2）;} the.tyle.left = newLeft+'px'; element; pic [i] .addeventlistener（ 'touchend'、function（e）{this.style.zindex = 0; this.style.transition = 'すべて0.5s Ease 0S'; // Add CSS3アニメーションEffect this.Endx = E.ChangedTouches [0] .Pagex-DX;スライドの終わりに、それを入力要素と比較し、var obj = change（this.endx、this.endy）を交換する人を判断します。 //それ以外の場合は、var _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'; thistyle.top = _top; var _index = obj.getattribute（ 'data-index'）; obj.setattribute（ 'data-index'、this.getattribute（ 'data-index'））; }}）; pic [i] .addeventlistener（ 'transitionEnd'、function（）{if（yssuccess（））{console.log（ 'success！'）; //ここにはリスニングイベントにバグがあり、複数のイベントが追加されます。変更（obj、x、y）{//ドラッグ要素の位置がターゲットの元の1/2に入ったかどうかを決定しますMath.abs（pic [i] .offsetleft-x）<= picwidth/＆math.abs <= picheight/2 && pic [i]！= obj）return pic [i] pic [a]; var bele = pic [b]; var _left; _left = aele.style.left; aele.style.left = bele.style.left; bele.style.left = _ left; var _top; _top = aele.style.top; bele.style.top; bele.style.top = _top; var _index; _index = aele.getattribute（ "data-index"）; aele.setattribute（ "data-index"、bele.getattribute（ "data-index"）） //成功するための基準var str = '' for（var i = 0; i <pic.length; i ++）{str+= pic [i] .getTribute（ 'data-index'）;} if（str == '123456789'）{return true;}続きendtime = date.parse（new date（））; times.innerhtml =（endtime-starttime）/1000 || '';}、1000）</scrip> </body> </html>タイミング関数の追加、ゲームの成功効果と効果音、スライディング指、左右のストロークのカスタムイベント、上下ストロークのカスタムイベント、さらにパッケージングなど、コードを最適化する方法はたくさんあります。 。編集者は後であなたを更新し続けます。今日ここに来てみましょう。気に入っていただければ幸いです！