پیاده‌سازی منطق شروع بازی

Implement the Logic of Starting the Game

در قسمت قبل healthbar ها را به خصوصیاتشان در Data هماهنگ کردیم اما حالا باید نمایش کنترل های بازی را تصحیح کنیم. ما اجرای بازی را با خصوصیتی به نام gameIsRunning چک می کردیم:

new Vue({
    el: '#app',
    data: {
        playerHealth: 100,
        monsterHealth: 100,
        gameIsRunning: false
    }
});

این خصوصیت در حالت پیش فرض false است یعنی در حالت پیش فرض کسی در حال بازی نیست بنابراین باید به قسمتی از کدهای HTML برویم که مسئول نمایش کنترل های بازی هستند (دکمه های attack و heal و start a new game و غیره) و با استفاده از v-if آن را شرطی کنیم:

    <section class="row controls" v-if="!gameIsRunning">
        <div class="small-12 columns">
            <button id="start-game">START NEW GAME</button>
        </div>
    </section>
    <section class="row controls" v-else>
        <div class="small-12 columns">
            <button id="attack">ATTACK</button>
            <button id="special-attack">SPECIAL ATTACK</button>
            <button id="heal">HEAL</button>
            <button id="give-up">GIVE UP</button>
        </div>
    </section>

در section اول که مربوط به دکمه start a new game می باشد با استفاده از v-if چک کرده ام که اگر gameIsRunning غلط بود (علامت تعجب شرط را برعکس می کند) این دکمه نمایش داده شود. در section دوم نیز از v-else استفاده کرده ام که یعنی در غیر این صورت (اگر شرط اول صحیح نبود) section دوم نمایش داده شود.

نکته مهم: برای استفاده از v-else و v-if به شکل بالا باید دو نکته حتما رعایت شود: هر دو عنصر باید از یک نوع باشند (در کد بالا هر دو section هستند) و همچنین هر دو عنصر باید پشت سر هم آمده باشند. اگر غیر از این باشد باید از دو v-if جداگانه استفاده کنید.

اگر در حال حاضر کدها را ذخیره و اجرا کنید، فقط دکمه start a new button نمایش داده می شود که البته با کلیک روی آن اتفاقی نمی افتد. برای اینکه منطق آن را بنویسیم باید یک Event listener را به آن وصل کنیم بنابراین در همان فایل index.html می گوییم:

    <section class="row controls" v-if="!gameIsRunning">
        <div class="small-12 columns">
            <button id="start-game" @click="startGame">START NEW GAME</button>
        </div>
    </section>

یعنی اگر کاربر روی این دکمه کلیک کند، متد startGame برای او اجرا می شود. حالا باید این متد را تعریف کنیم بنابراین به app.js رفته و قسمت methods را برای شیء Vue می نویسیم:

new Vue({
    el: '#app',
    data: {
        playerHealth: 100,
        monsterHealth: 100,
        gameIsRunning: false
    },
    methods: {
        startGame: function () {
            this.gameIsRunning = true;
            this.playerHealth = 100;
            this.monsterHealth = 100;
        }
    }
});

همانطور که می بینید این متد در ابتدا خصوصیت gameIsRunning را روی true می گذارد که به برنامه اعلام کند کاربر قصد بازی کردن را دارد. همچنین باید health کاربر و هیولا را روی 100 بگذاریم چرا که ممکن است از قبل کاربر در بازی کرده باشد و این مقادیر در data تغییر کرده باشند. برای این که با هر بازی جدید، مطمئن شویم همه چیز ریست می شود این کار را انجام داده ایم. حالا می توانیم کدها را ذخیره کرده و در مرورگر اجرا کنید. با کلیک روی دکمه start a new game کنترل های بازی برای شما نمایش داده می شوند.

در قدم بعدی باید به فایل index.html برگردیم تا برای هر کدام از کنترل های بازی متدی را بنویسیم. این متدها باید به یک event listener متصل باشند بنابراین من این کار را انجام می دهم:

    <section class="row controls" v-else>
        <div class="small-12 columns">
            <button id="attack" @click="attack">ATTACK</button>
            <button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button>
            <button id="heal" @click="heal">HEAL</button>
            <button id="give-up" @click="giveUp">GIVE UP</button>
        </div>
    </section>

من متدهای مربوط به هر کدام را در فایل app.js تعریف می کنم:

new Vue({
    el: '#app',
    data: {
        playerHealth: 100,
        monsterHealth: 100,
        gameIsRunning: false
    },
    methods: {
        startGame: function () {
            this.gameIsRunning = true;
            this.playerHealth = 100;
            this.monsterHealth = 100;
        },
        attack: function () {

        },
        specialAttack: function () {

        },
        heal: function () {

        },
        giveUp: function () {

        }
    }
});

حالا که بدنه تمام توابع را نوشته ایم باید به فکر منطق پیاده سازی آن ها باشیم. در attack باید به هیولا ضربه بزنیم تا از health آن کم شود، سپس هیولا نیز باید به ما ضربه بزند (غیر از give up که تسلیم شدن در بازی است، در تمام حالت های دیگر هیولا نیز به ما ضربه خواهد زد). Special attack نیز دقیقا مانند attack است با این تفاوت که شدت ضربه ما بیشتر خواهد بود. Heal نیز به health ما اضافه می کند و give up هم که کلا بازی را ریست می کند. من با attack شروع می کنم. برای محاسبه مقدار ضربه در attack از چه چیزی استفاده کنیم؟ اگر بخواهیم از math.random استفاده کنیم، عددی بین 0 تا 1 می گیریم که هیچ وقت خود یک را شامل نمی شود بنابراین برای برنامه ما خوب نیست (بازی بسیار طولانی می شود). راه حل به شکل زیر است:

        attack: function () {
            var max = 10;
            var min = 3;
            var damage = Math.max(Math.floor(Math.random() * max) + 1, min);
        },

در ابتدا متغیری به نام max دارم که قرار است حداکثر ضربه من به هیولا را مشخص کند (آن را روی 10 گذاشته ام) و سپس برخلاف آن min را داریم که حداقل ضربه من خواهد بود. اگر قرار است ضربه ای که ما می زنیم بین 10 و 3 باشد چطور می توانیم یک عدد تصادفی بین این دو ایجاد کنیم؟

متغیر damage این کار را بر عهده می گیرد. من توضیح این متغیر را از درون به بیرون می دهم تا بهتر متوجه بشوید:

به شما گفتم که random به ما عددی بین 0 تا 0.99 می دهد. اگر آن را در 10 ضرب کنیم، عددی بین 0 تا 9.9999 را خواهیم داشت (اعداد floating point).
حالا اگر floor (گِرد کردن عدد به پایین) آن را بگیریم می شود عددی بین 0 تا 9 (اعشار حذف می شود چرا که عدد رو به پایین گرد شده است).
در مرحله بعد 1 واحد به کل این معادله اضافه می کنیم تا بشود عددی بین 0 تا 10.
ما گفتیم می خواهیم عددی بین 3 تا 10 بگیریم بنابراین می توان از max استفاده کرد که از بین چند عدد، بزرگترین آن ها را انتخاب می کند. ما با این کار اگر معادله ما عددی کمتر از 3 تولید کند، در مقابل متغیر min (که 3 است) کمتر خواهد بود بنابراین Math.max همان min را انتخاب می کند و در غیر این صورت همان عدد نهایی در معادله ما انتخاب خواهد شد. بدین شکل عددی بین 3 تا 10 خواهیم داشت.

در قسمت بعد به شما توضیح می دهم که چطور این مقدار را از health هیولا کم کنیم و چطور هیولا به ما ضربه بزند.