J'ai récemment fait un jeu de puzzle mobile simple. Le code est simple et facile à comprendre. Je ne dirai pas beaucoup de bêtises. Laissez tout le monde prouver tout!
Regardons d'abord les rendus:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> document </title> <meta name = "Viewport" id = "Viewport" contenu = "width = device-width, initial-scale = 1.0, user-scalable = no"> <style device type = "text / css"> html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, formulaire, fieldset, légende, img {margin: 0; padding: 0} body {background: rose;} # picbox {largement: 300px; height: 300px; URL ('img / 300.jpg'); position: relative; marge: 50px auto;}. pic {width: 97px; hauteur: 97px; float: Left; fond: url ('img / 300.jpg'); position: absolue; transition: tous les 0.5s facteur 0;}. Absolute; couleur: rouge; top: 15px; gauche: 300px; font-taille: 20px;} </ style> </ad> <body> <div class = 'contrôleur'> <h1> puzzle de jigsaw </h1> <Button id = 'go'> Go </ Button> <span id = 'Times'> </span> </v> <v id = 'picbox'> </span '1' 1 '1' Style = 'Position d'arrière-plan: 0px 0px; gauche: 0px; top: 0px;'> </div> <div data-index = '2' style = 'background position: -100px 0px; Left: 100px; top: 0px;'> </ div> <div data-index = '3' style = 'background-position: -200px 0px; gauche: 200px; top: 0px; '> </div> <div data-index =' 4 'style =' background position: 0px -100px; gauche: 0px; top: 100px; '> </v> <div data-index =' 5 'style =' background position: -100px -100px; data-index = '6' style = 'background position: -200px -100px; gauche: 200px; top: 100px;'> </ div> <div data-index = '7' style = 'backgroundsposition: 0px -200px; -200px; à gauche: 100px; top: 200px; '> </div> <cript> var picbox = document.getElementById (' picbox '); var pic = document.QuerySelectorall ('. Pic '); var picWidth = pic [0] .offsetWidth; var picheight = pic [0] .offSetheight; var piclwidTh = picbox.offSet; picboxHeight = picbox.offsetheight; var go = document.getElementByid ('go'); var times = document.getElementByid ('Times'); // time. Utilisé pour étendre var dx, dy, newleft, newtop, starttime, endtime; go.addeventListener ('touchstart', function () {starttime = date.parse (new Date ()); // Obtenez le nombre de millisecondes à partir de l'expiration du 1er janvier, 1970 à l'heure actuelle. Cette méthode n'est pas courante. {pic [i] .style.display = "block"; b) {random (a, b);}}}) for (var i = 0; i <pic.length; i ++) {pic [i] .addeventListener ('touchstart', function (e) {this.style.zindex = 100; // Définissez la valeur z-index de l'élément de traînée pour qu'elle soit sur le lien sur le lien sur le lien sur le lien sur le lien sur le lien. TOP.DX = E.TargetTouches [0] .Pagex-This.offsetLeft; this.starty = this.offsetTop; // La différence entre les valeurs obtenues par OffsetTop, etc. est que le premier ne contient pas px, et le second a pxthis.style.transition = 'None';}); pic [i] .addeventListener ('TouchMove', fonction (e) {newleft = e.targetTouches [0]. L'état horizontal des changements de glisser newtop = e.targetTouches [0] .pagey-dy; if (newLeft <= - picWidth / 2) {// restreindre le bloc de code limite, la zone de drag ne peut pas dépasser la moitié de la limite 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);} this.style.left = newleft + 'px'; élément; pic [i] .AddeventListener ('Touchend', fonction (e) {this.style.zindex = 0; this.style.transition = 'all 0.5s facilit 0s'; // ajouter un effet d'animation CSS3 this.endx = e.changedTouches [0] .Pagex-Dx; this.endy = the the thechangedTouches [0]. fin de la diapositive, comparez-la avec l'élément d'entrée et jugez qui échanger var obj = modifier (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'; this.style.top = _Top; vary + 'px'; this.style.top = _Top; vary + 'px'; _Index = obj.getAttribute ('Data-Index'); obj.setAttribute ('Data-Index', this.getAttribute ('Data-Index')); this.setAttribute ('Data-Index', _ index); }}); pic [i] .AddeventListener ('transitionend', function () {if (issucess ()) {console.log ('succès!'); // Il y a un bug dans l'événement d'écoute ici, et plusieurs événements seront ajoutés. // La fonction d'échange détermine si la position de l'élément Drag a entré le 1/2 d'origine de la cible. if (math.abs (pic [i] .offsetleft-x) <= picWidth / 2 && math.abs (pic [i] .offsettop-y) <= picheight /} pic [i]! = obj) 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.letop; aele.style.Top = bele.style.top; bele.style.top = _top; var _index; _index = aele.getAttribute ("data-index"); aele.setAttribute ("data-index" // Les critères de jugement de réussite var str = '' for (var i = 0; i <pic.length; i ++) {str + = pic [i] .getAttribute ('data-index');} if (str == '123456789') {return true;} return false;} var time; setInterval (function () {// Timed function, u ... to Suite.endTime = Date.Parse (new Date ()); Times.InnerHtml = (Bume-Time-Starttime) / 1000 || '';}, 1000) </cript> </ body> </html>Il existe de nombreuses façons d'optimiser le code, comme l'ajout de fonctions de synchronisation, les effets de réussite du jeu et les effets sonores, les événements personnalisés pour les doigts coulissants, les accidents vasculaires cérébraux gauche et droite, les accidents vasculaires cérébraux, les emballages supplémentaires, etc. euh, lorsque vous y réfléchissez, vous ne pouvez pas vous empêcher d'essayer de frapper le code. . L'éditeur continuera à vous mettre à jour plus tard. Venez ici aujourd'hui. J'espère que vous l'aimez!