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

The First Training Project

0
113
Vue.JS 2: اولین پروژه ی تمرینی – آماده سازی اولیه

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

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

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

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

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

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

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

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

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

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

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

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

و:

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

اضافه کردن اعداد به healthbar ها
اضافه کردن اعداد به healthbar ها

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

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

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

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

همگام سازی healthbar کاربر با عدد آن
همگام سازی healthbar کاربر با عدد آن

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

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

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

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید