اولین پروژه تمرینی – آماده‌سازی اولیه

The First Training Project

به فصل جدید سری آموزش رایگان Vue js از صفر تا صد خوش آمدید. در این فصل قصد داریم یک بازی بسیار ساده بسازیم که در آن باید به یک هیولا حمله کنیم و طبیعتا هیولا نیز به ما حمله می کند و در هر بار حمله مقداری از health ما کم می شود. این فرآیند آنقدر ادامه خواهد داشت که یا ما و یا هیولا تمام health خود را از دست بدهیم. هدف از این فصل این است که به صورت عملی با موارد یاد گرفته شده در فصل های قبل آشنا بشویم.

شما می توانید فایل های آماده HTML و CSS این پروژه را از این لینک دانلود کنید. من کدها را از قبل و به صورت آماده برایتان نوشته ام تا تمرکز این فصل روی کدهای جاوا اسکریپت باشد. زمانی که فایل بالا را از حالت فشرده خارج کنید یک فایل index.html و یک پوشه css خواهید داشت که درون آن دو فایل foundation.min.css و app.css را مشاهده می کنید.

در اولین قدم باید درون پوشه اصلی برنامه (در کنار index.html) یک فایل به نام app.js را بسازید. حالا آن را درون index.html وارد کنید:

// بقیه کدها //
</div>
<script src="app.js"></script>
</body>
</html>

حالا باید به همین فایل index.html نگاهی بیندازیم تا بدانیم کدام بخش های برنامه نیاز به کار دارند. در همان ابتدا دو div با کلاس healthbar داریم که قرار است مقدار health (در بازی های ویدیویی به آن «خون» می گویند) ما و هیولا را مشخص می کند (به صورت progress bar) بنابراین باید آن ها را تغییر بدهیم:

            <div class="healthbar">
                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">

                </div>
            </div>

جدا از آن، دکمه هایی را نیز داریم که هر کدام کار خاصی را انجام می دهند:

    <section class="row controls">
        <div class="small-12 columns">
            <button id="start-game">START NEW GAME</button>
        </div>
    </section>
    <section class="row controls">
        <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>

Start New Game برای شروع مجدد بازی، Attack برای حمله کردن به هیولا، Special Attack برای حمله با قدرت بیشتر، Heal برای کسب health و Give Up برای تسلیم شدن در مقابل هیولا است. در نهایت لیستی به شکل زیر داریم:

        <div class="small-12 columns">
            <ul>
                <li>

                </li>
            </ul>
        </div>

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

در ابتدا وارد فایل app.js می شویم و یک نمونه از کلاس Vue را می سازیم:

new Vue ({
    
});

حالا باید از خودمان بپرسیم که چه عنصری را هدف بگیریم. من Div با آیدی app را هدف می گیرم (این div کل برنامه من را درون خود دارد). پس از این کار باید در قسمت data مقدار health خودمان و هیولا را نیز ذخیره کنیم:

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

حالا باید خصوصیتی را داشته باشیم که وضعیت بازی را مشخص کند (آیا کاربر در حال بازی است یا خیر؟):

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

همانطور که می بینید در حالت پیشفرض، بازی در حال اجرا نیست. این خصوصیت به ما خواهد گفت که آیا باید دکمه Start a new game را نمایش بدهیم یا دکمه های attack و heal و غیره (دکمه های مربوط به بازی).

حالا به فایل index.html می رویم و مقدار health خودمان و هیولا را درون div های healthbar مشخص می کنیم:

                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">
                    {{ monsterHealth}}
                </div>

و:

                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">
                    {{ playerHealth }}
                </div>

با ذخیره و اجرای کدهای بالا دو عدد 100 را در healthbar های مرورگر خود می بینیم:

مشکل اینجاست که این عدد، مستقل از خود progress bar است. یعنی به همراه نوار سبز رنگ کم و زیاد نمی شود. اگر فایل app.css را باز کنید، متوجه می شوید که در ابتدا width برای کلاس healthbar روی 80 درصد تنظیم شده است و دارای transition نیز می باشد:

.healthbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: auto;
    transition: width 500ms;
}

بنابراین باید width را همراه با عدد تغییر دهیم. چطور؟ می توانیم با استفاده از v-bind به استایل های این عنصر اضافه کنیم:

            <div class="healthbar">
                <div
                        class="healthbar text-center"
                        style="background-color: green; margin: 0; color: white;"
                        :style="{width: playerHealth + '%'}">
                    {{ playerHealth }}
                </div>
            </div>

این div همان div قبلی است و فقط جهت خواناتر شدن کدها آن را از وسط شکسته ام. همانطور که می دانید v-bind به صورت خلاصه (:) نوشته می شود بنابراین :style یعنی استایل پاس داده شده را به این عنصر bind کن. در ضمن هیچ مشکلی نیست که این div در حال حاضر style را دارد و ما دوباره style را به آن bind می کنیم؛ Vue در پشت صحنه تمام این استایل ها را ادغام خواهد کرد. در نهایت گفته ایم که width باید برابر با مقدار playerHealth باشد، البته علامت درصد را نیز به صورت رشته به آن اضافه کنید در غیر این صورت مثلا عدد 80 را برابر 80 پیکسل می گیرد که صفحه ما را به هم می ریزد.

حالا عددی مثل 80 می شود 80 درصد. 80 درصد چه چیزی؟ 80 درصدِ عنصر پدری خود که container یا نگهدارنده آن است (نوار سبز هیچ گاه از عنصر div پدری خود بیرون نمی زند). حالا اگر کدها را ذخیره کنید، مقدار health کاربر با نوار سبز همگام می شود:

حالا همین کار را با div مربوط به monster نیز انجام می دهیم:

            <div class="healthbar">
                <div
                        class="healthbar text-center"
                        style="background-color: green; margin: 0; color: white;"
                        :style="{width: monsterHealth + '%'}">
                    {{ monsterHealth }}
                </div>
            </div>

با این کار هر دو healthbar را با خصوصیاتشان در data هماهنگ کرده ایم.