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

۴۳۷۴ بازدید
آخرین به‌روزرسانی: ۲۴ اردیبهشت ۱۴۰۲
زمان مطالعه: ۲۳ دقیقه
آموزش ساخت بازی با جاوا اسکریپت – راهنمای کامل و ساده

ساخت بازی با جاوا اسکریپت فرایندی نسبتاً ساده است و بازی‌های ساخته شده با آن نیز معمولاً بسیار سرگرم کننده هستند. همچنین ساخت بازی با جاوا اسکریپت یکی از بهترین روش‌ها برای یادگیری کدنویسی به حساب می‌آید. جاوا اسکریپت زبانی بسیار محبوب است و امروزه تقریباً در همه وب‌سایت‌ها و سایر کاربردهای تحت وب از JS استفاده شده است. در این مطلب ابتدا کلیه موارد پیرامون ساخت بازی با جاوا اسکریپت به طور جامع شرح داده شده و سپس آموزش ساخت بازی با جاوا اسکریپت به صورت عملی و پروژه‌محور به وسیله ساخت بازی مار با جاوا اسکریپت تکمیل شده است.

فهرست مطالب این نوشته
997696

یکی از موضوعات جذاب پیرامون جاوا اسکریپت که کاربران را به استفاده از جاوا اسکریپت تشویق می‌کند، توسعه بازی‌ است. کاربرد جاوا اسکریپت را می‌توان در حوزه‌های مختلفی بررسی کرد که توسعه بازی فقط یکی از آن‌ها به‌حساب می‌آید. امروزه با افزایش سرعت اینترنت و پیشرفت صنعت سخت‌ افزارهای کامپیوتری، تعداد برنامه‌ نویسانی که از جاوا اسکریپت به‌عنوان نوعی زبان برنامه نویسی بازی‌سازی استفاده می‌کنند همچنان در حال افزایش است. در این مطلب آموزشی از مجله فرادرس، پیرامون موضوع ساخت بازی با جاوا اسکریپت اطلاعات کامل و جامعی ارائه خواهد شد تا به کاربر دید جامع و روشنی از توسعه بازی با جاوا اسکریپت بدهد. همچنین در این مطلب آموزشی بازی جذاب و ساده‌ای نیز با جاوا اسکریپت پیاده سازی خواهد شد.

آیا جاوا اسکریپت برای توسعه بازی مناسب است؟

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

توسعه بازی با جاوا اسکریپت

به‌صورت کلی بازی‌های جاوا اسکریپت در موبایل و در مرورگر اجرا می‌شوند و توسعه‌دهنده بازی با جاوا اسکریپت می‌تواند انواع بازی دو بُعدی و سه‌ بُعدی را با این زبان و با استفاده از فریم‌ورک‌های جاوا اسکریپت توسعه دهد. جدا از بازی‌های مبتنی بر مرورگر، امروزه ساخت بازی موبایل با جاوا اسکریپت نیز محبوبیت ویژه‌ای پیدا کرده است.

باید به این نکته توجه داشت که برای توسعه بازی‌های بزرگی مانند «Call of Duty» یا «FIFA»، جاوا اسکریپت زبان مناسبی نیست. با وجود اینکه کاربردهای این زبان متنوع است، اما جاوا اسکریپت بسیار کندتر از زبان‌هایی مانند زبان C++‎ عمل می‌کند و با استفاده از آن، حافظه بیشتری مصرف می‌شود. بازی‌های پیشرفته و سنگین به دلیل اینکه به محاسبات سنگینی پردازشگر گرافیکی نیاز دارند و حجم قابل‌توجهی را هم اشغال می‌کنند، ساخت آن‌ها با جاوا اسکریپت مناسب نخواهد بود و در اجرا آن‌گونه که باید عمل نخواهند کرد.

مقایسه جاوا اسکریپت و جاوا برای توسعه بازی

اغلب اوقات پیش می‌آید که افراد جاوا و جاوا اسکریپت را مرتبط با هم در نظر می‌گیرند و حتی گاهی به اشتباه فکر می‌کنند این دو زبان یکسان هستند و تفاوت جاوا و جاوا اسکریپت را نمی‌دانند. در یک کلام می‌توان گفت که جاوا و جاوا اسکریپت دو زبان کاملاً مجزا هستند و تنها وجه اشتراک آن‌ها این است که کلمه «جاوا» در هردوی آن‌ها وجود دارد. جاوا اسکریپت نوعی زبانی «مفسری» (Interpreter) است و از طرفی دیگر زبان جاوا نوعی زبان  «کامپایلری» (Compiler) به‌حساب می‌آید.

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

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

مقایسه جاوا و جاوا اسکریپت برای توسعه بازی

برای ساخت بازی جاوا بهتر است یا جاوا اسکریپت؟

به‌صورت کلی برای ساخت و توسعه بازی، جاوا و جاوا اسکریپت را می‌توان این‌گونه مقایسه کرد که اگر هدف کاربر ساخت بازی‌هایی مبتنی بر مرورگر باشد، جاوا اسکریپت انتخاب بهتری است ولی از طرفی اگر قصد کاربر ساخت بازی برای کامپیوتر یا کنسول بازی باشد، جاوا انتخاب بهتری به‌حساب می‌آید. بازی «Minecraft» یکی از محبوب‌ترین بازی‌هایی است که با جاوا ساخته شده است.

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

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

