ฉันเพิ่งสร้างเกมจิ๊กซอว์จิ๊กซอว์มือถืออย่างง่าย รหัสนั้นง่ายและเข้าใจง่าย ฉันจะไม่พูดเรื่องไร้สาระมากนัก ให้ทุกคนพิสูจน์ทุกอย่าง!
มาดูการเรนเดอร์ก่อน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> <meta name = "viewport" id = "viewport" content = "width = ความกว้างของอุปกรณ์ type = "text/css"> html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h5, h6, รูปแบบ, fieldset, ตำนาน, img {margin: 0; url ('img/300.jpg'); ตำแหน่ง: สัมพัทธ์; ระยะขอบ: 50px auto;}. pic {width: 97px; ความสูง: 97px; ลอย: ซ้าย; พื้นหลัง: url ('img/300.jpg'); Absolute; Color: Red; Top: 15px; ซ้าย: 300px; font-size: 20px;} </style> </head> <body> <div class = 'คอนโทรลเลอร์'> <h1> จิ๊กซอว์ปริศนา </h1> <button id = 'go'> go </button> <span id = ' style = 'ตำแหน่งพื้นหลัง: 0px 0px; ซ้าย: 0px; top: 0px;'> </div> <div data-index = '2' style = 'ตำแหน่งพื้นหลัง: -100px 0px; ซ้าย: 100px; top: 0px; 0px; ซ้าย: 200px; top: 0px; '> </div> <div data-index =' 4 'style =' ตำแหน่งพื้นหลัง: 0px -100px; ซ้าย: 0px; top: 100px; '> </div> <div-index =' 5 'style =' data-index = '6' style = 'ตำแหน่งพื้นหลัง: -200px -100px; ซ้าย: 200px; top: 100px;'> </div> <div data-index = '7' style = 'พื้นหลังตำแหน่ง: 0px -200px; ซ้าย: 0px; -200px; ซ้าย: 100px; top: 200px; '> </div> <script> var picbox = document.getElementById (' picbox '); var pic = document.QuerySelectorall ('. pic '); var picwidth = pic [0] picboxHeight = picbox.offSetheight; var go = document.getElementById ('go'); var times = document.getElementById ('Times'); // เวลา ใช้เพื่อขยาย var dx, dy, newleft, newtop, starttime, endtime; go.addeventListener ('TouchStart', function () {starttime = date.parse (วันที่ใหม่ ()); // ได้รับจำนวนมิลลิวินาที {pic [i] .style.display = "block"; ! = b) {สุ่ม (a, b);}}}) สำหรับ (var i = 0; i <pic.length; i ++) {pic [i] .addeventListener ('touchstart', ฟังก์ชั่น (e) {this.style.zindex = 100; top.dx = e.targetTouches [0] .pagex-this.offsetleft; this.starty = this.offsettop; // ความแตกต่างระหว่างค่าที่ได้จาก Oftsettop ฯลฯ คืออดีตไม่มี px และหลังมี pxthis.style.transition = 'none';}); pic [i] .addeventListener ('touchmove' สถานะแนวนอนของการลากเปลี่ยน newtop = e.targetTouches [0] .pagey-dy; ถ้า (newleft <=-picwidth/2) {// จำกัด บล็อกรหัสขอบเขตพื้นที่ลากไม่เกินครึ่งหนึ่งของขอบเขต newleft = -picwidth/2; if (newleft> = (picboxwidth-picwidth/2)) {newleft = (picboxwidth-picwidth/2);} ถ้า (newtop <=-picheight/2) {newtop = -picwidth/2; if (newtop> = (picboxheight-picheight/2)) {newtop = (picboxheight-picheight/2);} this.style.left = newleft+'px'; องค์ประกอบ; pic [i] .addeventListener ('touchend', ฟังก์ชั่น (e) {this.style.zindex = 0; this.style.transition = 'ทั้งหมด 0.5S ง่ายดาย 0S'; // เพิ่มเอฟเฟกต์แอนิเมชั่น CSS3 จุดสิ้นสุดของสไลด์เปรียบเทียบกับองค์ประกอบรายการและตัดสินว่าใครจะแลกเปลี่ยน 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.stary+'px'; _index = obj.getAttribute ('data-index'); obj.setAttribute ('data-index', this.getAttribute ('data-index')); }}); pic [i] .addeventListener ('transitionend', function () {ถ้า (issuccess ()) {console.log ('ความสำเร็จ!'); // มีข้อผิดพลาดในเหตุการณ์การฟังที่นี่ การเปลี่ยนแปลง (OBJ, X, Y) {// ฟังก์ชั่นการแลกเปลี่ยนกำหนดว่าตำแหน่งขององค์ประกอบการลากได้ป้อนเป้าหมาย 1/2 ดั้งเดิมหรือไม่ if (math.abs (pic [i] .offsetleft-x) <= picwidth/2 && math.abs (pic [i] .offsettop-y) <= picheight/2 && 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.style.top; bele.style.top; bele.style.top = _top; var _index; _index = aele.getAttribute ("data-index"); aele.setAttribute ("data-index", bele.getAttribute ("data-index); // เกณฑ์สำหรับการตัดสินความสำเร็จ var str = '' สำหรับ (var i = 0; i <pic.length; i ++) {str+= pic [i] .getAttribute ('data-index');} ถ้า (str == '123456789') contact.endtime = date.parse (วันที่ใหม่ ()); times.innerhtml = (endtime-starttime)/1000 || '';}, 1000) </script> </body> </html>มีหลายวิธีในการเพิ่มประสิทธิภาพรหัสเช่นการเพิ่มฟังก์ชั่นเวลาเอฟเฟกต์ความสำเร็จของเกมและเอฟเฟกต์เสียงเหตุการณ์ที่กำหนดเองสำหรับการเลื่อนนิ้วมือซ้ายและขวาจังหวะขึ้นและลงจังหวะการบรรจุภัณฑ์เพิ่มเติม ฯลฯ เอ่อเมื่อคุณคิดว่าคุณไม่สามารถช่วยได้ - บรรณาธิการจะอัปเดตต่อไปในภายหลัง มาที่นี่วันนี้ ฉันหวังว่าคุณจะชอบมัน!