تيك تاك تو الجزء 0: مقارنة Svelte والتفاعل
تيك تاك تو الجزء 1: Svelte و Canvas 2D
تيك تاك تو الجزء 2: عديمي الجنسية التراجع / الإعادة
تيك تاك تو ، الجزء 3: تراجع / الإعادة مع تخزين الأوامر
تيك تاك تو الجزء 4: التفاعل مع القارورة الخلفية باستخدام HTTP
في هذا الجزء ، نناقش تنفيذ لعبة Tic Tac Toe باستخدام نمط القيادة ، مع تخزين فرق التراجع / الإعادة بدلاً من تخزين حالات فردية ، مع وصول عشوائي إلى كل خطوة من تاريخ اللعبة.
رمز البدء
انتهى الجزء السابق من المقالة بالرمز التالي: رمز REPL .
نعلق جميع الشفرات التي ستنتج أخطاء عند إجراء التغييرات. نحن نملأ جميع خلايا ساحة اللعب بوحدات: Code on REPL
تخزين الدولة
رمز RELP
تخزين الدولة المضافة. يعرض الملعب الآن محتويات مستودع الحالة . بشكل افتراضي ، كان ملعب الملعب مليئًا بالتعويضات. مخرجات الحالة المضافة في مكون التطبيق .
فئة القيادة
رمز RELP
أضفنا فئة الأوامر إلى ملف helpers.js . تم تغيير فئة المحفوظات لتخزين الأوامر بدلاً من الحالات.
هنا لم أستطع إجراء تحديث الحالة الصحيح. إذا كان أحد يعرف ، قل لي ، من فضلك. وبشكل عام ، هل من الممكن استخدام تخزين الحالة بهذه الطريقة؟
نقل الترجمة
رمز RELP
إضافة حظر على النقر فوق خلية مملوءة بالفعل. أجرى مُنشئ فئة الأوامر ترجمة لهذه الخطوة. خرج الوضع الصحيح.
حالة الملعب
رمز RELP
في المراحل السابقة ، كان هناك شك حول الاستخدام الصحيح للتخزين المنفصل للدولة ، لذلك تمت إزالته ونقل تخزين حالة الملعب إلى فئة المحفوظات - تمت إضافة حقل الحالة .
وصول عشوائي
رمز RELP
وأضاف الناتج من قائمة الخطوات. يتم الوصول العشوائي إلى أي خطوة من اللعبة عن طريق التنفيذ المتسلسل لأوامر التراجع أو الإعادة للفريق المحدد.
قرار الفائز
رمز RELP
الانتهاء من تحديد الفائز. تخزين الحالة المضافة لعرض الحالة.
استنتاج
يعد تخزين محفوظات التحركات باستخدام الحالات أكثر ملاءمة للاستخدام ، ولكنه مكلف في الذاكرة ، لأنه في كل خطوة ، يتم إجراء تكرار لحالة اللعبة بأكملها. في حالة التطبيقات ذات الحجم الكبير للطراز ، من الأفضل استخدام تخزين الأوامر في السجل.
مستودع جيثب
https://github.com/nomhoi/tic-tac-toe-part3
تثبيت اللعبة على الكمبيوتر المحلي:
git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev
نطلق اللعبة في متصفح على العنوان: http: // localhost: 5000 / .