بازی های ساخته شده با جاوا اسکریپت
  • «Tower Building»: این بازی ایده‌ای عالی برای شروع ساخت بازی با جاوا اسکریپت است. این بازی به بازیکنان اجازه می‌دهد تا بلوک‌ها را روی هم چیده و یک برج بسیار بلند بسازند. بازی Tower Building برای تلفن‌های همراه توسعه داده شده و علاوه براین، کد منبع آزاد آن در «گیت هاب» (GitHub) موجود است و کاربران می‌توانند جزئیات ساخت و توسعه آن را بررسی کنند و حتی آن را بهبود ببخشند.
  • «Bejeweled»: این بازی به‌عنوان نوعی بازی مبتنی بر مرورگر در اوایل دهه 2000 ساخته شد. این بازی بسیار شبیه به بازی «Candy Crush» است که در آن بازیکن باید سه شی یا عنصر هم نوع را پشت سر هم برای کسب امتیاز قرار دهد.
  • «2048»: این هم نوعی بازی جذاب ساخته شده با جاوا اسکریپت است که در آن بازیکنان می‌توانند از کلیدهای جهت‌دار برای جابه‌جایی عناصر استفاده کنند. هدفِ این بازی، لغزاندن کاشی‌های شماره‌دار روی یک شبکه شطرنجی به‌گونه‌ای است که بتوان کاشی‌ها را با هم طوری ترکیب کرد تا کاشی با شماره ۲۰۴۸ ایجاد شود.
  • «Polycraft»: این بازی ساخته شده با جاوا اسکریپت نیز نوعی بازی سه بُعدی است که در مرورگر اجرا می‌شود. این بازی جذاب نیز پر از ماجراجویی، اکتشاف، جمع‌آوری، کاردستی و حتی مبارزه است.
  • «Words With Friends 2»: این بازی جذاب برای موبایل ساخته شده است و در ساخت آن از React Native استفاده کرده‌اند. React Native فریمورکی برای ایجاد بازی و اپلیکیشن موبایل با جاوا اسکریپت است.

بهترین موتورهای بازی جاوا اسکریپت

کدهای جاوا اسکریپت صرفاً متن هستند و به تنهایی نمی‌توانند هر کاری را انجام دهند، بنابراین این کدها برای عملی کردن ساخت بازی با جاوا اسکریپت نیاز به چیزی به نام «موتور بازی» (Game Engine) یا «کتابخانه رندرینگ» پیدا می‌کنند، یادگیری کار با موتورهای بازی قدم مهم دیگری در توسعه بازی است و تنها کدنویسی برای این هدف کافی نیست.

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

موتور بازی PixiJS جاوا اسکریپت

موتور بازی «PixiJS» نوعی موتور بازی جاوا اسکریپت منبع باز است که سرعت بالا و قابلیت استفاده API، از ویژگی‌های مهم این موتور بازی به حساب می‌آیند. این موتور بازی همچنین دارای رندر دو بعدی و قابلیت پشتیبانی «چندپلتفرمی» (Cross Platform) است تا کاربران بتوانند بازی‌های خود را برای چندین پلتفرم بسازند. منبع آزاد بودن یان موتور بازی جاوا اسکریپتاین امکان را فراهم کرده است تا موتور بازی PixiJS پیشرفت چشم‌گیری داشته باشد و همزمان متخصصان زیادی روی آن کار کرده‌اند تا به این پیشرفت کمک کنند.

ساخت بازی با جاوا اسکریپت به وسیله موتور بازی BabylonJS

موتور بازی «BabylonJS» نیز نوعی کتابخانه رندرینگ یا موتور بازی به‌حساب می‌آید و دارای ابزارهای بسیار قدرتمندی است که به کاربران امکان می‌دهد هر چیزی از انیمیشن‌های ساده گرفته تا بازی‌های سه‌ بعدی را ایجاد کنند.

موتور بازی BabylonJS

مانند موتور بازی PixiJS، این موتور بازی نیز منبع آزاد است و جامعه بزرگی از توسعه‌دهندگان در پیشرفت آن نقش دارند. در ساخت بازی با جاوا اسکریپت از این موتور بازی بسیار استفاده می‌شود.

موتور بازی جاوا اسکریپت Phaser

«Phaser» نیز نوعی موتور بازی است که از ساخت بازی‌های HTML5 دسکتاپ و موبایل پشتیبانی می‌کند. تمرکز اصلی این موتور بازی بر روی توسعه بازی‌های دو بُعدی است که قابلیت کامپایل و اجرا را در چندین پلتفرم دارند. یکی از مهم‌ترین مزایای موتور Phaser امکان استفاده از افزونه‌های اضافی در صورت نیاز است. این ویژگی Phaser به توسعه‌دهنده این امکان را می‌دهد که اجزای بازی خود را تا حد امکان سبک و کوچک نگه دارد و اجزای غیرضروری را از بازی حذف کند.

فریمورک توسعه بازی جاوا اسکریپت MelonJS

فریمورک توسعه بازی «MelonJS» نوعی موتور بازی کم حجم است و به توسعه‌دهندگان امکان افزودن افزونه‌های مورد نیاز و دلخواه را می‌دهد. این موتور ساخت بازی با جاوا اسکریپت به کاربر امکان می‌دهد ویژگی‌هایی مانند برخورد، سایه، فیزیک، جلوه‌های ویژه و موارد دیگر را به بازی اضافه کند. همچنین در مقایسه با سایر موتورهای بازی، به خاطر رابط کاربری ساده و مبتدی بودن بسیار معروف است.

کتابخانه توسعه بازی با جاوا اسکریپت Three.js

کتابخانه «Three.js» نیز یکی دیگر از کتابخانه‌های محبوب برای ارائه گرافیک‌های سه‌ بُعدی در مرورگر وب برای ساخت بازی با جاوا اسکریپت به‌حساب می‌آید. این کتابخانه بسیار محبوب و همچنین استفاده از آن بسیار ساده است و نمونه بازی‌های ساخته شده زیادی با آن وجود دارند. رندر پیش‌فرض این موتور بازی «WebGL» است، اما از رندرهای «SVG» ،»Canvas 2D» و «CSS3D» نیز پشتیبانی می‌کند.

