Baru -baru ini saya membuat game puzzle mobile sederhana. Kode ini sederhana dan mudah dimengerti. Saya tidak akan mengatakan banyak omong kosong. Biarkan semua orang membuktikan segalanya!
Mari kita lihat rendering terlebih dahulu:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> dokumen </iteme> <meta name = "viewport" id = "viewport" content = "width = perangkat-width, skala awal = 1.0, skala user = tidak" tidak ada "> <style = device-width, initial-scale = 1.0, user-scalable = no"> <style = device-width, awal-skala = 1.0, skala pengguna = tidak "> gaya <gaya"> type = "text/css"> html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, bentuk, fieldset, legenda, img {margin: 0; padding: 0} body {latar belakang: pink;}#picbox {width: 0; Padding: 0} body {latar belakang: pink;}#picbox {width: 0; Padding: 0} body {latar belakang: pink;}#picbox {width: 0; Padding: 0} Body {latar belakang: pink;}#picbox {width: 0; Padding: 0} Body {latar belakang: pink;}#picbox {width: 0; url('img/300.jpg');position: relative;margin: 50px auto;}.pic{width: 97px;height: 97px;float: left;background: url('img/300.jpg');position: absolute;transition: all 0.5s ease 0s;}.controller{text-align: center;position: relative;}#times{position: absolute; warna: merah; atas: 15px; kiri: 300px; font-size: 20px;} </style> </head> <body> <div class = 'controller'> <h1> puzzle jigsaw </h1> </1 'div> div </butkbox =' waktu '> </h1' </div> div = 'div =' div/div <'div ='> </span> </Div> Div = 'Divbox =' DAVBOX = 'DAVBOX =' DAVBOX = '> </span> </Div> Div =' Divbox = 'DAVBOX =' DABOX = 'DABBOX ='> </span> </Div> style = 'posisi latar belakang: 0px 0px; kiri: 0px; atas: 0px;'> </div> <div data-index = '2' style = 'latar belakang-posisi: -100px 0px; kiri: 100px; Top: 0px;'> </Div> <Div Data-index = '3' style = 'latar belakang: -2 0px; kiri: 200px; atas: 0px; '> </div> <div data-index =' 4 'style =' Latar belakang-posisi: 0px -100px; kiri: 0px; atas: 100px; '> </Div> <Div Data-index =' 5 'gaya latar belakang: -100px -100px; Divx; 100px; 100px; Top: -100px -100px; Data-index = '6' style = 'Latar belakang posisi: -200px -100px; kiri: 200px; Top: 100px;'> </div> <div data-index = '7' style = 'Latar belakang posisi: 0px -200px; kiri: 0px = 200px;'> </Div> Div> Data-index = 0px = 200px; -200px;left:100px;top:200px;'></div><script>var picbox=document.getElementById('picbox');var pic=document.querySelectorAll('.pic');var picWidth=pic[0].offsetWidth;var picHeight=pic[0].offsetHeight;var picboxWidth=picbox.offsetWidth;var picboxHeight = picbox.offsetHeight; var go = document.geteLementById ('go'); var kali = document.geteLementById ('kali'); // waktu. Digunakan untuk memperluas var dx, dy, newleft, newtop, starttime, endtime; go.addeventListener ('touchstart', function () {startTime = date.parse (tanggal baru ()); // Dapatkan jumlah milidetik dari uji coba 1 Januari 1970 ke waktu saat ini. Metode ini tidak umum. Di sini. {pic [i] .style.display = "block"; ! = b) {acak (a, b);}}}) untuk (var i = 0; i <pic.length; i ++) {pic [i] .addeventListener ('touchstart', function (e) {this.style.zindex = 100; // Atur nilai z-indeks dari elemen drag yang ada di atasnya pada The The Drag On the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the top.dx = e.targettouches [0] .pagex-this.offsetleft; // Catat posisi ketika keadaan horizontal untuk memicu drag dy = e.targettouches [0]. Posisi-Posisi Posisi. this.starty = this.offsettop; // Perbedaan antara nilai-nilai yang diperoleh oleh offsettop, dll. adalah bahwa yang pertama tidak mengandung px, dan yang terakhir memiliki pxthis.style.transition = 'none';}); pic [i] .addeventener ('touchmove', function (e) {newleft = E. Keadaan horizontal dari seret mengubah newtop = e.targetTouches [0] .pagey-dy; if (newleft <=-picwidth/2) {// membatasi blok kode batas, area seret tidak dapat melebihi setengah dari batas NewLeft = -picwidth/2;} lainnya if (newleft> = (picboxwidth-picwidth/2)) {newleft = (picboxwidth-picwidth/2);} if (newtop <=-picheight/2) {newtop = -picwidth/2;} lain if (newtop> = (picboxheight-picheight/2)) {newtop = (picboxheight-picheight/2);} this.style.left = newleft+'px'; element;pic[i].addEventListener('touchend',function(e){this.style.zIndex=0;this.style.transition='all 0.5s ease 0s'; //Add css3 animation effect this.endX=e.changedTouches[0].pageX-dx; this.endY=e.changedTouches[0].pageY-dy; //Record the position at Akhir dari slide, bandingkan dengan elemen entri, dan menilai siapa yang bertukar var obj = perubahan (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.tyle.top = this.starty+'px'; this.style.tyle.top = this.starty+'px'; this.style.tyle _index = obj.getAttribute ('data-index'); obj.setAttribute ('data-index', this.getAttribute ('data-index')); bagian ini. }}); pic [i] .addeventListener ('transitionEnd', function () {if (isSuccess ()) {console.log ('Success!'); // Ada bug di acara mendengarkan di sini, dan beberapa peristiwa akan ditambahkan.} lain {// pic [i] .remeeventener ('Transition {// pic [i] .removeeventener (' Ubah (OBJ, X, Y) {// Fungsi pertukaran menentukan apakah posisi elemen seret telah memasuki 1/2 target asli if (math.abs (pic [i] .offsetleft-x) <= picwidth/2 && math.abs (pic [i] .offsettop-y) <= picheight/2 && pic [i]! = Obj) mengembalikan 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; var _top; _top = aele.style.top; aele.top; bele.style.top; bele.style.top = _top; var _index; _index = aele.getAttribute ("data-index"); aele.setAttribute ("data-index", {{dATEX-INDEX "(" DATEXT ("Data-index"); DATACTRIBUTE ("DATEXTRIBUTE (" DATEX "); // kriteria untuk menilai keberhasilan 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) {oe return function; oEde (function oe (function oED (return function; lanjutanAda banyak cara untuk mengoptimalkan kode, seperti menambahkan fungsi waktu, efek keberhasilan permainan dan efek suara, acara khusus untuk jari geser, sapuan kiri dan kanan, sapuan naik dan turun, kemasan lebih lanjut, dll. Eh, ketika Anda memikirkannya, Anda tidak dapat membantu tetapi ingin mencoba mengetuk kode. . Editor akan terus memperbarui Anda nanti. Ayo datang ke sini hari ini. Saya harap Anda menyukainya!