Ich habe kürzlich ein einfaches mobiles Puzzlespiel gemacht. Der Code ist einfach und leicht zu verstehen. Ich werde nicht viel Unsinn sagen. Lass alle alles beweisen!
Schauen wir uns zuerst die Renderings an:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> document </title> <meta name = "viewPort" id = "AnsichtPort" content = "width = Geräte-Width, initial-scale = 1.0, user-scalable = no no" <style-"-Stile-Width, initial-scale = 1.0, user-scalable = no" <style "<style-width = Typ = "Text/CSS"> HTML, Körper, UL, Li, OL, DL, DD, DT, P, H1, H2, H3, H4, H5, H6, Form, Fieldset, Legende, IMG {Margin: 0; Padding: 0} Body {Hintergrund: Pink;}#picbox {Breit: 300px; Höhe: 300px; URL ('IMG/300.JPG'); Position: relativ; Rand: 50px Auto; 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 = 'Hintergrundposition: 0px 0px; links: 0px; top: 0px;'> </div> <div datenindex = '2' style = 'Hintergrund-Position: -100px 0px; links: 100px; top: 0px; 0px; links: 200px; top: 0px; '> </div> <div datenindex =' 4 'style =' Hintergrundposition: 0px -100px; links: 0px; top: 100px; '> </div> <divdindex; Data-Index = '6' Style = 'Hintergrundposition: -200px -100px; links: 200px; top: 100px;'> </div> <div datinidEx = '7' style = 'Hintergrundposition: 0px -200px; links: 0px; top: 200px; -200px; links: 100px; top: 200px; '> </div> <script> var picbox = document.getElementById (' picbox '); var pic = document.querySelectorall ('. Pic '); var picwidth = pic [0] .Offsetwidth; picboxHeight = picbox.offseteight; var go = document.getElementById ('go'); var Times = document.getElementById ('Times'); // Zeit. Wird verwendet, um var dx, dy, newleft, newtop, starttime, endzeit; go.adDeventListener ('touchStart', function () {startTime = Datum.Parse (New Date ()); // Erhalten Sie die Anzahl der Millisekunden ab. {pic [i] .Style.Display = "Block"; b) {random (a, b);}}}) für (var i = 0; i <pic.Length; i ++) {pic [i] .AdDeVentListener ('touchStart', Funktion (e) {this.style.zindex = 100; // Setzen Sie den Z-Index-Wert des Dragelements so, dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, so dass es sich um den Wert des Dragelements handelt, sodass es sich auf dem Punkt befindet. top.dx = e.targettouches [0] .pagex-this.offsetleft; this.starty = this.offsettop; // Der Unterschied zwischen den von Offsettop usw. erhaltenen Werten ist, dass der erstere PX nicht enthält und letzterer pxthis.style.transition = 'None';}); Horizontaler Zustand der Ziehungen Änderungen newtop = e.targettouches [0] .Pagey-dy; if (newleft <=-picwidth/2) {// den Grenzcode-Block einschränken, kann der Drag-Bereich die Hälfte der Grenzneuerung = -picwidth/2;} sonst nicht überschreiten 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);} this.style.left = newleft+'px'; Element; pic [i] .AdDeVentListener ('Touchend', Funktion (e) {this.style.zindex = 0; this.style.transition = 'alle 0,5s Easy 0s'; // add CSS3-Animationseffekt diesen. Das Ende der Folie, vergleichen Sie es mit dem Eingabelement und beurteilen Sie, wer var obj = ändert (e.target, this.endx, this.endy); // ansonsten var _left = obj.style.left; obj.style.left = this.startx+'px'; _index = obj.getAttribute ('data-index'); obj.setAttribute ('Data-Index', this.getAttribute ('data-Index); }}); pic [i] .AdDeVentListener ('transitionend', function () {if (issuccess ()) {console.log ('Erfolg!'); // Es gibt hier einen Fehler im Hörereignis, und mehrere Ereignisse werden hinzugefügt.} else {// pic [i] .removentListener ('tranitionend'; Änderung (OBJ, x, y) {// Die Austauschfunktion bestimmt, ob die Position des Dragelements das ursprüngliche 1/2 des Ziels eingegeben hat if (math.abs (pic [i] .offsetleft-x) <= picwidth/2 && math.abs (pic [i] .offsettop-y) <= picheight/2 && pic [i]! pic [a]; var Bele = pic [b]; var _left; _left = aele.style.left; aele.style.left = Bele.Style.Left; Bele.Style.top; Bele.Style.top = _top; var _index; _index = aELe.getAttribute ("data-Index"); issuccess () {// Die Kriterien für die Beurteilung des Erfolgs var str = '' für (var i = 0; i <pic.length; i ++) {str+= pic [i] .getAttribute ('data-Index');} if (str == '123456789') {{} return true; Fortsetzung.endTime = Date.Parse (neues Datum ()); Times.InnerHtml = (EndTime-StartTime)/1000 || '';}, 1000) </script> </body> </html>Es gibt viele Möglichkeiten, den Code zu optimieren, z. B. das Hinzufügen von Timing -Funktionen, Spieleffekten und Soundeffekten für Spiele, benutzerdefinierte Ereignisse für das Schieben von Fingern, linke und rechte Striche, Auf- und Abstriche, weitere Verpackungen usw., wenn Sie darüber nachdenken, möchten Sie nicht anders, als zu versuchen, auf den Code zu klopfen. . Der Herausgeber wird Sie später weiter aktualisieren. Kommen wir heute hierher. Ich hoffe es gefällt dir!