معرفی فیلم های آموزش جاوا اسکریپت

فیلم های آموزش جاوا اسکریپت فرادرس

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

هم‌اکنون در تاریخ نگارش این مطلب، بیش از ۲۰ عنوان آموزشی برای جاوا اسکریپت در قالب بیش از ۱۰۰ ساعت محتوای آموزش ویدیویی در پلتفرم فرادرس در دسترس قرار دارند. این مجموعه دوره‌های آموزشی گوناگونی برای اهداف مختلفی از جمله یادگیری مقدماتی جاوا اسکریپت، یادگیری برنامه نویسی پیشرفته جاوا اسکریپت، یادگیری کار با فریمورک و کتابخانه‌های جاوا اسکریپت و سایر موارد تهیه و تدوین شده‌اند. همچنین بیشتر فیلم‌های آموزش جاوا اسکریپت فرادرس پروژه‌محور هستند و کاربران در کنار یادگیری مسائل تئوری، به‌صورت عملی نیز با مباحث آشنا خواهند شد. در تصویر بالا تنها تعداد کمی از دوره‌های آموزش جاوا اسکریپت قابل‌ مشاهده هستند.

  • برای مشاهده همه فیلم‌های آموزش جاوا اسکریپت فرادرس و شروع یادگیری + اینجا کلیک کنید.

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

برای ساخت بازی با جاوا اسکریپت به یک سری پیش‌نیازها و مراحل نیاز است. در این بخش از مطلب قرار بر این است که بازی مار با جاوا اسکریپت یا همان بازی Snake پیاده‌سازی شود. به‌منظور درک عمیق‌تر ساخت بازی با زبان جاوا اسکریپت، این مثال به صورت ساده ارائه خواهد شد تا به کاربر دید شفافی از این موضوع بدهد.

آموزش ساخت بازی مار با پایتون

برای شروع کار ساخت بازی با زبان جاوا اسکریپت، به «کد ادیتوری» (ویرایشگر کد) مناسب نیاز است تا کدهای برنامه نویس درون آن نوشته شوند. ویرایشگرهای زیادی برای این منظور وجود دارند که کاربران می‌توانند از آن استفاده کنند. همچنین ویرایشگرهای آنلاین نیز هم‌اکنون در سطح وب در دسترس هستند که می‌توان از آن‌ها نیز استفاده کرد.

قدم ا - نمایش صفحه بازی و ساخت یک شی به عنوان مار

برای ساخت بازی مار با جاوا اسکریپت ابتدا باید صفحه بازی و مار ایجاد شوند. برای این کار، فایلی با نام «Snakegame.html» ایجاد می‌شود. این فایل شامل تمام کدهای پروژه ساخت بازی مار با جاوا اسکریپت خواهد بود که با باز کردن فایل بازی نیز اجرا خواهد شد. همچنین، به منظور ساخت بازی و ترسیم گرافیک باید از Canvas  در HTML استفاده شود.canvas به عنوان صفحه بازی در نظر گرفته می‌شود. قطعه کد مربوط به انجام این کار به صورت زیر است:

1<canvas id="gameCanvas" width="400" height="400"><canvas>
  • نکته: id شناسه canvasاست و همیشه باید مشخص شود. همچنین ابعاد عرض و ارتفاع Canvas را نیز باید در هنگام اعلان آن تعیین کنیم.

تا به اینجا، مرورگر چیزی را نمایش نخواهد داد، زیرا canvasهنوز هیچ پس‌زمینه‌ای ندارد. برای قابل مشاهده کردن آن، کافی است کدهایی با جاوا اسکریپت برای آن بنویسیم که به این منظور باید تگ‌ script را بعد از canvasوارد کنیم. در ادامه، این کدها بررسی خواهند شد.

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

در این مرحله صفحه بازی مورد استفاده برای بازی مار ساخته خواهد شد. برای این منظور، ابتدا عنصر canvasدریافت می‌شود که این کار با استفاده از id gameCanvas اتفاق می‌افتد که در بالا به آن اشاره شد. در مرحله بعدی در ساخت صفحه بازی، context 2d دریافت خواهد شد که این به معنای ایجاد فضای دو بعدی است. در ادامه مستطیلی آبی کم رنگ 400 در 400 با حاشیه سیاه ساخته می‌شود که تمام صفحه را از گوشه بالا سمت چپ یعنی نقطه (0، 0) می‌پوشاند. قطعه کد این کار به صورت زیر خواهد بود:

1const snakeboard = document.getElementById("gameCanvas");
2const snakeboard_ctx = gameCanvas.getContext("2d");

ساخت مار برای بازی مار در جاوا اسکریپت

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

1let snake = [  {x: 200, y: 200},  {x: 190, y: 200},  {x: 180, y: 200},  {x: 170, y: 200},  {x: 160, y: 200},];
  • نکته: مختصات y برای همه قسمت‌ها همیشه 200 است. همچنین مختصات x باید 10 تا 10 تا کاهش یابد تا همه قسمت‌های مختلف بدن مار را نشان دهد. اولین نقطه مختصات، نشان دهنده سر مار است. حال می‌توان برای نمایش مار روی صفحه، تابعی نوشت که برای هر جفت مختصات، مستطیلی رسم کند. این تابع به صورت زیر نوشته خواهد شد:
1function drawSnakePart(snakePart) 
2{  
3  snakeboard_ctx.fillStyle = 'lightblue';  
4  snakeboard_ctx.strokestyle = 'darkblue';
5  snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
6  snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
7}
8 
9/*Function that prints the parts*/
10function drawSnake() 
11{  
12  snake.forEach(drawSnakePart);
13}

 کنار هم گذاشتن کدهای قدم ١

