کدنویسی متدهای باقی‌مانده در بازی

Coding the Remaining Methods in the Game

توسط

1 مهر 1399

Vue.JS 2: کدنویسی متد های باقی مانده در بازی – قسمت 19

در قسمت قبل کدهای متد 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();
},

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();
},

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();
},

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();
},

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();
},

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();
},

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;
},

giveUp: function () {

this.gameIsRunning = false;

حالا تمام دکمه های برنامه ما بدون خطا کار می کنند اما مسئله ای باقی مانده است. من دوست دارم در قسمتی از برنامه، به کاربر نمایش بدهم که در هر مبارزه، چه ضربه ای به هیولا زده و چه ضربه ای را خورده است؛ به نوعی یک log ساده!

برای پیاده سازی چنین چیزی نیاز به یک خصوصیت جداگانه داریم:

new Vue({
    el: '#app',
    data: {
        playerHealth: 100,
        monsterHealth: 100,
        gameIsRunning: false,
        turns: []
    },
// بقیه کدها //

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();
},

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
    });
},

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 باشد و پیام را هم متناسب با ضربه زدن هیولا تغییر دهیم (در کد بالا مشاهده می کنید). با این کار ضربات را در آرایه خود ذخیره می کنیم اما در قسمت بعد باید کاری کنیم که این ضربات در خود برنامه چاپ و نمایش داده شوند.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند: