دعونا نلقي نظرة على الاداءات أولاً:
التحليل الوظيفي
بالطبع ، الأمر كله يتعلق باللعب. بصفتنا عشاق VUE ، يجب أن نتعمق في اللعبة واستكشاف تنفيذ الكود. بعد ذلك ، دعنا نحلل الوظائف اللازمة بشكل أساسي لإكمال مثل هذه اللعبة. أدناه سوف أدرج مباشرة النقاط الوظيفية لهذا المثال:
1. قم بإنشاء شبكات أرقام من 1 إلى 15 بشكل عشوائي. يجب أن يظهر كل رقم ويظهر مرة واحدة فقط.
2. بعد النقر على مربع رقمي ، إذا كان هناك مكان واحد أعلاه ، أسفل ، يسار واليمين ، وضعي التبادل
3. في كل مرة تتحرك الشبكة ، نحتاج إلى التحقق مما إذا كانت قد نجحت في إقرار المستوى.
4. بعد النقر على زر إعادة تعيين لعبة ، تحتاج إلى إعادة ترتيب الألغاز
ما سبق هي النقاط الوظيفية الرئيسية لهذا المثال. يمكن ملاحظة أن وظائف اللعبة ليست معقدة. نحتاج فقط إلى كسرها واحدًا تلو الآخر وسيكون على ما يرام. بعد ذلك ، سأعرض رموز VUE لكل نقطة وظيفية.
بناء لوحة ألعاب
كإطار JS الذي يعتمد على البيانات ، يجب أن تكون قوالب HTML الخاصة بـ VUE مرتبطة بالبيانات. على سبيل المثال ، يجب عدم كتابة شبكة كتلة مثل هذه اللعبة هنا. الرمز كما يلي:
<implate> <viv> <ul> <li: class = "{'puzzle': true ، 'puzzle-regty':! puzzle}" v-for = "puzzle in buzzles" v-text = "puzzle"> </li> </ul> </viv> </filect> <splate> {default () 8 ، 9 ، 10 ، 11 ، 12 ، 13 ، 14 ، 15]}}} </script>لقد حذفت جزء نمط CSS هنا ، لذلك لا داعي للقلق بشأنه الآن. في الكود أعلاه ، كتبنا الأرقام من 1 إلى 15 في صفيف. من الواضح أن هذا لم يتم فرزه بشكل عشوائي ، لذلك سنقوم بتنفيذ وظيفة الفرز العشوائي.
فرز عشوائي للأرقام
<implate> <viv> <ul> <li: class = "{'puzzle': true ، 'puzzle-repty':! puzzle}" v-for = "puzzle in buzzles" v-text = "puzzle"> </li> </ul> </viv> </fumplate> <sript> default {data () () {LET PUZZLEARR = [] ، i = 1 // قم بإنشاء صفيف من 1 إلى 15 رقمًا لـ (i ؛ i <16 ؛ i ++) {puzzlearr.push (i)} // تعطل الصفيف puzzlearr = puzzlearr.sort (() => {random () - 0.5}) ؛ // تعرض الصفحة this.puzzles = puzzlearr this.puzzles.push ('')} ،} ، ready () {this.render ()}} في الكود أعلاه ، نستخدم الحلقة لإنشاء صفيف مرتبة من 1 إلى 15. ثم نستخدم طريقة فرز JS الأصلي لتعطيل الأرقام بشكل عشوائي. هذا يحتوي أيضًا على نقطة معرفة ، وهي طريقة Math.random() .
لاستخدام طريقة sort() للفرز المخصص ، نحتاج إلى توفير وظيفة مقارنة ، ثم إرجاع رقم يستخدم لتوضيح الترتيب النسبي لهاتين القيمتين ، وقيمة الإرجاع الخاصة بها هي كما يلي:
1. إرجاع قيمة أقل من 0 ، مما يشير إلى أن A أقل من ب
2. إرجاع 0 ، مما يشير إلى أن A يساوي B
3. إرجاع قيمة أكبر من 0 ، مما يشير إلى أن A أكبر من ب
هنا ، يتم استخدام Math.random() لإنشاء رقم عشوائي بين 0 و 1 ، ثم طرح 0.5. وبهذه الطريقة ، سيعيد نصف الاحتمال قيمة أقل من 0 ، وسيعود نصف الاحتمال قيمة أكبر من 0 ، مما يضمن عشوائي الصفيف الذي تم إنشاؤه ويدرك وظيفة توليد عشوائي ديناميكي من الشبكات الرقمية.
تجدر الإشارة إلى أننا أدخلنا أيضًا سلسلة فارغة في نهاية الصفيف لإنشاء شبكة فارغة فريدة من نوعها.
تبديل وضع كتلة
<implate> <viv> <ul> <li: class = "{'puzzle': true ، 'puzzle-regty':! puzzle}" v-for = "puzzle in buzzles" v-text = "puzzle" @click = "movefn ($ index)"> </li> </ul> </div> </tomplate> <script> } ، الأساليب: {// reset render () {let puzzlearr = [] ، i = 1 // قم بإنشاء صفيف من 1 إلى 15 أرقام لـ (i ؛ i <16 ؛ i ++) {puzzlearr.push (i)} // عشوائي لتعطيل Array puzzlearr = pozzlearr.sort ( // تُظهر الصفحة this.puzzles = puzzlearr this.puzzles.push ('')} ، // انقر فوق block movefn (index) {// احصل على موضع النقر وقيمه لأعلى ولأسفل واليسرى دعنا curnum = this.puzzles [index] ، leftnum = this.puzzles [index - 1] this.puzzles [index - 4] ، bottomnum = this.puzzles [index + 4] // تبادل القيمة مع الموضع الفارغ إذا (LeftNum === '') this.puzzles. $ set (index ، '')} if (topNum === '' ') {this.puzzles. $ set (index - 4 ، curnum) this.puzzles. $ set (index ،' ')} else} if ($ ===') }} ، جاهز () {this.render ()}} </script>1. هنا نضيف أولاً Click event @click = "movefn ($ index)" إلى li من كل شبكة ، ونستخدم معلمة $ index للحصول على موضع نقرة في الصفيف.
2. ثانياً ، احصل على قيم الفهرس للأرقام لأعلى ، لأسفل ، يسار واليمين في الصفيف ، مثل الفهرس - 4 ، الفهرس + 4 ، الفهرس - 1 ، فهرس + 1
3. عندما نجد مكانًا فارغًا في الجزء العلوي والسفلي واليسار واليمين ، نقوم بتعيين الموضع الفارغ على رقم الشبكة التي تم النقر عليها حاليًا في الموضع الخالي وضبط الموضع الذي تم النقر عليه الحالي إلى فارغ
ملاحظة: لماذا نستخدم طريقة SET $ بدلاً من تعيين القيم مباشرة؟ هذا يحتوي على نقاط المعرفة على مبدأ استجابة VUE.
// بسبب قيود JavaScript ، لا يمكن لـ Vue.js اكتشاف تغييرات الصفيف التالية: // 1. تعيين العناصر مباشرة مع الفهارس ، مثل Vm.Items [0] = {} ؛ // 2. قم بتعديل طول البيانات ، مثل vm.items.length = 0. // لحل المشكلة (1) ، vue.js يمتد مجموعة المراقبة ويضيف طريقة $ set () إلى ذلك:تحقق مما إذا كان الاختبار ناجحًا
<implate> <viv> <ul> <li: class = "{'puzzle': true ، 'puzzle-regty':! puzzle}" v-for = "puzzle in buzzles" v-text = "puzzle" @click = "movefn ($ index)"> </li> </ul> </div> </tomplate> <script> } ، الأساليب: {// reset render () {let puzzlearr = [] ، i = 1 // قم بإنشاء صفيف من 1 إلى 15 أرقام لـ (i ؛ i <16 ؛ i ++) {puzzlearr.push (i)} // عشوائي لتعطيل Array puzzlearr = pozzlearr.sort ( // تُظهر الصفحة this.puzzles = puzzlearr this.puzzles.push ('')} ، // انقر فوق block movefn (index) {// احصل على موضع النقر وقيمه لأعلى ولأسفل واليسرى دعنا curnum = this.puzzles [index] ، leftnum = this.puzzles [index - 1] this.puzzles [index - 4] ، bottomnum = this.puzzles [index + 4] // تبادل القيمة مع الموضع الفارغ إذا (LeftNum === '') this.puzzles. $ set (index ، '')} آخر إذا (topNum === '' ') {this.puzzles. $ set (index - 4 ، curnum) this.puzzles. $ set (index ،' ') this.passfn ()} ، // تحقق مما إذا كان يمر passfn () {if (this.puzzles [15] === '') {const newPuzzles = this.puzzles.slice (0 ، 15) المستوى! ')}}}}}} ، جاهز () {this.render ()}} </script> نسمي طريقة passFn في طريقة moveFn للكشف ، وتتضمن طريقة passFn نقطتين معرفة:
(1) طريقة الشريحة
من خلال طريقة الشريحة ، نقوم باعتراض العناصر الخمسة عشر الأولى من الصفيف لإنشاء صفيف جديد ، بالطبع ، العنصر التالي من الصفيف فارغ.
(2) كل طريقة
من خلال كل طريقة ، نحلق ما إذا كان كل عنصر من عناصر الصفيف المعترض مساوياً لقيمة الفهرس+1. إذا كانت جميعها متساوية ، فإنها تعود بشكل صحيح. إذا كان هناك واحد غير متساو ، فإنه يعود خطأ.
إذا نجحت في اجتياز المستوى ، فإن قيمة ISPASS صحيحة ، وسوف تنبه "تهانينا ، فأنت تمرير المستوى بنجاح!" نافذة سريعة. إذا لم يكن كذلك ، فلن تطالب.
إعادة ضبط اللعبة
إعادة تعيين اللعبة بسيطة للغاية ، فقط أضف زر إعادة الضبط واتصل طريقة render عليها:
<implate> <viv> <ul> <li: class = "{'puzzle': true ، 'puzzle-repty':! puzzle}" v-for = "puzzle in buzzles" v-text = "puzzle" @click = "movefn ($ index)"> </li> </ul> @click = "render" {data () {return {puzzles: []}} ، الأساليب: {// إعادة تعيين render () {let puzzlearr = [] ، i = 1 // إنشاء صفيف يحتوي على 1 إلى 15 رقمًا (i ؛ i <16 ؛ i ++) {pozzlearr.push ( Math.Random () - 0.5}) ؛ // تُظهر الصفحة this.puzzles = puzzlearr this.puzzles.push ('')} ، // انقر فوق block movefn (index) {// احصل على موضع النقر وقيمه لأعلى ولأسفل واليسرى دعنا curnum = this.puzzles [index] ، leftnum = this.puzzles [index - 1] this.puzzles [index - 4] ، bottomnum = this.puzzles [index + 4] // تبادل القيمة مع الموضع الفارغ إذا (LeftNum === '') this.puzzles. $ set (index ، '')} آخر إذا (topNum === '' ') {this.puzzles. $ set (index - 4 ، curnum) this.puzzles. $ set (index ،' ') this.passfn ()} ، // تحقق مما إذا كان يمر passfn () {if (this.puzzles [15] === '') {const newPuzzles = this.puzzles.slice (0 ، 15) المستوى! ')}}}}}} ، ready () {this.render ()}} </script> <style>@import url ('. } .box {width: 400px ؛ الهامش: 50px Auto 0 ؛}. Puzzle-Wrap {Width: 400px ؛ الارتفاع: 400 بكسل ؛ القاع الهامش: 40 بكسل ؛ الحشو: 0 ؛ الخلفية: #CCC ؛ قائمة القائمة: لا شيء ؛}. اللغز {float: اليسار ؛ العرض: 100px ؛ الارتفاع: 100px ؛ حجم الخط: 20 بكسل ؛ الخلفية: #F90 ؛ محاذاة النص: المركز ؛ رفع الخط: 100px ؛ الحدود: 1px الصلبة #CCC ؛ Box-shadow: 1px 1px 4px ؛ النص الشادو: 1px 1px 1px #B9b4b4 ؛ المؤشر: مؤشر ؛}. puzzle-regty {background: #ccc ؛ box-shadow: Inset 2px 2px 18px ؛}.هنا أضفت رمز CSS.
لخص
ما سبق هو كل شيء عن هذا المقال. في الواقع ، فإن حجم التعليمات البرمجية لهذه اللعبة ليس كثيرًا ، ونقاط الوظيفة ليست معقدة للغاية. ومع ذلك ، فإن كتابة مثل هذه اللعبة من خلال VUE ستساعدنا على فهم مبدأ VUE المستجيب الذي تقوده البيانات. أثناء تبسيط مقدار الكود ، فإنه يزيد أيضًا من قابلية قراءة الكود. آمل أن يكون هذا المقال مفيدًا للجميع لتعلم بعض Vue.