در این مرحله کدهای نوشته شده در گام اول ساخت بازی مار با پایتون کنار هم قرار می‌گیرند که این کدها به‌صورت زیر خواهند بود.

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Js Snake Game - Faradras</title>
5    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
6
7  </head>
8
9  <body>
10
11    <canvas id="snakeboard" width="400" height="400"></canvas>
12
13    <style>
14      #snakeboard {
15        position: absolute;
16        top: 50%;
17        left: 50%;
18        transform: translate(-50%, -50%);
19      }
20    </style>
21  </body>
22
23  <script>
24    const board_border = 'black';
25    const board_background = "white";
26    const snake_col = 'lightblue';
27    const snake_border = 'darkblue';
28    
29    let snake = [
30      {x: 200, y: 200},
31      {x: 190, y: 200},
32      {x: 180, y: 200},
33      {x: 170, y: 200},
34      {x: 160, y: 200}
35    ]
36    
37    // Get the canvas element
38    const snakeboard = document.getElementById("snakeboard");
39    // Return a two dimensional drawing context
40    const snakeboard_ctx = snakeboard.getContext("2d");
41    // Start game
42    main();
43    
44    // main function called repeatedly to keep the game running
45    function main() {
46        clearCanvas();
47        drawSnake();
48    }
49    
50    // draw a border around the canvas
51    function clearCanvas() {
52      //  Select the colour to fill the drawing
53      snakeboard_ctx.fillStyle = board_background;
54      //  Select the colour for the border of the canvas
55      snakeboard_ctx.strokestyle = board_border;
56      // Draw a "filled" rectangle to cover the entire canvas
57      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
58      // Draw a "border" around the entire canvas
59      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
60    }
61    
62    // Draw the snake on the canvas
63    function drawSnake() {
64      // Draw each part
65      snake.forEach(drawSnakePart)
66    }
67    
68    // Draw one snake part
69    function drawSnakePart(snakePart) {
70
71      // Set the colour of the snake part
72      snakeboard_ctx.fillStyle = snake_col;
73      // Set the border colour of the snake part
74      snakeboard_ctx.strokestyle = snake_border;
75      // Draw a "filled" rectangle to represent the snake part at the coordinates
76      // the part is located
77      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
78      // Draw a border around the snake part
79      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
80    }
81    
82  </script>
83</html>

خروجی این مرحله به صورت تصویر زیر است:

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

در حال حاضر، تابع main فقط دو تابع clearCanvas()‎ و drawSnake()‎ را فراخوانی خواهد کرد.

قدم 2 - ایجاد حرکت خودکار مار

تا به اینجا از ساخت بازی با جاوا اسکریپت هم صفحه بازی و هم بازیکن (در این بازی مار) وجود دارند. حال باید مار طوری تنظیم و برنامه‌نویسی شود که بتواند در فضای صفحه و در همه جهت‌ها حرکت کند. پس باید مار به‌ صورت خودکار روی صفحه بتواند حرکت داشته باشد.

پیاده سازی حرکت افقی مار در محیط بازی

برای اینکه مار بتواند به‌صورت افقی حرکت کند باید مختصات xیا مختصات افقی آن را به‌صورت زیر تغییر دهیم.

  • برای اینکه مار بتواند یک قدم (10 پیکسل) به سمت راست حرکت کند، باید مختصات xافزایش یابد که برای هر قدم، این افزایش به‌صورت (dx = +10) یا 10 پیکسل است.
  • همچنین برای اینکه مار به سمت چپ حرکت کند باید مختصات xکاهش یابد، که این کاهش به‌صورت (dx = -10) یا کاهش 10 پیکسلی خواهد بود.

نکته: dx همان سرعت افقی مار است. همچنین باید تابعی به نام move_snake ایجاد شود تا snake را به‌روز کند. قطعه کد حرکت افقی مار به صورت زیر است:

1function move_snake() 
2{  
3  const head = {x: snake[0].x + dx, y: snake[0].y};
4  snake.unshift(head);
5  snake.pop();
6}

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

 

حرکت عمودی مار در صفحه

در این مرحله باید برای حرکت عمودی مار کد نوشت. برای این نوع حرکت، همه مختصات yرا نباید تغییر داد چون با این کار کل بدن مار به بالا یا پایین حرکت می‌کند. برای رفع این مشكل باید فقط مختصات yسر مار را تغییر دهیم که این تغییر نیز به اندازه 10 پیکسل در هر حرکت انجام خواهد شد. با کاهش 10 پیکسلی برای حرکت مار به سمت بالا و افزایش 10 پیکسلی برای حرکت دادن مار به پایین، مار به‌درستی حرکت می‌کند. همچنین برای اجرای درست این عملکرد، متد move_snake باید به‌روز شود تا مختصات yسر مار، هم‌زمان با dy (سرعت عمودی مار) افزایش یابد.

1const head = {x: snake[0].x + dx, y: snake[0].y + dy};

حرکت خودکار مار در صفحه

برای حرکت مار، مثلاً 50 پیکسل به سمت راست، باید 5 بار move_snake(x) فراخوانی شود. با 5 بار فراخوانی این متد مار، به‌جای حرکت گام‌به‌گام به سمت آن نقطه، به موقعیت 50Px می‌پرد و برای اینکه مار به‌صورت خواسته شده حرکت کند، می‌توان با تنظیم setTimeout تأخیری جزئی بین هر تماس اضافه کرد. همچنین برای عملکرد صحیح باید اطمینان حاصل کرد هر بار که move_snakeفراخوانی می‌شود، drawSnake نیز با آن فراخوانی شود، در غیر این صورت مراحل میانی که مار حرکت می‌کند، غیرقابل مشاهده خواهند بود. قطعه کد مربوط به پیاده‌سازی این عملکرد به صورت زیر است:

