فرادرسساخت بازی دوز با جاوا اسکریپت – از صفر تا صد
در این مقاله به صورت عملی با روش ساخت بازی دوز با جاوا اسکریپت خالص آشنا خواهیم شد. برای اجرای مراحل این راهنما شما باید برخی اطلاعاتی مقدماتی در مورد HTML ،CSS و تابع‌های سلکتور کوئری داشته باشید. ابتدا یک ساختار ابتدایی برای بازی خود ایجاد می‌کنیم. بنابراین باید مطمئن شویم که یک رابط کاربری مناسب داریم. برای سهولت کار این بخش را به چند بخش کوچک‌تر تقسیم می‌کنیم. به این ترتیب نگهداری کد آسان خواهد بود. این بخش‌ها به شرح زیر هستند:
- عنوان
- شبکه 3 در 3
- نمایش اطلاعات نوبت بازیکن جاری
- نمایش برنده بازی
نمایش نتیجه تساوی - دکمه شروع مجدد برای کل بازی
در ادامه روند بازی را برای هر کلیک روی خانه‌ها مرور می‌کنیم.
- هر گونه کلیک روی خانه‌های جدول بازی ردگیری می‌شود.
- بررسی می‌شود آیا حرکت مجاز است و آیا قبلاً روی خانه مورد نظر کلیک شده است یا نه.
- حالت بازی به‌روزرسانی می‌شود.
- حالت بازی اعتبارسنجی می‌شود.
- تغییرهای ایجاد شده در UI به‌روزرسانی می‌شود.
- تا پایان یافتن بازی این مراحل تکرار می‌شود.
در ادامه به کدنویسی پروژه بازی می‌پردازیم.
ساختار پوشه‌های پروژه
کار خود را با ساخت رابط کاربری بازی آغاز می‌کنیم. چنان که پیش‌تر اشاره کردیم، این یک بازی ساده است و از این رو رابط کاربری آن نیز ساده خواهد بود.
این ساختار شامل سه فایل اصلی به شرح زیر است:
- index.html – شامل ساختار UI است.
- style.css – ظاهر زیباتری به بازی می‌بخشد.
- script.js – شامل منطق بازی است.
بخش HTML ساخت بازی دوز
فایل HTML این بازی به صورت زیر است:
استایل شیت بازی در تگ <head> قرار دارد تا استایل شیت پیش از HTML بارگذاری شود. همچنین فایل script.js را نیز درست بالای تگ پایانی </body> قرار داده‌ایم تا فایل جاوا اسکریپت پس از HTML بارگذاری شود.
یک عنصر <h2> نیز داریم که اطلاعات بازی و دکمه ری‌استارت را نمایش می‌دهد. همچنین هر کدام شامل خصوصیات اندیس خانه‌های داده‌ای هستند که برای ردگیری کلیک‌ها مورد استفاده قرار می‌گیرند.
بخش CSS ساخت بازی دوز
فایل CSS بازی دوز ما به صورت زیر است:
استایل‌هایی که در فایل فوق می‌بینید روی کانتینر game. برای هر خانه گرید CSS ما پیاده‌سازی می‌شوند. ما یک گرید 3 در 3 می‌سازیم تا مطمئن شویم که قالب ستون گرید مناسب است و سپس آن را تکرار می‌کنیم. این کد خانه‌ها را به 2 ستون تقسیم می‌کند و به این ترتیب خانه به صورت خودکار عرض خود را مشخص می‌سازد.
بخش جاوا اسکریپت ساخت بازی دوز
اکنون نوبت به طراحی منطق بازی می‌رسد.
ما کدهای جاوا اسکریپت را به قطعه‌های کوچکی تقسیم کرده‌ایم.
قبلاً منطق بازی را توضیح داده‌ایم. اینک باید منطق بازی را مدیریت کنیم.
handleCellClick
در تابع handleCellClick باید دو مورد را مدیریت کنیم. ابتدا باید بررسی کنیم آیا قبلاً روی خانه کنونی کلیک شده است یا نه. اگر چنین نباشد، روند بازی ادامه می‌یابد. روش کار به صورت زیر است:
handleCellPlayed
در این دستگیره، دو مورد را به‌روزرسانی می‌کنیم. ابتدا حالت بازی را به‌روزرسانی کرده و سپس رابط کاربری را رفرش می‌کنیم.
در این تابع خانه‌ای که کاربر کلیک کرده و اندیس آن را دریافت می‌کنیم.
handleResultValidation
اعتبارسنجی نتیجه، بخشی اساسی از بازی دوز را تشکیل می‌دهد. در این بخش بررسی می‌کنیم آیا بازی با یک برنده خاتمه یافته یا به تساوی انجامیده است. در ادامه به بررسی این نکته می‌پردازیم که آیا بازیکن کنونی برنده شده است یا نه.
در صورتی که بازی به تساوی رسیده باشد، شرایط دیگر را بررسی می‌کنیم. در برخی شرایط خاص است که بازی به تساوی می‌انجامد.
handlePlayerChange
این تابع بازیکن کنونی را عوض کرده و حالت بازی را به‌روزرسانی می‌کند. در این بخش از عملگر سه‌تایی برای انتساب مقدار به بازیکن جدید استفاده می‌کنیم.
handleRestartGame
این تابع همه ردپاهای بازی را پاک می‌کند. همه نشانه‌های روی صفحه بازی حذف می‌شوند و حالت بازی به وضعیت ابتدایی تغییر می‌یابد.
سخن پایانی
این یک راهنمای مقدماتی است و بدیهی است که جای زیادی برای بهبود این بازی وجود دارد. مثلاً می‌توان حالت چند بازیکنی را به آن اضافه کرد. امیدواریم از مطالعه این راهنما لذت برده و با کارکرد مقدماتی بازی دوز آشنا شده باشید.
