تعریف مختصری از ساخت بازی با جاوا اسکریپت

JavaScript (جاوا اسکریپت) در میان ده زبان برنامه‌نویسی پرکاربرد و محبوب قرار دارد. هدف جاوا اسکریپت این است که هر نرم افزار مدرنی بتواند در هر مرورگری به اجرا در بیایید و همچنین این زبان برنامه‌نویسی تاکید شدیدی بر روی رابط کاربری دارد. در ادامه اگر شما هم دوست دارید با استفاده از جاوا اسکریپت بازی بسازید (ساخت بازی با جاوا اسکریپت) ما را دنبال کنید.

JavaScript (جاوا اسکریپت) ساخت بازی را به یکی از لذت‌بخش‌ترین کارهای دنیا تبدیل کرده است به طوری که اکثریت افراد دوست دارند هرچه سریعتر زبان برنامه‌نویسی جاوا اسکریپت را بیاموزند تا بتوانند بازی‌های مورد علاقه خود را بسازند. 

طراحی و ساخت بازی با جاوا اسکریپت

جاوا اسکریپت تقریبا از سال ۱۹۹۵ به روی کار آمد و تا به امروزه نقشی اساسی در اینترنت و اکثریت ساخت برنامه‌ها داشته است. جاوا اسکریپت با همکاری زبان برنامه‌نویسی دیگری به نام HTML در زنده نگه داشتن صفحات وب به یکدیگر کمک می‌کنند.

 

مقاله پییشنهادی: جاوا اسکریپت چیست
جاوا اسکریپت چیست و چه کاربردی دارد؟

 

به طور کلی اگر بخواهیم حساب کنیم جاوا اسکریپت اساس بسیاری از بازی‌ها در طول سالیان گذشته بوده است و اکثریت طراحان و توسعه‌دهندگان این زبان برنامه‌نویسی را جزء پرکاربردترین زبان برنامه‌نویسی برای ساخت بازی می‌دانستند.

آموزش ساخت بازی با جاوا اسکریپت به زبان ساده

 

پرسشی که اکثریت افراد دارد به این صورت است که آیا ساخت بازی با جاوا اسکریپت سخت است؟! برای پاسخ دادن به این سوال بیایید روراست باشیم، اگر شما هیچ علاقه‌ای به ساخت بازی با جاوا اسکریپت نداشته باشید این کار بسیار سخت و دشوار برای شما پیش خواهد رفت. زیرا ساخت بازی نیازمند علاقه بسیار زیاد، هنر، گرافیک، ریاضی، صدا، هوش مصنوعی، برنامه‌نویسی و… است. 

حال اگر موافق باشید به سراغ آموزش ساخت بازی مار (Snake) با استفاده از جاوا اسکریپت برویم.

ساخت بازی مار (Snake) با استفاده از جاوا اسکریپت

اگر شما هم جزء بازیکن‌های قدیمی باشید که با استفاده از تلفن‌های همراه ساده خود مشغول به بازی بودند حتما بازی مار را می‌شناسید و با آن خاطرات بسیاری دارید. زمانی که هنوز بازی‌های کامپیوتری به روی کار نیامده بودند بازی مار جزء پرطرفدارترین بازی به‌حساب می‌آمد.

همیشه بهترین راه برای یادگیری یک زبان برنامه‌نویسی این است که از آن زبان برنامه‌نویسی برای ساخت پروژه‌ای استفاده شود. بازی مار یک بازی کاملا ساده است که با استفاده از اصول JavaScript و HTML ساخته می‌شود. تاریخچه ساخت بازی مار به اواخر دهه ۷۰ باز می‌گردد.

 

 

اولین کاری که باید انجام دهیم این است یک صفحه نمایش و یک مار را به نمایش بگذاریم. با ایجاد فایل      snakegame.html  شروع می‌کنیم بعد فایل را در مرورگر خود باز کنید.

با انجام این کار مرورگر هیچ چیزی به شما نشان نمی‌دهد زیرا بوم (canvas) پس زمینه پیش فرض وجود ندارد. برای ایجاد بوم باید با استفاده از جاوا اسکریپت چند کد بنویسم تا برای بوم ما مرزی ایجاد شود.

برای انجام این کار این مراحل را انجام دهید: ابتدا <script>  و </script>  را بعد از </canvas>  وارد کنید.

ساخت بوم (canvas)

اکنون می‌توانیم بوم یا صفحه بازی خود را برای حرکت مار ایجاد کنیم. لازم به ذکر است که باید از سایت id gameCanvas ابتدا عنصر (element) بوم را دریافت کنیم. بعد از ساخت بوم، باید زمینه ۲D را ایجاد کنیم. ۲D همان فضای دو بعدی است که باید ایجاد شود.

بعد از انجام این کارها باید مستطیلی سفید به ابعاد ۴۰۰x 400 با حاشیه سیاه رنگ ایجاد کنیم. که از تمامی بطن‌ها و گوشه‌های کل بوم ما را پوشش دهد. بدین شکل این کارها را انجام دهید:

 

ساخت مار

حالا، برای مار! ما باید با نشان دادن مار به عنوان یک آرایه از مختصات، محل اولیه مار خود را بر روی بوم مشخص کنیم. برای ایجاد یک مار افقی در وسط بوم در ابعاد (۲۰۰x200)، مختصات هر یک از اعضای بدن مار را لیست می‌کنیم. اعداد و تعداد مختصات بدن مار برابر با طول مار خواهد بود. بدین شکل:

 

 

نکته: مختصات y برای همه قسمت‌ها همیشه ۲۰۰ است. مختصات xx همیشه کاهشی ۱۰ برابری دارد تا قسمت‌های مختلف بدن مار را نشان دهد. اولین مختصات نشان‌دهنده سر مار است.

حال برای اینکه مار ما بر روی بوم ظاهر شود باید برای هر تابع مستطیل یک جفت مختصات نوشت بدین شکل:

 

 

با کنار هم قرار دادن مراحل و اجرا کد، مار ما بر روی صفحه ظاهر می‌شود. کدها را بدین شکل وارد کنید:

 

 

در حال حاضر تابع اصلی فقط توابع clearCanvas() و drawSnake() را فراخوانی می‌کند. حال به سراغ مرحله بعد می‌رویم.

حرکت خودکار مار

در اینجا ما بوم و مار خود را داریم، اما نیاز داریم که مار به صورت خودکار حرکت کند تا بتواند تمامی محیط اطراف خود را بگردد. حال بیاید یاد بگیریم چگونه مار را به حرکت دربیاوریم. اگر بخواهیم مار به صورت افقی حرکت کند و به سمت راست برود باید مختصات xx  هر قسمت از مار را ۱۰ پیکسل افزایش دهیم به این شکل: (dx = 10+).

 

 

برای اینکه مار به سمت چپ حرکت کرد باید مختصات xx هر قسمت از مار را ۱۰ پیکسل کاهش دهیم به این شکل: (dx = -10)

 Dx سرعت افقی مار است. ما باید یک تابع move_snake ایجاد کنیم تا مار با توجه به آن مختصات حرکت کند. 

 

 

در عملکرد بالا، ما یک سر جدید برای مار ایجاد کردیم. سپس سر جدید را با استفاده از snake.unshift به ابتدای مار اضافه کردیم و آخرین عنصر مار را با استفاده از snake.pop حذف کردیم. بنابراین با توجه به این تغییرات تمامی قسمت‌های مار تغییر کرد.

حال می‌توان دید که مار حرکت می‌کند. لذت‌بخشه درسته!!!

 

استفاده از کلیدهای جهت دار برای به تغییر جهت مار

حالا ما یک مار در حال حرکت داریم که براساس حرکت پیش فرض حرکت می‌کند وظیفه‌ی بعدی که ما داریم این است که به مار جهت دهیم. برای تغییر جهت دادن مار بیایید عملکرد change_direction را تغییر دهیم. با این کار بررسی می‌شود که کلید فشرده شده با یکی از کلیدهای جهت دار مطابقت دارد یا خیر. اگر این کار انجام شد سرعت عمودی و افقی مار را تغییر خواهیم داد. به عملکرد زیر نگاه کنید:

 

 

همچنین باید بررسی کنیم که ببینیم جهت مار مطابق کلیدهای (کلیدهای جهت دار) فشرده شده است یا خیر. در آخر مشخص کنید که بازی به چه صورت تمام شود گزینه‌هایی مانند:

  • سر مار با بدنش برخورد کند
  • سر مار با مرز بوم برخورد کند

این دو شرط در کد زیر گنجانده شده است:

 

 

خب ما در اینجا توانستیم بازی بسازیم که از زبان برنامه‌نویسی جاوا اسکریپت (ساخت بازی با جاوا اسکریپت) پیروی کرده است. امیدواریم با توجه به این مقاله توانسته باشید بازی مورد نظر خود را بسازید و سرگرم بازی شوید.