1setTimeout(function onTick() {  clearCanvas();  move_Snake();  drawSnake();}, 100);
2setTimeout(function onTick() {  clearCanvas();  move_Snake();  drawSnake();}, 100);
3...
4drawSnake();
  • نکته: ‎clearCanvas‎‎()  در داخل setTimeout فراخوانی می‌شود تا تمام موقعیت‌های قبلی snake را حذف کند.

این برنامه هنوز مشکل دارد، زیرا هیچ متد یا تابعی به برنامه نمی‌گوید که باید قبل از رفتن به setTimeoutبعدی، منتظر setTimeoutباشد. این یعنی که مار همچنان فقط با کمی تأخیر  50 پیکسل به جلو حرکت می‌کند، برای رفع این مشکل، باید کد را در داخل توابع قرار داد. به‌جای ایجاد تعداد بی‌نهایت توابع که یکدیگر را فراخوانی می‌کنند، می‌توان تابعی اصلی با نام function main()  ایجاد کرد و آن را بارها و بارها فراخوانی کرد. قطعه کد مربوط به پیاده‌سازی این عملکرد به صورت زیر است:

1function main() 
2{  
3   setTimeout(function onTick() 
4   {    
5     clearCanvas();    
6     advanceSnake();  
7     drawSnake();
8     // Call main again
9     main();
10   }, 100)
11}

قرار دادن کدهای گام دوم ساخت بازی مار در کنار هم

در این مرحله باید کدهای قدم 2 ساخت بازی با جاوا اسکریپت در کنار هم قرار بگیرند تا روند ساخت بازی ادامه یابد. کدهای این مرحله به صورت زیر خواهند بود:

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Js Snake Game - Faradras</title>
5    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
6
7  </head>
8
9  <body>
10
11    <canvas id="snakeboard" width="400" height="400"></canvas>
12
13    <style>
14      #snakeboard {
15        position: absolute;
16        top: 50%;
17        left: 50%;
18        transform: translate(-50%, -50%);
19      }
20    </style>
21  </body>
22
23  <script>
24    const board_border = 'black';
25    const board_background = "lightblue";
26    const snake_col = 'red';
27    const snake_border = 'darkblue';
28    
29    let snake = [
30      {x: 200, y: 200},
31      {x: 190, y: 200},
32      {x: 180, y: 200},
33      {x: 170, y: 200},
34      {x: 160, y: 200}
35    ]
36
37    // Horizontal velocity
38    let dx = 10;
39    // Vertical velocity
40    let dy = 0;
41    
42    // Get the canvas element
43    const snakeboard = document.getElementById("snakeboard");
44    // Return a two dimensional drawing context
45    const snakeboard_ctx = snakeboard.getContext("2d");
46    // Start game
47    main();
48    
49    // main function called repeatedly to keep the game running
50    function main() {
51        setTimeout(function onTick() {
52        clear_board();
53        move_snake();
54        drawSnake();
55        // Call main again
56        main();
57      }, 100)
58    }
59    
60    // draw a border around the canvas
61    function clear_board() {
62      //  Select the colour to fill the drawing
63      snakeboard_ctx.fillStyle = board_background;
64      //  Select the colour for the border of the canvas
65      snakeboard_ctx.strokestyle = board_border;
66      // Draw a "filled" rectangle to cover the entire canvas
67      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
68      // Draw a "border" around the entire canvas
69      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
70    }
71    
72    // Draw the snake on the canvas
73    function drawSnake() {
74      // Draw each part
75      snake.forEach(drawSnakePart)
76    }
77    
78    // Draw one snake part
79    function drawSnakePart(snakePart) {
80
81      // Set the colour of the snake part
82      snakeboard_ctx.fillStyle = snake_col;
83      // Set the border colour of the snake part
84      snakeboard_ctx.strokestyle = snake_border;
85      // Draw a "filled" rectangle to represent the snake part at the coordinates
86      // the part is located
87      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
88      // Draw a border around the snake part
89      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
90    }
91
92    function move_snake() {
93      // Create the new Snake's head
94      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
95      // Add the new head to the beginning of snake body
96      snake.unshift(head);
97      snake.pop();
98    }
99    
100  </script>
101</html>

خروجی این مرحله به صورت زیر است:

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

تا این مرحله مار بدون مشکل حرکت می‌کند، اما تنها ایرادی که دارد این است که با رسیدن مار به مرز صفحه، به حرکت خود ادامه می‌دهد و ناپدید می‌شود که باید این مشکل را نیز رفع کرد. برای رفع این مشکل باید از کلیدهای جهت‌دار صفحه‌ کلید برای تغییر جهت حرکت مار استفاده کرد.

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

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

تغییر جهت مار

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

1function change_direction(event) 
2{  
3   const LEFT_KEY = 37;
4   const RIGHT_KEY = 39;
5   const UP_KEY = 38;
6   const DOWN_KEY = 40;
7 
8   const keyPressed = event.keyCode;
9   const goingUp = dy === -10;
10   const goingDown = dy === 10;
11   const goingRight = dx === 10;  
12   const goingLeft = dx === -10;
13 
14     if (keyPressed === LEFT_KEY && !goingRight)
15     {    
16          dx = -10;
17          dy = 0;  
18     }
19 
20     if (keyPressed === UP_KEY && !goingDown)
21     {    
22          dx = 0;
23          dy = -10;
24     }
25 
26     if (keyPressed === RIGHT_KEY && !goingLeft)
27     {    
28          dx = 10;
29          dy = 0;
30     }
31 
32     if (keyPressed === DOWN_KEY && !goingUp)
33     {    
34          dx = 0;
35          dy = 10;
36     }
37}

