ریاکت + Next.js - ساخت بازی 2048 همراه با انیمیشنها
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- چگونه با ریاکت 18 و NextJS بازی 2048 خودتان را بسازید؟ - ما انیمیشنهای جذابی اضافه خواهیم کرد و نکته ویژه این است که بازی روی دستگاههای موبایل هم به خوبی اجرا میشود.
- هوکهای ضروری ریکت مانند useState و useRef و useCallback و useEffect و موارد دیگر برای بهبود عملکرد و قابلیتهای اپلیکیشنها
- مدیریت state پیچیده با استفاده از useReducer و Context API که به کنترل موثر جریان داده کمک میکند.
- یکارچهسازی بینقص تایپاسکریت در پروژه ریاکت برای ارتقای کیفیت کد و تجربه توسعهدهنده
- درک تفاوتهای debounce و throttling و اعمال این مفاهیم به صورت استراتژیک برای بهینهسازی مدیریت رویدادها و بهبود تعاملات کاربری
- توسعه طرحبندیهای واکنشگرا در ریاکت برای بازی 2048 برای اطمینان از نمایش ویژوال جذاب و عملکرد مناسب در اندازهها و رزولوشنهای مختلف صفحه
- سفارشیسازی بازی 2048 برای پلتفرمهای موبایل و تسلط به تکنیکهایی برای تحویل تجربه بینقص بازی روی انواع دستگاهها
- یادگیری نحوه رندر ریاکت تا دیگر دغدغهای بابت DOM مجازی نداشته باشید.
- استفاده از قدرت محبوبترین فریمورک ریاکت یعنی NextJS
- تست با react-testing-library
توضیحات دوره
انتشار در ژانویه 2024
ما معتقدیم برنامهنویسی باید لذتبخش باشد و خلاقیت را کشف کند. چرا باید وقتتان را صرف ساخت لیستهای Todo یا سبد خریدی کنید که حتی نمیتواند پرداخت را مدیریت کند؟ بیایید کاری واقعا هیجانانگیز انجام دهیم - یک بازی 2048 فوقالعاده بسازیم. و منظور ما آن بازیهای بیکیفیت و پر از اشکال که همهجا مشاهده میکنید نیست. بازی ما انیمیشن خواهد داشت و شما میتوانید آن را روی موبایل خود بازی کنید.
بهترین قسمت این است که بازی را از ابتدا خودتان میسازید. هدف ما کمک به شماست تا به یک توسعهدهنده موفق تبدیل شوید. این مسیر فقط درباره حفظ کردن ویژگیهای ریاکت نیست؛ بلکه تجربه واقعی فرآیند توسعه را خواهید داشت. با هم یاد میگیریم چگونه از محبوبترین فریمورک ریاکت یعنی NextJS استفاده کنیم. از امنیت تایپ تایپاسکریپت بهره میبریم و تجربه توسعهدهنده شما را بهبود میبخشیم. مطمئن باشید همکارانتان مهارتهای تست و کدهای تمیز و منظم شما را دوست خواهند داشت، که همه اینها با کمک linters و formatters کد امکانپذیر است.
اما قبل از شرکت در دوره اجازه دهید درباره پایان جذاب این مسیر کمی بیشتر بگوییم. لطفا با صدای طبل همراه باشید! پس از این دوره شما یک بازی شگفتانگیز 2048 در ریاکت خواهید داشت. همه چیز ساخته دست خود شماست. تصور کنید یک صفحه 4 در 4 که هدف شما ترکیب tiles تا رسیدن به عدد 2048 است. بازی کاملاً عملیاتی خواهد بود و انیمیشنهای عالی را که الان مشاهده میکنید فراموش نکنید. در نهایت، نکته جذاب این است که میتوانید این بازی را دقیقاً روی دستگاه موبایل خود اجرا کنید! بله، درست است، با حرکت انگشتتان به سمت موفقیت پیش بروید.
امیدوارم همین الان جذب شده باشید.
از آنجا که این دوره درباره ما نیست، ولی شاید بخواهید درباره سابقه ما بدانید. مدرس Mateusz، مهندس نرمافزار باتجربه با بیش از 12 سال سابقه در این صنعت است. او افتخار کار در تیمهای متنوع توسعهدهنده در اروپا، آمریکا و آسیا را داشته است. مسیر او با ریاکت از 2017 آغاز شده و تاکنون پروژههای متوسط و بزرگ متعددی ساخته است. این یعنی شما از کسی که نه تنها این فناوریها را به خوبی یاد گرفته بلکه در واقعیت هم بسیار استفاده کرده، آموزش میبینید.
پس بیایید شروع به کار کنیم.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان مشتاق ریاکت و NextJS - چه تازهکار باشید چه در سطح متوسط، این دوره راه شما برای تسلط به توسعه وب مدرن است.
- اگر از لیستهای Todo و مثالهای تکراری خسته شدهاید - اغلب دورههای آنلاین پروژههایی میسازند که هیچ کس از آنها استفاده نمیکند، بیایید چیزی بسازیم که دوستان شما دوست داشته باشند.
- یادگیری از تجربه واقعی - از درسهایی استفاده کنید که توسط یک توسعهدهنده باتجربه ارائه شده که پروژههای متعددی را در مقیاس متوسط و بزرگ ساخته است. یادگیری تکنیکها از بینش هایعملی
- اگر جاوااسکریپت آموختهاید ولی میخواهید مهارتهای خود را ارتقا دهید.
ریاکت + Next.js - ساخت بازی 2048 همراه با انیمیشنها
-
Hello world - امروز بیایید چیز جالبی بسازیم 01:08
-
ایجاد پروژه جدید ریاکت + NextJS 09:02
-
پاکسازی boilerplate و تعریف استایلهای بازی 10:02
-
صفحه بازی 13:14
-
تست 12:17
-
Tiles 08:26
-
مدیریت State با هوکهای useState و useReducer 28:30
-
رندرینگ tiles - بررسی useEffect و useRef و StrictMode در ریاکت 25:55
-
حرکات عمودی tile 30:45
-
حرکات افقی tile 14:30
-
چیدن tile روی هم 22:01
-
ادغام tile 16:18
-
پاکسازی صفحه بازی 11:13
-
انیمیشنها 13:10
-
ایجاد tiles - بررسی React Context و useCallback 22:01
-
Virtual DOM - ریاکت چگونه کامپوننتها را رندر میکند؟ 17:06
-
محدود کردن ایجاد tile 10:47
-
طرحبندی بازی و حرکات سوایپ در موبایل 28:10
-
امتیازدهی 12:11
-
طرحبندی دسکتاپ با react-responsive 06:00
-
Debounce در مقابل throttle 08:20
مشخصات آموزش
ریاکت + Next.js - ساخت بازی 2048 همراه با انیمیشنها
- تاریخ به روز رسانی: 1405/04/02
- سطح دوره:مقدماتی
- تعداد درس:21
- مدت زمان :05:21:06
- حجم :2.04GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy