لقد صنعت مؤخرًا لعبة ألغاز بانوراما متنقلة بسيطة. الكود بسيط وسهل الفهم. لن أقول الكثير من الهراء. دع الجميع يثبت كل شيء!
دعونا نلقي نظرة على العروض أولاً:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مستند </title> <meta name = "viewport" id = "viewport" content = "width = width device ، scale = 1.0 ، ster-scalable = no"> type = "text/css"> html ، body ، ul ، li ، ol ، dl ، dd ، dt ، p ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، form ، fieldet ، legend ، img {margin: 0 ؛ Padding: 0} body {pint.} picbox {width: 300px ؛ url ('img/300.jpg') ؛ الموضع: النسبية ؛ الهامش: 50px auto ؛}. pic {width: 97px ؛ height: 97px ؛ float: left ؛ background: url ('img/300.jpg') ؛ الموضع: المطلق ؛ انتقال: كل 0.5 سهولة 0s ؛}. المطلق ؛ اللون: أحمر ؛ أعلى ؛ أعلى: 15px ؛ اليسار: 300px ؛ حجم الخط: 20px ؛} </style> </head> <body> <div class = 'controller'> <h1> jigsaw puzzle </h1> <button id = 'go' style = 'procession-position: 0px 0px ؛ left: 0px ؛ top: 0px ؛'> </div> <div data-index = '2' style = 'background-position: -100px 0px ؛ left: 100px ؛ Top: 0px ؛ 0px ؛ اليسار: 200px ؛ أعلى: 0px ؛ '> </div> <div data-index =' 4 'style =' background-position: 0px -100px ؛ left: 0px ؛ top: 100px ؛ '> </div> <div data-index =' 5 'style =' proundge-position: -100px -100px ؛ left: 100px ؛ data-index = '6' style = 'prossial-position: -200px -100px ؛ اليسار: 200px ؛ الأعلى: 100px ؛'> </div> <div data-index = '7' style = 'prounded-position: 0px -200px ؛ left: 0px ؛ top: 200px ؛'> </div> div-index = ' -200px ؛ اليسار: 100px ؛ الأعلى: 200px ؛ '> </div> <script> var picbox = document.getElementById (' picbox ') ؛ var pic = document.queryselectall ('. 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 ، newlelft ، newtop ، وقت البدء ، endtime ؛ go.addeventListener ('touchstart' ، function () {StartTime = date.parse (تاريخ جديد ()) ؛ // الحصول على عدد milliseconds من انتهاء الصلاحية 1 ، 1970 إلى الوقت الحالي. هذه الطريقة ليست شائعة. {pic [i] .style.display = "block" ؛ ! = b) {random (a ، b) ؛}}}) لـ (var i = 0 ؛ i <pic.length ؛ i ++) {pic [i]. Top.dx = E.TargetTouches [0] .pagex-this.offsetleft ؛ يغير هذا. الحالة الأفقية لسحب التغييرات 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 ؛} آخر 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 ease 0s' ؛ نهاية الشريحة ، قارنها بعنصر الدخول ، والحكم على من يتبادل var obj = e.target ، 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' ؛ _index = obj.getattribute ('Data-Index') ؛ obj.setAttribute ('Data-Index' ، this.getAttribute ('data-index') }}) ؛ pic [i] .addeventListener ('TransitionEnd' ، function () {if (issuccess ()) {console.log ('success!') ؛ // هناك خطأ في حدث الاستماع هنا ، وسيتم إضافة أحداث متعددة. // تحدد وظيفة Exchange ما إذا كان موضع السحب قد أدخل 1/2 من الهدف if (math.abs (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 ؛ bele.style.top ؛ bele.style.top = _top ؛ var _index ؛ _index = aele.getAttribute ("data-index") ؛ aele.setTtribute ("data-index" ، bele.getattribute ("data-index")) ؛ // معايير الحكم على النجاح var str = '' for (var i = 0 ؛ i <pic.length ؛ i ++) {str+= pic [i] .getattribut تابعهناك العديد من الطرق لتحسين الكود ، مثل إضافة وظائف التوقيت ، وتأثيرات نجاح اللعبة والمؤثرات الصوتية ، والأحداث المخصصة للأصابع المنزلق ، والسكتات الدماغية اليمنى واليسرى ، والسكتات الدماغية لأعلى ولأسفل ، ومزيد من العبوات ، وما إلى ذلك. . سيستمر المحرر في تحديثك لاحقًا. دعنا نأتي إلى هنا اليوم. أتمنى أن تعجبك!