Recientemente hice un simple juego de rompecabezas móvil móvil. El código es simple y fácil de entender. No diré muchas tonterías. ¡Deja que todos prueben todo!
Veamos primero las representaciones:
< Type = "Text/CSS"> Html, Body, Ul, Li, OL, DD, DD, DT, P, H1, H2, H3, H4, H5, H6, Form, Fieldset, Legend, IMG {Margin: 0; Pading: 0} Body {Background: Pink;}#Picbox {Whidth: 300px; Heatt: 300px; Backing: Backding: 0} Body: Pink;}#Picbox {whidth: 300px; Heatt: 300px; Backing: General: 0} Body {fondo: Pink;}#picbox {whidth: 300px; altura: 300px; fondo; url ('img/300.jpg'); posición: relativo; margen: 50px automático;}. pic {width: 97px; altura: 97px; float: float; en segundo plano: url ('img/300.jpg'); posición: absoluta; transición: todas las 0.5s facilidad 0s;}. Controlador {text-allign: Centre; Centre; Absoluto; color: rojo; superior: 15px; izquierda: 300px; font-size: 20px;} </style> </head> <body> <div class = 'controlador'> <h1> Jigsaw Puzzle </h1> <button id = 'go'> go </botte> <span Id = 'Times'> </span> </iv> <iv id = 'Picbox'> <div Data- estilo = 'Posición de fondo: 0px 0px; izquierda: 0px; top: 0px;'> </div> <div data-index = '2' style = 'fondo de fondo: -100px 0px; izquierda: 100px; top: 0px;'> </div> <div data-index = '3' style = 'en segundo plano: -200px 0px; izquierda: 200px; top: 0px; '> </div> <div data-index =' 4 'style =' fondo de fondo: 0px -100px; izquierda: 0px; top: 100px; '> </div> <div data-index =' 5 'style =' posposición de fondo: -100px -100px; izquierda: 100px; top: 100px; 'dive </div-divic data-index = '6' style = 'Background-posposition: -200px -100px; izquierda: 200px; top: 100px;'> </div> <divs data-index = '7' style = 'en segundo plano: 0px -200px; izquierda: 0px; top: 200px;'> </div> <div data-1dedex = '8' style = 'fondo de fondo: -100px: -100px -200px; izquierda: 100px; top: 200px; '> </div> <script> var picbox = document.getElementById (' picbox '); var pic = document.querySelectorAll ('. Pic '); var picwidth = pic [0] .OffSetWidth; var picheight = pic [0] .OffsetHeTheight; var picboxwidth = picbox.off; picboxHeight = picbox.offsetheight; var go = document.getElementById ('go'); var times = document.getElementById ('Times'); // time. Se usa para extender var dx, dy, newleft, newTop, starttime, endtime; go.addeventListener ('touchStart', function () {starttime = date.parse (new date ()); // Obtener el número de milisegundos de la expiración 1 de enero de 1970 a la hora actual. Este método no es común. Aquí está una prueba para (var i = 0; i <pic.l longitud; {Pic [i] .Style.Display = "Bloque"; b) {aleatorio (a, b);}}}) para (var i = 0; i <pic.length; i ++) {pic [i] .addeventListener ('touchStart', function (e) {this.style.zindex = 100; // Establezca el valor z-index del elemento de arrastre para que eso esté en el top.dx = e.TarGetTouches [0] .Pagex-THIS.OffSetleft; this.starty = this.offsettop; // La diferencia entre los valores obtenidos por offsettop, etc. es que el primero no contiene px, y el segundo tiene pxthis.style.transition = 'none';}); pic [i] .pageDeventListener ('touchMove', function (e) {newleft = e.TarGetteuches [0] .pagex-dx; estado horizontal de los cambios de arrastre newTop = e.targettouches [0] .pagey-dy; if (newleft <=-picwidth/2) {// restringir el bloque de código de límite, el área de arrastre no puede exceder la mitad del límite newleft = -picwidth/2;} más if (newleft> = (PicboxWidth-Picwidth/2)) {newLeft = (PicboxWidth-PicWidth/2);} if (NewTop <=-Picheight/2) {NewTop = -PicWidth/2;} más if (newTop> = (PicboxHeight-Picheight/2)) {newTop = (PicboxHeight-Picheight/2);} this.style.left = newleft+'px'; elemento; pic [i] .addeventListener ('touchend', function (e) {this.style.zindex = 0; this.style.transition = 'todas 0.5s facilits 0s'; // Agregar css3 Efecto de animación this.endx = e.changedTouches [0] .pagex-dx; this.endy = e.changedTouches [0]. de la diapositiva, compararlo con el elemento de entrada y juzgar quién para intercambiar var obj = cambio (e.target, this.endx, this.endy); _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'; this.style.top = _Top; var; var; _Index = obj.getAttribute ('data-index'); obj.setAttribute ('data-odex', this.getAttribute ('data-odex')); this.setAttribute ('data-odex', _ index); }}); pic [i] .adDeventListener ('transitionend', function () {if (issuccess ()) {console.log ('ssucese!'); // Hay un error en el evento de escucha aquí, y se agregarán múltiples eventos.} else {// pic [i] .removeVentListener ('transitionend');})})})} Cambiar (OBJ, X, Y) {// La función de intercambio determina si la posición del elemento de arrastre ha ingresado el 1/2 original del objetivo. if (math.abs (pic [i] .Offsetleft-x) <= PicWidth/2 && Math.abs (Pic [i] .OffSettop-y) <= 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; aele.style.top = bele.sty _Top; var _index; _index = aele.getAttribute ("data-index"); aele.setAttribute ("data-index", bele.getAttribute ("data-index")); bele.setAttribute ("data-index-odex, _ index);} function issuccess () i = 0; i <pic.length; i ++) {str+= pic [i] .getAttribute ('data-index');} if (str == '123456789') {return true;} return false;} var tiempo; setInterval (function () {// función sincronizada, u ... para continuar. Date ()); Times.innerhtml = (endtime-starttime)/1000 || '' ';}, 1000) </script> </body> </html>Hay muchas maneras de optimizar el código, como agregar funciones de tiempo, efectos de éxito del juego y efectos de sonido, eventos personalizados para dedos deslizantes, trazos izquierdo y derecho, trazos ascendentes y bajos, empaquetados adicionales, etc. Uh, cuando piensas en ello, no puedes evitar tratar de tratar de golpear el código. . El editor continuará actualizándolo más tarde. Vengamos aquí hoy. ¡Espero que te guste!