มาดูการเรนเดอร์ก่อน:
การวิเคราะห์การทำงาน
แน่นอนว่ามันคือทั้งหมดที่เกี่ยวกับการเล่น ในฐานะผู้ที่ชื่นชอบ Vue เราควรเข้าไปลึกเข้าไปในเกมและสำรวจการใช้งานรหัส จากนั้นมาวิเคราะห์ว่าฟังก์ชั่นใดที่จำเป็นต้องใช้ในการเล่นเกมดังกล่าว ด้านล่างฉันจะแสดงรายการจุดทำงานของตัวอย่างนี้โดยตรง:
1. แบบสุ่มสร้างกริดตัวเลข 1 ถึง 15 แต่ละหมายเลขจะต้องปรากฏขึ้นและปรากฏขึ้นเพียงครั้งเดียว
2. หลังจากคลิกที่สี่เหลี่ยมดิจิตอลหากมีที่เดียวด้านบนด้านล่างด้านล่างซ้ายและขวาตำแหน่งการแลกเปลี่ยนสองตำแหน่ง
3. ทุกครั้งที่กริดเคลื่อนไหวเราต้องตรวจสอบว่าผ่านระดับสำเร็จหรือไม่
4. หลังจากคลิกปุ่มรีเซ็ตเกมคุณจะต้องจัดลำดับปริศนาใหม่
ด้านบนเป็นจุดฟังก์ชั่นหลักของตัวอย่างนี้ จะเห็นได้ว่าฟังก์ชั่นเกมไม่ซับซ้อน เราแค่ต้องทำลายพวกเขาทีละคนและมันก็โอเค ต่อไปฉันจะแสดงรหัส VUE ของแต่ละจุดการทำงาน
สร้างแผงเกม
ในฐานะที่เป็นเฟรมเวิร์ก JS ที่ขับเคลื่อนด้วยข้อมูลเทมเพลต HTML ของ Vue ควรถูกผูกไว้กับข้อมูล ตัวอย่างเช่นตารางบล็อกของเกมดังกล่าวจะต้องไม่ถูกเขียนที่นี่ รหัสมีดังนี้:
<เทมเพลต> <div><ul> <li: class = "{'ปริศนา': จริง, 'Puzzle-empty':! Puzzle}" V-for = "Puzzle in Puzzles" V-text = "Puzzle"> </li> 11, 12, 13, 14, 15]}}} </script>ฉันละเว้นส่วนสไตล์ CSS ที่นี่ดังนั้นคุณไม่ต้องกังวลเกี่ยวกับมันในตอนนี้ ในรหัสข้างต้นเราเขียนตัวเลขตั้งแต่ 1 ถึง 15 ในอาร์เรย์ เห็นได้ชัดว่านี่ไม่ใช่การเรียงลำดับแบบสุ่มดังนั้นเราจะใช้ฟังก์ชั่นของการเรียงลำดับแบบสุ่ม
การเรียงลำดับตัวเลขแบบสุ่ม
<เทมเพลต> <div><ul> <li: class = "{'Puzzle': จริง, 'Puzzle-empty':! Puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle"> </li> {ให้ Puzzlearr = [], i = 1 // สร้างอาร์เรย์ของ 1 ถึง 15 หมายเลขสำหรับ (i; i <16; i ++) {Puzzlearr.push (i)} // สุ่มขัดขวางอาร์เรย์ Puzzlearr = Puzzlearr.sort (() => {return math.random (); // หน้าแสดง this.puzzles = Puzzlearr this.puzzles.push ('')},}, ready () {this.render ()}} ในรหัสข้างต้นเราใช้ For Loop เพื่อสร้างอาร์เรย์ที่สั่งซื้อ 1 ~ 15 จากนั้นเราใช้วิธีการเรียงลำดับ JS ดั้งเดิมเพื่อสุ่มรบกวนตัวเลข นอกจากนี้ยังมีจุดความรู้ซึ่งเป็นวิธี Math.random()
ในการใช้วิธี sort() สำหรับการเรียงลำดับที่กำหนดเองเราจำเป็นต้องจัดเตรียมฟังก์ชั่นการเปรียบเทียบจากนั้นส่งคืนตัวเลขที่ใช้เพื่อแสดงลำดับสัมพัทธ์ของค่าทั้งสองนี้และค่าการส่งคืนเป็นดังนี้:
1. ส่งคืนค่าน้อยกว่า 0 แสดงว่า A น้อยกว่า B
2. return 0, ระบุว่า a เท่ากับ b
3. ส่งคืนค่าที่มากกว่า 0 แสดงว่า A มากกว่า B
ที่นี่ Math.random() ใช้เพื่อสร้างจำนวนสุ่มระหว่าง 0 ถึง 1 แล้วลบ 0.5 ด้วยวิธีนี้ครึ่งหนึ่งของความน่าจะเป็นจะส่งคืนค่าน้อยกว่า 0 และครึ่งหนึ่งของความน่าจะเป็นจะส่งคืนค่ามากกว่า 0 ซึ่งทำให้มั่นใจได้ว่าการสุ่มของอาร์เรย์ที่สร้างขึ้นและตระหนักถึงฟังก์ชั่นของการสร้างแบบสุ่มแบบไดนามิกของกริดตัวเลข
ควรสังเกตว่าเรายังใส่สตริงเปล่าที่ส่วนท้ายของอาร์เรย์เพื่อสร้างกริดว่างเปล่าที่ไม่ซ้ำกัน
ตำแหน่งปิดบล็อก
<เทมเพลต> <div><ul> <li: class = "{'Puzzle': จริง, 'Puzzle-empty':! Puzzle}" V-for = "Puzzle in Puzzles" V-text = "Puzzle" @click = "Movefn ($ index)"> </li> วิธีการ: {// รีเซ็ตเรนเดอร์ () {ให้ Puzzlearr = [], i = 1 // สร้างอาร์เรย์ 1 ถึง 15 หมายเลขสำหรับ (i; i <16; i ++) {Puzzlearr.push (i)} // สุ่ม // หน้าแสดง this.puzzles = Puzzlearr this.puzzles.push ('')}, // คลิกบล็อก movefn (ดัชนี) {// รับตำแหน่งคลิกและค่าของมันขึ้นและลงและซ้ายให้ curnum = this.puzzles [index], leftnum = this.puzzles this.puzzles [ดัชนี - 4], bottomNum = this.puzzles [ดัชนี + 4] // แลกเปลี่ยนค่ากับตำแหน่งที่ว่างเปล่าถ้า (ซ้าย num === '') {this.puzzles. $ set (ดัชนี - 1, curnum) this.puzzles. $ set (ดัชนี, ') this.puzzles. $ set (index, '')} else ถ้า (topnum === '') {this.puzzles. $ set (ดัชนี - 4, curnum) this.puzzles. $ set (ดัชนี, ')} else (bottomnum ===' ') {this.puzzles. }}, ready () {this.render ()}} </script>1. ที่นี่เราเพิ่มเหตุการณ์คลิก @click = "MoveFn ($ index)" ลงใน LI ของแต่ละกริดและใช้พารามิเตอร์ $ ดัชนีเพื่อรับตำแหน่งของบล็อกคลิกในอาร์เรย์
2. ประการที่สองรับค่าดัชนีของตัวเลขขึ้นลงซ้ายและขวาในอาร์เรย์เป็นดัชนี - 4, ดัชนี + 4, ดัชนี - 1, ดัชนี + 1
3. เมื่อเราพบสถานที่ที่ว่างเปล่าที่ด้านบน, ล่าง, ซ้าย, ซ้ายและขวาเรากำหนดตำแหน่งที่ว่างเปล่าให้กับจำนวนของกริดที่ถูกคลิกในปัจจุบันบนตำแหน่งว่างและตั้งตำแหน่งที่คลิกปัจจุบันให้ว่างเปล่า
หมายเหตุ: ทำไมเราถึงใช้เมธอด $ set แทนการกำหนดค่าโดยตรง? สิ่งนี้มีคะแนนความรู้เกี่ยวกับหลักการของการตอบสนอง Vue
// เนื่องจากข้อ จำกัด ของ JavaScript, vue.js ไม่สามารถตรวจจับการเปลี่ยนแปลงอาร์เรย์ต่อไปนี้: // 1. ตั้งค่าองค์ประกอบโดยตรงกับดัชนีเช่น VM.Items [0] = {}; // 2. แก้ไขความยาวของข้อมูลเช่น vm.items.length = 0 // เพื่อแก้ปัญหา (1), vue.js ขยายอาร์เรย์การสังเกตและเพิ่มวิธี $ set () ลงไป: // เหมือนกับ `ตัวอย่าง 1.items [0] = ...ตรวจสอบว่าการทดสอบสำเร็จหรือไม่
<เทมเพลต> <div><ul> <li: class = "{'Puzzle': จริง, 'Puzzle-empty':! Puzzle}" V-for = "Puzzle in Puzzles" V-text = "Puzzle" @click = "Movefn ($ index)"> </li> วิธีการ: {// รีเซ็ตเรนเดอร์ () {ให้ Puzzlearr = [], i = 1 // สร้างอาร์เรย์ 1 ถึง 15 หมายเลขสำหรับ (i; i <16; i ++) {Puzzlearr.push (i)} // สุ่ม // หน้าแสดง this.puzzles = Puzzlearr this.puzzles.push ('')}, // คลิกบล็อก movefn (ดัชนี) {// รับตำแหน่งคลิกและค่าของมันขึ้นและลงและซ้ายให้ curnum = this.puzzles [index], leftnum = this.puzzles this.puzzles [ดัชนี - 4], bottomNum = this.puzzles [ดัชนี + 4] // แลกเปลี่ยนค่ากับตำแหน่งที่ว่างเปล่าถ้า (ซ้าย num === '') {this.puzzles. $ set (ดัชนี - 1, curnum) this.puzzles. $ set (ดัชนี, ') this.puzzles. $ set (index, '')} else ถ้า (topnum === '') {this.puzzles. $ set (ดัชนี - 4, curnum) this.puzzles. $ set (ดัชนี, ')} else (bottomnum ===' ') {this.puzzles. this.passfn ()}, // ตรวจสอบว่าผ่าน passfn () {ถ้า (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const = newpuzzles.every ระดับ! ')}}}}}}, ready () {this.render ()}} </script> เราเรียกวิธี passFn ในวิธี moveFn เพื่อตรวจจับและวิธี passFn เกี่ยวข้องกับสองจุดความรู้:
(1) วิธีชิ้น
ด้วยวิธีการชิ้นเราสกัดกั้น 15 องค์ประกอบแรกของอาร์เรย์เพื่อสร้างอาร์เรย์ใหม่แน่นอนองค์ประกอบต่อไปนี้ของอาร์เรย์ว่างเปล่า
(2) ทุกวิธี
ผ่านทุกวิธีเราวนลูปว่าแต่ละองค์ประกอบของอาร์เรย์ที่ถูกสกัดกั้นจะเท่ากับค่าดัชนี+1 หรือไม่ หากทั้งหมดเท่ากันมันจะกลับมาเป็นจริง หากมีหนึ่งที่ไม่เท่ากันก็จะส่งกลับเท็จ
หากคุณประสบความสำเร็จในระดับที่ประสบความสำเร็จค่าของ ISPass นั้นเป็นจริงและคุณจะแจ้งเตือน "ขอแสดงความยินดีคุณจะผ่านระดับได้สำเร็จ!" หน้าต่างแจ้ง ถ้าไม่คุณจะไม่แจ้ง
รีเซ็ตเกม
การรีเซ็ตเกมนั้นง่ายมากจริงๆเพียงเพิ่มปุ่มรีเซ็ตและเรียกใช้วิธี render :
<เทมเพลต> <div><ul> <li: class = "{'Puzzle': จริง, 'Puzzle-empty':! Puzzle}" V-for = "Puzzle in Puzzles" V-text = "Puzzle" @click = "Movefn ($ index)"> </li> {return {Puzzles: []}}, วิธีการ: {// reset render () {ให้ Puzzlearr = [], i = 1 // สร้างอาร์เรย์ที่มี 1 ถึง 15 หมายเลขสำหรับ (i; i <16; i ++) {puzzlearr.push (i)} Math.random () - 0.5}); // หน้าแสดง this.puzzles = Puzzlearr this.puzzles.push ('')}, // คลิกบล็อก movefn (ดัชนี) {// รับตำแหน่งคลิกและค่าของมันขึ้นและลงและซ้ายให้ curnum = this.puzzles [index], leftnum = this.puzzles this.puzzles [ดัชนี - 4], bottomNum = this.puzzles [ดัชนี + 4] // แลกเปลี่ยนค่ากับตำแหน่งที่ว่างเปล่าถ้า (ซ้าย num === '') {this.puzzles. $ set (ดัชนี - 1, curnum) this.puzzles. $ set (ดัชนี, ') this.puzzles. $ set (index, '')} else ถ้า (topnum === '') {this.puzzles. $ set (ดัชนี - 4, curnum) this.puzzles. $ set (ดัชนี, ')} else (bottomnum ===' ') {this.puzzles. this.passfn ()}, // ตรวจสอบว่าผ่าน passfn () {ถ้า (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const = newpuzzles.every ระดับ! ')}}}}}}, ready () {this.render ()}} </script> <style> @import url (' ./ สินทรัพย์/css/bootstrap.min.css '); ร่างกาย {font-family: Arial, } .Box {WIDTH: 400PX; มาร์จิ้น: 50px auto 0;}. ปริศนา-ห่อ {width: 400px; ความสูง: 400px; มาร์จิ้น-ก้น: 40px; Padding: 0; ความเป็นมา: #CCC; รายการสไตล์: ไม่มี;}. ปริศนา {ลอย: ซ้าย; ความกว้าง: 100px; ความสูง: 100px; ขนาดตัวอักษร: 20px; ความเป็นมา: #F90; TEXT-ALIGN: CENTER; ความสูงของสาย: 100px; ชายแดน: 1px Solid #CCC; Box-Shadow: 1px 1px 4px; Text-Shadow: 1PX 1PX 1PX #B9B4B4; เคอร์เซอร์: ตัวชี้;}. ปริศนา-ว่างเปล่า {พื้นหลัง: #CCC; Box-shadow: inset 2px 2px 18px;}. btn-reset {box-shadow: inset 2px 2px 18px;} </style>ที่นี่ฉันเพิ่มรหัส CSS
สรุป
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ในความเป็นจริงปริมาณรหัสของเกมนี้ไม่มากนักและฟังก์ชั่นคะแนนไม่ซับซ้อนมาก อย่างไรก็ตามการเขียนเกมดังกล่าวผ่าน Vue จะช่วยให้เราเข้าใจหลักการตอบสนองของ Vue ที่ขับเคลื่อนด้วยข้อมูล ในขณะที่ทำให้จำนวนรหัสง่ายขึ้น แต่ก็เพิ่มความสามารถในการอ่านของรหัส ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้ Vue