با ساخت این پروژه های بازی سرگرم کننده، می توانید برنامه نویسی را خسته کننده تر کنید و همزمان مهارت های خود را تقویت کنید.
این واقعیت که 98.4٪ از تمام وب سایت ها از جاوا اسکریپت استفاده می کنند، دلیلی است که شما باید آن را به عنوان یک توسعه دهنده بشناسید. در نگاهی به گذشته، ساخت یک بازی با جاوا اسکریپت نه تنها به یادگیری سریع شما کمک می کند. همچنین به شما امکان می‌دهد در موقعیت‌های مختلف حین کار – چه مبتدی یا تازه‌کننده، از مفاهیم ساده و پیچیده آن استفاده کنید.
اگر با نمایش های بصری بهتر یاد می گیرید، این آموزش های بازی مبتنی بر جاوا اسکریپت در YouTube ارزش وقت شما را دارد.
1. بازی با ورق با جاوا اسکریپت
این بازی ورق جاوا اسکریپت با گاوین لون راه دور زدن کارت‌ها را با بیش از 600 خط کد جاوا اسکریپت به شما نشان می‌دهد. در حالی که تمرکز اصلی بر آموزش جاوا اسکریپت است، شما همچنین خواهید آموخت که قدرت طراحی CSS را با ساختار DOM HTML ترکیب کنید تا به پاسخگویی با جاوا اسکریپت برسید.
هدف نهایی پروژه این است که چند کارت را برگرداند، و زمانی که کارت‌ها بالاخره جای خود را عوض کنند، بازیکن آس را حدس می‌زند. هر کارت تصویری از چهار نقش مختلف کارت است. بنابراین، در حالی که خودتان کارت‌ها را طراحی نمی‌کنید، یاد می‌گیرید که موقعیت‌های آنها را به صورت واکنش‌گرا دستکاری کنید، دور بازی را افزایش دهید، امتیازات را با تغییر سطوح اضافه یا حذف کنید، و امتیازات بازی را در حافظه محلی مرورگر ذخیره کنید—همه با استفاده از جاوا اسکریپت.
این آموزش گام به گام است و علیرغم بلند کردن سنگینی که در پشت صحنه انجام خواهید داد، به راحتی قابل پیگیری است. برای مبتدیان و تازه کننده ها عالی است. اگرچه این در مورد ساخت یک بازی کارتی است، اما شما را در معرض بیشتر تکنیک های سیم کشی جاوا اسکریپت در موقعیت های واقعی قرار می دهد. به علاوه، توانایی تفکر شما را از بین می برد.
2. بازی Breakout 2D با جاوا اسکریپت
را
اگر می خواهید یاد بگیرید که فواصل عمل را کنترل کنید و عناصر DOM را به صورت پویا با استفاده از جاوا اسکریپت جابجا کنید، Ania Kubów نشان می دهد که با این آموزش بازی با استفاده از جاوا اسکریپت چقدر سرگرم کننده است. به عنوان یک مزیت، این ویدئو همچنین نحوه میزبانی و نمایش پروژه خود را به کارفرمایان بالقوه نشان می دهد.
در مورد هر احتمالی در یک بازی شکست فکر کنید. یک سکوی متحرک با یک توپ که به طور مماس به دیوارها برخورد می کند تا آجرهای بالای آن را بشکند. و سیستم پاداش را نیز در این مورد کدنویسی خواهید کرد. به طور کلی، اگر می‌خواهید بدون استفاده از عوامل شخص ثالث یا تصاویر منبع، چیزی را از پایه بسازید، این آموزش بازی بریک‌آوت ارزش بررسی دارد.
در حالی که منطق خود را در توابع متصل می‌کنید، ویدیو در مراحل آسان، از جمله بهترین روش‌های بیانیه شرطی مانند کلید سوئیچ، اطلاعات بیشتری در مورد کلاس جاوا اسکریپت و مفاهیم شیء می‌آموزد.
3. جاوا اسکریپت بازی مار
نوستالژی بازی Snake II Nokia 3310 خود را با ساخت این بازی مار جاوا اسکریپت با Kyle باز کنید. احتمالاً قبلاً این بازی را انجام داده‌اید و احتمالاً بارها در طول زندگی آن را پخش خواهید کرد زیرا با استفاده از وانیلی جاوا اسکریپت یک کد می‌نویسید.
در حالی که به شما آموزش می دهد که DOM را به صورت پویا به هم متصل کنید، این ویدیو نشان می دهد که چگونه می توانید ماژول های سفارشی را در جاوا اسکریپت بسازید و از آنها استفاده کنید. بنابراین فرصتی را برای شما باز می کند تا در مورد جداسازی نگرانی ها با استفاده از اصل تکرار نکنید (DRY) بیاموزید.
در پشت صحنه، به مفاهیم پیشرفته تر جاوا اسکریپت تسلط خواهید داشت. وظایفی از جمله ایجاد شبکه پخش کننده، قرار دادن غذا، ساخت بدن مار، طولانی کردن مار، کدگذاری منطق ناوبری، ایجاد طرح پاداش و جریمه، و کنترل سرعت مار، شما را در معرض جاوا اسکریپت اصلی قرار می دهد.
4. بازی تیک تاک پا با جاوا اسکریپت
را
شاید با ساختن یکی با جاوا اسکریپت در ویدیوی دیگر با Kyle، گیم پلی تیک تاک شما واضح تر شود. این یک پروژه ساده اما ارزشمند برای مبتدیان جاوا اسکریپت است که می توانند مشکلات پیچیده را حل کنند.
ویدئو فقط به جاوا اسکریپت ختم نمی شود. همچنین نشان می دهد که چگونه طراحی رابط کاربری خود را با استفاده از CSS در دست بگیرید. با ثبات و تعهد، می توانید تقریباً هر تکنیک مورد نیاز برای شروع سفر توسعه وب خود را در این ویدیو بیاموزید.
در حالی که DOM را با جاوا اسکریپت دستکاری می‌کنید، این ویدیو در مورد تصمیم‌گیری برنده و ترسیم کدنویسی، تصمیم‌گیری در مورد نوبت بازیکنان و هم‌ترازی اشیاء نقش بسزایی دارد. توابع، حلقه ها و شرایط جاوا اسکریپت برخی از مفاهیم پیشرفته ای هستند که در این فیلم آموزشی جاوا اسکریپت Tic tac Toe یاد خواهید گرفت.
5. بازی پازل اسلاید با جاوا اسکریپت
پازل ها می توانند تامل برانگیز باشند. اما ساختن آن با جاوا اسکریپت وانیلی راهی سرگرم کننده برای کشف خلاقیت و یادگیری مفاهیم اولیه تا پیچیده جاوا اسکریپت به نظر می رسد.
می‌خواهید در این آموزش کدنویسی کنید—اگر دوست دارید نحوه استفاده از مفاهیم جاوا اسکریپت، از جمله سوئیچ‌های شرطی و دستکاری موقعیت DOM پویا با استفاده از توابع سفارشی و داخلی را ببینید.
اگرچه معلم جاوا اسکریپت را در داخل یک تگ اسکریپت در فایل HTML قرار می دهد، می توانید اسکریپت خود را در یک فایل جاوا اسکریپت اختصاصی بچرخانید و برای وضوح آن را به DOM پیوند دهید. صرف نظر از این، بهتر است برای رسیدن به هدف خود بر روی منطق اصلی و فرآیند فکر تمرکز کنید، از جمله اینکه چگونه آنچه را که در اینجا یاد می‌گیرید در سناریوهای زندگی واقعی به کار ببرید.
6. بازی اتومبیل رانی با جاوا اسکریپت
ساختن یک بازی اتومبیل رانی با استفاده از جاوا اسکریپت وانیلی ممکن است بهترین خروجی گرافیکی را نداشته باشد. اما سیم‌کشی یک بازی مسابقه‌ای اتومبیل رانی در حالی که این آموزش را دنبال می‌کنید، به شما می‌آموزد که از قدرت نفوذ عملکرد جاوا اسکریپت در هر برنامه‌ای استفاده کنید.
این آموزش شامل قرار دادن دو ماشین (قرمز و آبی) در یک مسیر مسابقه است. ماشین آبی از هر جهت به صورت تصادفی ظاهر می شود و وسیله نقلیه قرمز رنگ که نماینده بازیکن است سعی می کند از برخورد جلوگیری کند. بازی به محض برقراری تماس بین هر دو ماشین به پایان می رسد.
اگرچه این یک توضیح ساده از آنچه در این یکی می‌سازید است، شما برخی از منطق پیشرفته جاوا اسکریپت را برای دستکاری DOM و یک ظاهر طراحی خواهید آموخت. همچنین هنگام ایجاد جوایز و جریمه‌های بازیکن، بینشی در مورد عملگرهای جاوا اسکریپت به دست خواهید آورد.
در حین افزودن قابلیت‌ها به آهنگ، برخی از مفاهیمی که یاد خواهید گرفت شامل رویدادهای جاوا اسکریپت، شرایط، توابع ناشناس، انیمیشن جاوا اسکریپت، کنترل بازه‌ها و بسیاری موارد دیگر است.
7. بازی ماریو با جاوا اسکریپت
این آموزش بازی ماریو جاوا اسکریپت تمام چیزی است که برای فرو بردن سر خود در جاوا اسکریپت نیاز دارید. در حالی که ساخت یک بازی ماریو با جاوا اسکریپت پیچیده به نظر می رسد، کریس، مربی شما، در این ویدیوی یوتیوب نشان می دهد که بیش از حد ممکن است. بنابراین ممکن است بخواهید سرگرم شوید و توانایی تفکر انتقادی خود را با پیشرفت در کنار هم کشف کنید.
اگرچه ممکن است مبتدیان این آموزش را کمی پیشرفته بدانند، اما این یک تلاش عالی برای تجدید کننده ها است تا مهارت های جاوا اسکریپت خود را به سطح بعدی ببرند.
علاوه بر یادگیری در مورد دستکاری عناصر، از قدرت جاوا اسکریپت خالص در ساختن یک صفحه بوم پاسخگو برای رابط بازی با استفاده از برنامه نویسی شی گرا (OOP) استفاده خواهید کرد. از آنجایی که پخش کننده به طور فعال متحرک است، استفاده از کنترل صفحه کلید جاوا اسکریپت، مدیریت رویداد، حلقه ها، عملگرها، شرایط، و توابع داخلی و سفارشی، از جمله تجربیاتی هستند که شما به دست خواهید آورد.
8. ساخت مین یاب با جاوا اسکریپت
آیا می خواهید قدرت توابع بازگشتی و روش های آرایه را در ضرب عناصر DOM با جاوا اسکریپت کشف کنید؟ ممکن است بخواهید با این آموزش جاوا اسکریپت Minesweeper توسط Ania Kubów در Traversy Media شروع کنید.
این شامل توجه زیادی به جزئیات است. اما این یک آموزش برای مبتدیان است و یکی از بهترین ها برای حلقه کردن دستان خود در اطراف سیستم طرح بندی شبکه با استفاده از جاوا اسکریپت است. هدف نهایی ایجاد یک قالب شبکه ای است که در آن بازیکنان از پا گذاشتن روی مین اجتناب کنند.
به همان سادگی که به نظر می رسد، منطق برنامه نویسی زیادی را می نویسید که شامل اکثر تکنیک های اصلی جاوا اسکریپت می شود تا عملکرد بازی را در پشت صحنه سیم کشی کنید.
9. آموزش بازی جاوا اسکریپت پوکمون با HTML Canvas
Pokemon یکی از پیچیده ترین پروژه های بازی است که می توانید با استفاده از جاوا اسکریپت بسازید. با این حال، اگر ساعت‌های طولانی برنامه‌نویسی سخت‌گیرانه با جاوا اسکریپت را تجربه می‌کنید و آماده هستید که با اطمینان بیشتری تجدید نظر کنید، بهتر است وارد این آموزش شوید.
علاوه بر اسکریپت‌نویسی DOM و انیمیشن با جاوا اسکریپت، این ویدئو به شما می‌آموزد که چگونه با استفاده از جاوا اسکریپت، دارایی‌ها، از جمله صدا و تصویر را جابه‌جا و رندر کنید. چیزهای زیادی در مورد جاوا اسکریپت در این آموزش آشکار می شود که در هر مشکل کدنویسی در زندگی واقعی ارزشمند خواهید یافت.
علاوه بر دیگر تکنیک‌های دستکاری اصلی جاوا اسکریپت، این آموزش همچنین از مفاهیم OOPs به شدت استفاده می‌کند. اگر قصد دارید بعداً وارد TypeScript شوید، این ارزشمند است. یکی از عوامل ساده‌کننده این آموزش نحوه ترسیم وظایف توسط استاد راهنما است.
وقتی سیستم پیچیده‌ای را که برای انجام این کار ایجاد می‌کنید تصور می‌کنید، آسان است که از آن عقب‌نشینی کنید. اما به این فکر کنید که در نهایت چه چیزی به دست خواهید آورد.
برنامه های حل مسئله جاوا اسکریپت را بیاموزید
بازی ها از برخی از پاسخگوترین و شهودی ترین منطق در برنامه نویسی استفاده می کنند. بنابراین ارزش یادگیری جاوا اسکریپت را از ساختن آن دارد. در حالی که این آموزش ها مبتنی بر بازی هستند، شما را در معرض مفاهیم اصلی جاوا اسکریپت قرار می دهند که برای بسیاری از مشکلات کدنویسی دیگر، از جمله توسعه وب و ایجاد اپلیکیشن موبایل قابل استفاده است. حتی اگر قصد دارید بعداً به چارچوب ها روی بیاورید، بدون توجه به این مفاهیم، این مفاهیم را به کار خواهید برد.