به‌منظور ادغام تابع change_direction ، می‌توان از addEventListener در کدها برای پاسخ دادن به زمانی که یک کلید فشار داده می‌شود به نحو احسن استفاده کرد. سپس می‌توان change_directionرا با رویداد keydown فراخوانی کرد. این کار با کد زیر امکان پذیر است.

1document.addEventListener("keydown", change_direction)

ایجاد شرط مرزی برای جلوگیری از حرکت بی نهایت

به منظور جلوگیری از حرکت بی‌نهایت مار، باید شرایط مرزی را به کدها اضافه کرد، یعنی زمانی که مار به مرز برخورد کند، بازی خاتمه یابد. برای این کار، باید تابعی به نام has_game_ended ساخته شود که وقتی بازی تمام شد، مقدار true و در غیر این صورت، مقدار false را بازگرداند.

در ساخت بازی مار با جاوا اسکریپت دو حالت زیر بازی را خاتمه می‌دهد:

  • سر مار با بدنش برخورد می‌کند.
  • سر مار با مرز صفحه برخورد می‌کند.

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

1function has_game_ended()
2{  
3  for (let i = 4; i < snake.length; i++)
4  {    
5    const has_collided = snake[i].x === snake[0].x && snake[i].y === snake[0].y
6    if (has_collided) 
7      return true
8  }
9  const hitLeftWall = snake[0].x < 0;  
10  const hitRightWall = snake[0].x > snakeboard.width - 10;
11  const hitToptWall = snake[0].y < 0;
12  const hitBottomWall = snake[0].y > snakeboard.height - 10;
13 
14  return hitLeftWall ||  hitRightWall || hitToptWall || hitBottomWall
15}

این تابع در ابتدا بررسی می‌کند که سر مار با اعضای بدن خودش برخورد می‌کند یا خیر و سپس برخورد مار به مرز صفحه را هم مورد بررسی قرار خواهد داد و در صورت ارضای هر یک از این دو شرط، بازی خاتمه خواهد یافت و بازیکن بازنده می‌شود.

 

قرار دادن کدهای مرحله 3 در کنار هم

در این مرحله از آموزش ساخت بازی با جاوا اسکریپت، کدهای مرحله ٣ به صورت زیر در کنار هم قرار داده شده‌اند:

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Js Snake Game - Faradras</title>
5    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
6
7  </head>
8
9  <body>
10
11    <canvas id="snakeboard" width="400" height="400"></canvas>
12
13    <style>
14      #snakeboard {
15        position: absolute;
16        top: 50%;
17        left: 50%;
18        transform: translate(-50%, -50%);
19      }
20    </style>
21  </body>
22
23  <script>
24    const board_border = 'black';
25    const board_background = "lightblue";
26    const snake_col = 'red';
27    const snake_border = 'darkblue';
28    
29    let snake = [
30      {x: 200, y: 200},
31      {x: 190, y: 200},
32      {x: 180, y: 200},
33      {x: 170, y: 200},
34      {x: 160, y: 200}
35    ]
36
37    // True if changing direction
38    let changing_direction = false;
39    // Horizontal velocity
40    let dx = 10;
41    // Vertical velocity
42    let dy = 0;
43    
44    // Get the canvas element
45    const snakeboard = document.getElementById("snakeboard");
46    // Return a two dimensional drawing context
47    const snakeboard_ctx = snakeboard.getContext("2d");
48    // Start game
49    main();
50
51    document.addEventListener("keydown", change_direction);
52    
53    // main function called repeatedly to keep the game running
54    function main() {
55
56        if (has_game_ended()) return;
57
58        changing_direction = false;
59        setTimeout(function onTick() {
60        clear_board();
61        move_snake();
62        drawSnake();
63        // Call main again
64        main();
65      }, 100)
66    }
67    
68    // draw a border around the canvas
69    function clear_board() {
70      //  Select the colour to fill the drawing
71      snakeboard_ctx.fillStyle = board_background;
72      //  Select the colour for the border of the canvas
73      snakeboard_ctx.strokestyle = board_border;
74      // Draw a "filled" rectangle to cover the entire canvas
75      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
76      // Draw a "border" around the entire canvas
77      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
78    }
79    
80    // Draw the snake on the canvas
81    function drawSnake() {
82      // Draw each part
83      snake.forEach(drawSnakePart)
84    }
85    
86    // Draw one snake part
87    function drawSnakePart(snakePart) {
88
89      // Set the colour of the snake part
90      snakeboard_ctx.fillStyle = snake_col;
91      // Set the border colour of the snake part
92      snakeboard_ctx.strokestyle = snake_border;
93      // Draw a "filled" rectangle to represent the snake part at the coordinates
94      // the part is located
95      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
96      // Draw a border around the snake part
97      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
98    }
99
100    function has_game_ended() {
101      for (let i = 4; i < snake.length; i++) {
102        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
103      }
104      const hitLeftWall = snake[0].x < 0;
105      const hitRightWall = snake[0].x > snakeboard.width - 10;
106      const hitToptWall = snake[0].y < 0;
107      const hitBottomWall = snake[0].y > snakeboard.height - 10;
108      return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
109    }
110
111    function change_direction(event) {
112      const LEFT_KEY = 37;
113      const RIGHT_KEY = 39;
114      const UP_KEY = 38;
115      const DOWN_KEY = 40;
116      
117    // Prevent the snake from reversing
118    
119      if (changing_direction) return;
120      changing_direction = true;
121      const keyPressed = event.keyCode;
122      const goingUp = dy === -10;
123      const goingDown = dy === 10;
124      const goingRight = dx === 10;
125      const goingLeft = dx === -10;
126      if (keyPressed === LEFT_KEY && !goingRight) {
127        dx = -10;
128        dy = 0;
129      }
130      if (keyPressed === UP_KEY && !goingDown) {
131        dx = 0;
132        dy = -10;
133      }
134      if (keyPressed === RIGHT_KEY && !goingLeft) {
135        dx = 10;
136        dy = 0;
137      }
138      if (keyPressed === DOWN_KEY && !goingUp) {
139        dx = 0;
140        dy = 10;
141      }
142    }
143
144    function move_snake() {
145      // Create the new Snake's head
146      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
147      // Add the new head to the beginning of snake body
148      snake.unshift(head);
149      snake.pop();
150    }
151    
152  </script>
153</html>

خروجی این مرحله به صورت زیر است:

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

قدم ٤ - ساخت طعمه و امتیاز برای مار

اکنون که مار ساخته شده است و حرکت آن با استفاده از کلیدهای جهت صفحه کلید کنترل می‌شود، نوبت به ساخت طعمه و همچنین گرفتن امتیاز با خوردن طعمه توسط مار فرا رسیده است.

 

ساخت طعمه یا غذا برای مار

برای ساخت طعمه‌ای که مار آن را می‌خورد، باید مجموعه‌ای تصادفی از مختصات ایجاد شود. برای این کار تابعی به نام random_food ایجاد می‌شود و مختصاتی تصادفی از x و y را می‌گیرد. همچنین باید اطمینان حاصل شود که طعمه در مختصات بدن مار قرار نگیرد و با آن همپوشانی نداشته باشد. تابع زیر ساخت شی طعمه را برای مار انجام می‌دهد.

1function random_food(min, max)
2{  
3   return Math.round((Math.random() * (max-min) + min) / 10) * 10;
4}
5 
6function gen_food() 
7{  
8   food_x = random_food(0, snakeboard.width - 10);
9   food_y = random_food(0, snakeboard.height - 10);
10   snake.forEach(function has_snake_eaten_food(part) {
11        const has_eaten = part.x == food_x && part.y == food_y;
12        if (has_eaten) gen_food();
13      });
14}

همچنین به تابعی نیاز است تا در واقع غذا را روی صفحه رسم کند و تابع main را به‌روز کند تا تابع drawFood را در خود جای دهد.

1function drawFood()
2{
3      snakeboard_ctx.fillStyle = 'lightgreen;
4      snakeboard_ctx.strokestyle = 'darkgreen';
5      snakeboard_ctx.fillRect(food_x, food_y, 10, 10);
6      snakeboard_ctx.strokeRect(food_x, food_y, 10, 10);
7}

اضافه کردن تابع رشد مار

مار زمانی رشد می‌کند که سر آن به طعمه برخورد کند و هر بار که این برخورد اتفاق می‌افتد طعمه به جزئی از بدن مار تبدیل می‌شود. برای پیاده‌سازی این عملکرد، در هر بار خوردن طعمه یک عضو بدن به بدن مار اضافه می‌شود و تابع move_snake به‌ صورت زیر به‌روز خواهد شد.

1function move_snake() {
2      // Create the new Snake's head
3      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
4      // Add the new head to the beginning of snake body
5      snake.unshift(head);
6      const has_eaten_food = snake[0].x === food_x && snake[0].y === food_y;
7      if (has_eaten_food) {
8        // Generate new food location
9        gen_food();
10      } else {
11        // Remove the last part of snake body
12        snake.pop();
13      }
14    }

اضافه کردن امتیاز دادن مار با خوردن طعمه

در این مرحله از ساخت بازی با جاوا اسکریپت نوبت به امتیازدهی به مار با خوردن طعمه فرا می‌رسد. برای این هدف باید متغیری به نام score به کدها اضافه شود و هر بار با خوردن طعمه به اندازه 10 واحد افزایش یابد. برای نمایش امتیاز، قبل از canvas به یک div جدید نیاز است. همچنین باید تابع move_snake را نیز به‌روز کرد تا امتیاز در آن گنجانده شود. قطعه کد انجام این کار به صورت زیر خواهد بود:

1function move_snake()
2 {
3      // Create the new Snake's head
4      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
5      // Add the new head to the beginning of snake body
6      snake.unshift(head);
7      const has_eaten_food = snake[0].x === foodX && snake[0].y === foodY;
8      if (has_eaten_Food) {
9        // Increase score
10        score += 10;
11        // Display score on screen
12        document.getElementById('score').innerHTML = score;
13        // Generate new food location
14        gen_food();
15      } else {
16        // Remove the last part of snake body
17        snake.pop();
18      }
19}

قرار دادن کدهای قدم ٤ در کنار هم

در این مرحله آموزش ساخت بازی مار با جاوا اسکریپت، نوبت به قرار دادن کدهای گام ٤ در کنار هم است. با این کار ساخت بازی مار با جاوا اسکریپت نیز به پایان خود خواهد رسید و کاربر می‌تواند به بازی بپردازد. کد کامل ساخت بازی مار با جاوا اسکریپت به صورت زیر خواهد بود:

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Snake Game</title>
5  </head>
6
7  <body>
8
9    <div id="score">0</div>
10    <canvas id="snakeboard" width="400" height="400"></canvas>
11
12    <style>
13      #snakeboard {
14        position: absolute;
15        top: 50%;
16        left: 50%;
17        transform: translate(-50%, -50%);
18      }
19      #score {
20        text-align: center;
21        font-size: 140px;
22      }
23    </style>
24  </body>
25
26  <script>
27    const board_border = 'black';
28    const board_background = "white";
29    const snake_col = 'lightblue';
30    const snake_border = 'darkblue';
31    
32    let snake = [
33      {x: 200, y: 200},
34      {x: 190, y: 200},
35      {x: 180, y: 200},
36      {x: 170, y: 200},
37      {x: 160, y: 200}
38    ]
39
40    let score = 0;
41    // True if changing direction
42    let changing_direction = false;
43    // Horizontal velocity
44    let food_x;
45    let food_y;
46    let dx = 10;
47    // Vertical velocity
48    let dy = 0;
49    
50    
51    // Get the canvas element
52    const snakeboard = document.getElementById("snakeboard");
53    // Return a two dimensional drawing context
54    const snakeboard_ctx = snakeboard.getContext("2d");
55    // Start game
56    main();
57
58    gen_food();
59
60    document.addEventListener("keydown", change_direction);
61    
62    // main function called repeatedly to keep the game running
63    function main() {
64
65        if (has_game_ended()) return;
66
67        changing_direction = false;
68        setTimeout(function onTick() {
69        clear_board();
70        drawFood();
71        move_snake();
72        drawSnake();
73        // Repeat
74        main();
75      }, 100)
76    }
77    
78    // draw a border around the canvas
79    function clear_board() {
80      //  Select the colour to fill the drawing
81      snakeboard_ctx.fillStyle = board_background;
82      //  Select the colour for the border of the canvas
83      snakeboard_ctx.strokestyle = board_border;
84      // Draw a "filled" rectangle to cover the entire canvas
85      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
86      // Draw a "border" around the entire canvas
87      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
88    }
89    
90    // Draw the snake on the canvas
91    function drawSnake() {
92      // Draw each part
93      snake.forEach(drawSnakePart)
94    }
95
96    function drawFood() {
97      snakeboard_ctx.fillStyle = 'lightgreen';
98      snakeboard_ctx.strokestyle = 'darkgreen';
99      snakeboard_ctx.fillRect(food_x, food_y, 10, 10);
100      snakeboard_ctx.strokeRect(food_x, food_y, 10, 10);
101    }
102    
103    // Draw one snake part
104    function drawSnakePart(snakePart) {
105
106      // Set the colour of the snake part
107      snakeboard_ctx.fillStyle = snake_col;
108      // Set the border colour of the snake part
109      snakeboard_ctx.strokestyle = snake_border;
110      // Draw a "filled" rectangle to represent the snake part at the coordinates
111      // the part is located
112      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
113      // Draw a border around the snake part
114      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
115    }
116
117    function has_game_ended() {
118      for (let i = 4; i < snake.length; i++) {
119        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
120      }
121      const hitLeftWall = snake[0].x < 0;
122      const hitRightWall = snake[0].x > snakeboard.width - 10;
123      const hitToptWall = snake[0].y < 0;
124      const hitBottomWall = snake[0].y > snakeboard.height - 10;
125      return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
126    }
127
128    function random_food(min, max) {
129      return Math.round((Math.random() * (max-min) + min) / 10) * 10;
130    }
131
132    function gen_food() {
133      // Generate a random number the food x-coordinate
134      food_x = random_food(0, snakeboard.width - 10);
135      // Generate a random number for the food y-coordinate
136      food_y = random_food(0, snakeboard.height - 10);
137      // if the new food location is where the snake currently is, generate a new food location
138      snake.forEach(function has_snake_eaten_food(part) {
139        const has_eaten = part.x == food_x && part.y == food_y;
140        if (has_eaten) gen_food();
141      });
142    }
143
144    function change_direction(event) {
145      const LEFT_KEY = 37;
146      const RIGHT_KEY = 39;
147      const UP_KEY = 38;
148      const DOWN_KEY = 40;
149      
150    // Prevent the snake from reversing
151    
152      if (changing_direction) return;
153      changing_direction = true;
154      const keyPressed = event.keyCode;
155      const goingUp = dy === -10;
156      const goingDown = dy === 10;
157      const goingRight = dx === 10;
158      const goingLeft = dx === -10;
159      if (keyPressed === LEFT_KEY && !goingRight) {
160        dx = -10;
161        dy = 0;
162      }
163      if (keyPressed === UP_KEY && !goingDown) {
164        dx = 0;
165        dy = -10;
166      }
167      if (keyPressed === RIGHT_KEY && !goingLeft) {
168        dx = 10;
169        dy = 0;
170      }
171      if (keyPressed === DOWN_KEY && !goingUp) {
172        dx = 0;
173        dy = 10;
174      }
175    }
176
177    function move_snake() {
178      // Create the new Snake's head
179      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
180      // Add the new head to the beginning of snake body
181      snake.unshift(head);
182      const has_eaten_food = snake[0].x === food_x && snake[0].y === food_y;
183      if (has_eaten_food) {
184        // Increase score
185        score += 10;
186        // Display score on screen
187        document.getElementById('score').innerHTML = score;
188        // Generate new food location
189        gen_food();
190      } else {
191        // Remove the last part of snake body
192        snake.pop();
193      }
194    }
195    
196  </script>
197</html>

همچنین، خروجی نهایی پروژه ساخت بازی با جاوا اسکریپت به صورت تصویر متحرک زیر است:

سورس کد ساخت بازی اسنک با جاوا اسکریپت

سخن پایانی

جاوا اسکریپت به علت همه‌کاره بودن آن، یکی از محبوب‌ترین و بهترین زبان‌های برنامه نویسی حال حاضر دنیا به‌حساب می‌آید. امروزه پروژه‌های ساخت بازی با جاوا اسکریپت به لطف فریم‌ورک‌های محبوبی که برای این هدف وجود دارند، بسیار رایج هستند و چشم‌انداز رشد حوزه ساخت بازی با جاوا اسکریپت تا حدود زیادی روشن است.

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

بر اساس رای ۱۸ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
EducativeCodeWizardShq
۳ دیدگاه برای «آموزش ساخت بازی با جاوا اسکریپت – راهنمای کامل و ساده»

خیلی ممنون عالی بود

سلام با تشکر از شما بابت راهنماییهاتون ولی یه سوال داستم
چجوری سرعت مار رو کم و زیاد کنیم؟

بسیار جذاب بود، دستتون درد نکنه.

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *