بعضی اوقات ، بهترین راه برای یادگیری توسعه وب ، ایجاد چیزی سرگرم کننده است. طی چند هفته گذشته ، من خودم را به چالش کشیدم که چند بازی مرورگر ساده از ابتدا ایجاد کنم. نه تنها مهارت های جاوا اسکریپت و CSS خود را بهبود بخشیدم ، بلکه بهترین روشها و مشکلات را نیز در این راه کشف کردم. در این پست ، تجربه خود را به اشتراک می گذارم و یک الگوی اساسی را که می توانید برای پروژه های بازی خود استفاده کنید ارائه می دهم.
چرا بازی های مرورگر ایجاد می کنید؟
بازخورد فوری: شما نتایج را فوراً می بینید ، که انگیزه است.
پوشش کامل: حتی یک بازی ساده شامل منطق ، UI ، رسیدگی به رویداد و گاهی اوقات با پس زمینه برای نمرات یا چند نفره است.
SHARBLE: هر کسی که دارای مرورگر باشد می تواند بازی کند – نصب لازم نیست.
دروس کلیدی آموخته شده
- شروع ساده ، تکرار سریع اولین بازی من یک چالش اساسی برای تطبیق رنگ بود. من با یک فایل HTML واحد و حداقل CSS شروع کردم. هنگامی که مکانیک اصلی کار کرد ، انیمیشن ها و جلوه های صوتی را اضافه کردم.
- منطق تقسیم کد خود را به ماژول ها (به عنوان مثال ، ورودی ، رندر ، حالت بازی) مدولار کنید ، اشکال زدایی و اضافه کردن ویژگی ها بعداً بسیار ساده تر شد.
- طراحی پاسخگو مهم است که بسیاری از بازیکنان از دستگاه های تلفن همراه استفاده می کنند. استفاده از واحدهای نسبی و نمایش داده های رسانه ای باعث می شود بازی شما در همه جا قابل پخش باشد.
- بهینه سازی عملکرد حتی اگر مراقب نباشید ، بازی های ساده می توانند تاخیر کنند. برای انیمیشن ها از RequestAnimationFrame استفاده کنید و به روزرسانی های DOM را به حداقل برسانید.
- لهستانی تجربه کاربر لمس های کوچک – مانند جلوه های صوتی ، انتقال و یک رهبر ساده – تفاوت بزرگی در تعامل بازیکن ایجاد می کند. یک الگوی بازی ساده در اینجا یک الگوی HTML/JS حداقل برای شروع بازی مرورگر بعدی خود وجود دارد:
بازی ساده من
بدن {حاشیه: 0 ؛ سابقه و هدف: شماره 222 ؛ رنگ: #FFF ؛ خانواده فونت: Sans-Serif ؛ }
#Game {عرض: 100VW ؛ ارتفاع: 100VH ؛ نمایش: فلکس ؛ Align-adems: Center ؛ توجیه-محتوای: مرکز ؛ }
.btn {padding: 1EM 2EM ؛ سابقه و هدف: #4CAF50 ؛ مرز: هیچکدام ؛ رنگ: #FFF ؛ اندازه فونت: 1.2EM ؛ Border-Radius: 8px ؛ مکان نما: اشاره گر ؛ }
شروع بازی
const gamediv = document.getElementById (“بازی”) ؛
const startbtn = document.getElementById ('startBtn') ؛
startbtn.onclick = () => {
gamediv.innerhtml = '
بازی شروع شد! (با منطق خود جایگزین کنید)
'
// منطق بازی خود را اینجا اضافه کنید
} ؛
افکار نهایی
ساخت بازی ها روشی خارق العاده برای تمرین توسعه وب است. در یک زمینه سرگرم کننده با مشکلات دنیای واقعی روبرو خواهید شد و در پایان چیز جالبی برای اشتراک گذاری خواهید داشت. اگر به الگوهای پیشرفته تر علاقه دارید یا می خواهید برخی از بازی های من را ببینید (مانند neonrider.com ، idlegames.com ، goldtowerdefense.com یا color-rush.com) ، احساس راحتی کنید تا در نظرات به دست بیاورید یا پیوندهای خود را رها کنید!
برنامه نویسی و ساخت بازی مبارک!
