
در قسمت قبل کدهای متد attack را کامل کردیم و در این قسمت نوبت به کدهای متدهای Heal و Special Attack می رسد. برای special attack می توانیم از همان کدهای قسمت attack استفاده کنیم و بگوییم:
specialAttack: function () { var damage = this.calculateDamage(10, 20); this.monsterHealth -= damage; if (this.checkWin()) { return; } var damage = this.calculateDamage(5, 12); this.playerHealth -= damage; this.checkWin(); },
همانطور که می بینید special attack من قدرت بیشتری دارد (بین 10 تا 20) ولی ضربات هیولا همان اندازه همیشگی هستند (5 تا 12). منطق این کد تکراری است بنابراین نیازی به توضیح اضافی ندارد اما مسئله ای چشم ما را آزار می دهد. اگر دقت کنید در تمام متدهای ما، هیولا ضربات تکراری را وارد می کند و کد ما نیز به شدت تکرار دارد. ما می توانیم ضربات هیولا را در یک متد جداگانه تعریف کنیم:
giveUp: function () { }, monsterAttacks: function () { var damage = this.calculateDamage(5, 12); this.playerHealth -= damage; this.checkWin(); },
بنابراین می توانیم به متد attack و special attack برویم و به جای تکرار کدها، فقط تابع monster attack را اضافه کنیم. توجه کنید که checkWin را درون همین متد قرار داده ام تا مجبور به چک کردن آن در هر دفعه نباشیم. حالا در متد attack می گوییم:
attack: function () { var damage = this.calculateDamage(3, 10); this.monsterHealth -= damage; if (this.checkWin()) { return; } this.monsterAttacks(); },
و همچنین همین کار را برای specialAttack نیز انجام می دهیم:
specialAttack: function () { var damage = this.calculateDamage(10, 20); this.monsterHealth -= damage; if (this.checkWin()) { return; } this.monsterAttacks(); },
حالا می توانید کدها را در مرورگر تست کنید. برنامه باید بدون مشکل برای شما اجرا شود. در مرحله بعد باید به فکر healing باشیم.
فرض من در این برنامه این است که همیشه مقدار heal (گرفتن خون) 10 عدد باشد بنابراین می گوییم:
heal: function () { this.playerHealth += 10; this.monsterAttacks(); },
یعنی پس از اضافه کردن 10 واحد به health کاربر نوبت هیولا می شود که حمله کند. آیا به نظر شما کد بالا مشکلی دارد؟ قطعا! در حال حاضر هیچ مکانیسمی برای جلوگیری از ارتقاء بیش از حد health وجود ندارد. به طور مثال اگر در همان ابتدای بازی روی دکمه heal بزنید (زمانی که health شما روی 100 باشد) باز هم 10 واحد به این 100 اضافه می شود! اگر کاربر مرتبا روی heal کلیک کند، مقدار health او تا بی نهایت اضافه خواهد شد که اصلا قابل قبول نیست.
برای حل این مشکل به راحتی از یک شرط if استفاده می کنیم:
heal: function () { if (this.playerHealth <= 90) { this.playerHealth += 10; } else { this.playerHealth = 100; } this.monsterAttacks(); },
یعنی اگر health کاربر 90 یا کمتر بود می توانیم 10 واحد را به آن اضافه کنیم، در غیر این صورت باید health را به 100 برگردانیم. چرا؟ اگر health بیشتر از 90 باشد (مثلا 96) و 10 واحد به آن اضافه کنیم، عدد 106 روبرو می شویم که از کل health مجاز بیشتر است و بازی به هم خواهد ریخت.
تنها متدی که باقی مانده است، متد giveUp می باشد. این متد ساده ترین بخش این برنامه است. چرا؟ به دلیل اینکه کاری به جز بستن بازی نداریم! زمانی که کاربر give up می کند (یعنی تسلیم می شود) به ما اعلام کرده است که نمی خواهد بازی را ادامه دهد بنابراین به سادگی می گوییم:
giveUp: function () { this.gameIsRunning = false; },
حالا تمام دکمه های برنامه ما بدون خطا کار می کنند اما مسئله ای باقی مانده است. من دوست دارم در قسمتی از برنامه، به کاربر نمایش بدهم که در هر مبارزه، چه ضربه ای به هیولا زده و چه ضربه ای را خورده است؛ به نوعی یک log ساده!
برای پیاده سازی چنین چیزی نیاز به یک خصوصیت جداگانه داریم:
new Vue({ el: '#app', data: { playerHealth: 100, monsterHealth: 100, gameIsRunning: false, turns: [] }, // بقیه کدها //
من نام این خصوصیت را turns گذاشته و آن را یک آرایه در نظر گرفته ام. چرا؟ به دلیل اینکه می خواهم در هر بار که نوبت ما یا هیولا است، مقدار Damage در آن ذخیره شده و نهایتا روی صفحه به کاربر نمایش داده شود. بنابراین ابتدا به متد attack می رویم و می گوییم:
attack: function () { var damage = this.calculateDamage(3, 10); this.monsterHealth -= damage; this.turns.unshift({ isPlayer: true, text: 'Player hits Monster for ' + damage }); if (this.checkWin()) { return; } this.monsterAttacks(); },
متد unshift دقیقا برعکس متد push در جاوا اسکریپت است (هر دو این متدها مربوط به جاوا اسکریپت عادی هستند)؛ یعنی push عناصر را به انتهای یک آرایه اضافه می کند اما unshift عناصر را به ابتدای یک آرایه اضافه می کند. در کد بالا یک شیء را به آرایه اضافه کرده ایم که حاوی دو خصوصیت است. ابتدا isPlayer که تعیین کننده نوبت است. یعنی این عملیات (در کد بالا وارد کردن ضربه یا همان damage) از سمت کاربر بوده یا از سمت هیولا؟ زمانی که isPlayer روی true است یعنی کاربر این ضربه را وارد کرده است. خصوصیت دوم text است که همان متن نمایش داده شده در برنامه خواهد بود. در اینجا گفته ام Player hits Monster for damage که یعنی بازیکن (کاربر) هیولا را با شدت damage زده است.
حالا همین کار را با متد monsterAttacks انجام می دهیم:
monsterAttacks: function () { var damage = this.calculateDamage(5, 12); this.playerHealth -= damage; this.checkWin(); this.turns.unshift({ isPlayer: false, text: 'Monster hits Player for ' + damage }); },
تفاوت اینجاست که isPlayer باید روی False باشد و پیام را هم متناسب با ضربه زدن هیولا تغییر دهیم (در کد بالا مشاهده می کنید). با این کار ضربات را در آرایه خود ذخیره می کنیم اما در قسمت بعد باید کاری کنیم که این ضربات در خود برنامه چاپ و نمایش داده شوند.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI